> Tous les forums > Forum des Webmasters
 Besoin d'aide création page HTML - positionner/superposer photosSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Topodoco
  Posté le 20/08/2015 @ 20:34 
Aller en bas de la page 
Petit astucien

Bonjour à tous,

Je vais essayer d'expliquer le plus simplement possible ce que je recherche, mais que je n'arrive pas à produire.

Avant tout, il faut bien savoir que je n'ai pas peur, mais que je n'ai aucune "base" en HTML. J'ai beau chercher des tutos et essayer de copier/coller des bouts de codes trouvés dans différentes pages, je n'arrive jamais au résultat souhaité.

Je vais mettre ci-joint une illustration représentant a peu près ce que j'ai envie de créer. La mise en page changera encore en fonction des envies, et des besoins, mais si j'arrive à créer cela, je devrait être capable de l'adapter aux quelques modifications encore à venir.

Essai mise en page

L'idée serait de mettre en bleu, un fond fixe.

Sur ce fond, glisseraient textes de présentation (rose) et photos (jaunes).

Certaines photos seraient des "liens" mais cela ne me semble pas difficile.

Par contre, j'aimerai pouvoir placer les photos "comme bon me semble" tout en gardant le fond visible.

J'ai essayé en copiant/collant des bouts de codes trouvés ci et là, mais rien n'arrive à ce résultat.

J'ai aussi tenté avec BlueGriffon (WYSIWYG), mais en positionnant une image "jaune", le fond bleu disparait, et il ne m'est pas possible de la placer comme j'en ai envie, ou j'en ai envie.

Si possible, il n'est pas exclu que 2 photos puissent ce superposer... Mais si c'est trop compliqué, je ferait sans).

Est-ce que quelqu'un pourrait m'expliquer à partir d’où je dois et comment travailler pour arriver à ce résultat ?

PS: pour compliquer encore la chose, j'aimerai travailler en % afin que la visualisation s'adapte à la taille de l'écran, et étant une présentation qui sera hebergé par un forum, je dois écrire en HTML et CSS "inline"(je ne peux pas faire heberger de fichier CSS à part).

Après plusieurs essais, je suis arriver au mieux à ceci (mais impossible de placer mes images comme j'en ai envie):

<dd>
<p>
<ul style="width:90%; position:relative; margin-top:-1px; background:fixed; background-size: 100%,100%; background-repeat: no-repeat; background-image:URL(MON_FOND.JPEG");">
<br />
<img src="BANNIERE_DE_PRESENTATION.GIF" style="width:90%;margin-left:2%;"/>
<br />
<ul style="width:90%; margin-left:2%; font-size:25px; font-family:Century Gothic; background-color:rgba(0, 31, 31, 0.8); padding:0px;font-weight:normal; color:#ffffff; text-align:center;"><br />
Petit <b>Essai</b> de texte:<br />
<font style="color:#FFCC00">
<b>TEXTE-01</b>
<br />
</font>
<br />
</ul>
<br />
<ul style="width:70%; margin-left:15%; font-size:15px; font-family:Century Gothic; background-color:rgba(0, 31, 31, 0.8); padding:10px;font-weight:normal; color:#ffffff; text-align:center;"><br />
Zone de texte 02.
Blablabla.....
<br /><br />
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</ul>
</p>
</dd>

Merci d'avance !



Modifié par Topodoco le 20/08/2015 20:37
Publicité
Topodoco
 Posté le 20/08/2015 à 20:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci pour ta réponse, je vais lire tes liens !

Cela veux aussi dire que jusqu'à présent, j'avais tout faut ?

Bon au moins ça m'a permis de comprendre un minimum le fonctionnement....

Topodoco
 Posté le 21/08/2015 à 03:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Je vais noter ce point comme "résolu" mais je laisse malgré tout ici une autre solution.

Celle proposée ci-dessus fonctionnait parfaitement ! Jusqu'au moment ou j'ai découvert que les "tableaux" n'étaient pas supportées par le forum sur lequel le profile devait s'afficher...

Pas de chance, mais c'est vraiment sympa de travailler avec des tables !

Au final, j'ai simplement fait un "screenshot" de ce travail, puis l'ai coupé en plusieurs "tranches", qui s'assemblent en HTML.

Rien de bien compliqué, mais pas du tout la vision des choses que j'avais avant de me lancer.

Encore merci à Anonyme !

Édit: correction "Tableaux" (en français).



Modifié par Topodoco le 21/08/2015 06:17
elle
 Posté le 21/08/2015 à 03:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Des tableaux.

Topodoco
 Posté le 21/08/2015 à 06:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
elle a écrit :

Des tableaux.

Merci pour la réponse.

C'est la solution déjà proposée plus haut et aussi la plus simple à mettre en oeuvre.

Elle fonctionne très bien pour faire ce que je voulais.

Malheureusement comme dit plus haut, ces balises ne sont pas reconnues par le forum en question.

J'ai donc simplement découpé mon screenshot en plusieurs morceaux (tranches) et assemblé en HTML.

Encore merci !

elle
 Posté le 21/08/2015 à 06:10 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Non, je voulais juste préciser qu'en français, on dit des tableaux, pas des tables.



Modifié par elle le 21/08/2015 06:12
Topodoco
 Posté le 21/08/2015 à 06:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
elle a écrit :

Non, je voulais juste préciser qu'en français, on dit des tableaux, pas des tables.

OK Merci pour la précision, c'est corrigé !

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
299,99 €PC portable 14 pouces Asus (Pentium, 4 Go RAM, 128 Go eMMC, Windows 10, Office 365) + sac à 299,99 €
Valable jusqu'au 20 Octobre

Cdiscount fait une promotion sur le PC portable 14 pouces Asus E406MA-BV1040TS qui passe à 299,99 € au lieu de 400 €. Ce portable dispose d'un écran 14 pouces HD (1368x 768 pixels), d'un processeur Intel Pentium Silver N5030, de 4 Go de RAM et d'un espace de stockage eMMC de 128 Go extensible par USB, d'une webcam, du WiFi et du bluetooth, de l'USB 3.0. Il pèse 1,3 kg et offre une autonomie de 10h environ.

Il possède un numpad (pavé numérique intégré au touchpad). Notez qu'un abonnement d'1 an à Office 365 (Word, Excel, OneNote, PowerPoint, Outlook, Access et Publisher) vous est également offert ainsi qu'une sacoche et une souris.

Une bonne affaire pour un petit portable à emmener partout avec vous.


> Voir l'offre
549,99 €Portable 15,6 pouces HP (FullHD, Core i7 1165G7, 8 Go, SSD 256 Go, Windows 10) à 549,99 €
Valable jusqu'au 20 Octobre

RueDuCommerce fait une promotion sur l'ordinateur portable HP Pavilion 15-eg0041nf qui passe à 699,99 € alors qu'on le trouve ailleurs autour de 800 €. Or HP rembourse actuellement 150 € pour l'achat de cet ordinateur qui vous reviendra à 549,99 € après remboursement. Ce portable possède un écran 15,6 pouces anti reflet Full HD (1920x1080), un processeur Intel Core i7-1165G7, un chip graphique Intel Irois Xe, 8 Go de RAM et un SSD de 256 Go. Le tout tourne sous Windows 10 que vous pouvez passer gratuitement à Windows 11. Il pèse 1,75 kg et offre une autonomie de 8h.


> Voir l'offre
35,99 €Super Mario 3D-All Stars sur Switch à 35,99 € avec le code AFFAIRE20
Valable jusqu'au 20 Octobre

Cdiscount propose actuellement le jeu Super Mario 3D-All Stars sur Switch à 35,99 € avec le code promo AFFAIRE20. Profitez non pas d’une, ni de deux, mais des trois premières aventures de Super Mario en 3D… dans un seul et même jeu avec Super Mario 3D All-Stars ! Cette compilation réunit les trois premiers Super Mario en 3D, pour la première fois avec des graphismes optimisés pour la Nintendo Switch. Découvrez ou redécouvrez Super Mario 64, la mythique première aventure de Mario en 3D sur Nintendo 64 ; Super Mario Sunshine, le jeu de plateforme le plus rafraichissant de la saga sorti sur GameCube ; et le renversant Super Mario Galaxy de la Wii. 


> Voir l'offre

Sujets relatifs
creation automatique de liens dans une page html
Besoin d'aide sur une page
besoin d'aide pour la creation d'un site
besoin d aide pour creation de site
Créer ma page web, besoin d'aide
Besoin d'aide pour la creation d'un site web
Code HTML pour positionner un fond de page web
besoin d'aide pour code html
besoin d'aide pour création bdd
besoin d'aide (php ou html)
Plus de sujets relatifs à Besoin d''aide création page HTML - positionner/superposer photos
 > Tous les forums > Forum Forum des Webmasters