Mise en forme différentes selon la balise (p ou div)

Auteur
jewome62	# 10 Mar 2010 - 03:36:15
9 Posts	Bonjour, Je développe actuellement un site web pour un ami, ayant le souvenir d'avoir déjà visiter alsacréations et openweb il y a quelques année, je viens m'informer des nouveautés. Je décide donc de modifier le webdesign du site pour supprimer des class, des div, des images et appliquer les sélecteurs css, du css 3 en modifiant mon code source de la galerie, je passe de x allant de 1 à 3 `<div id="albums"> <div class="catPhotox"> <p><a href="(lien)"><img src="(miniature)" alt="(titre)" /></a><p> <h2><a href="(lien)">(titre)</a></h2> <p>Le (date) à (lieu).</p> </div> [...] </div>` `catPhoto1, catPhoto2, catPhoto3 { margin-top:10px; text-align:center; width: 30%; float: left; }` Par: `<div id="albums"> <p>/C'est ici quand je met div sa marche mais c'est un paragraphe!/ <a href="(lien)"><img src="(miniature)" alt="(titre)" /></a> <h2><a href="(lien)">(titre)</a></h2> Le (date) à (lieu). </p> [...] </div>` `#albums p /* Ou div dans l'exemple */ { margin-top:10px; text-align:center; width: 30%; float: left; } #album h2 { display:inline; }` le problème c'est que sa déforme tout (cf: images) sauf si dans le deuxième exemple je mets div a la place de p J'ai deux questions: Comment avoir le meme rendu avec div pour p? Est ce que mettre un h2 (de type block) dans un p est une erreur sémantique? Avec P Avec Div Modifié par jewome62 (10 Mar 2010 - 04:06)
9 Posts
Raphael	# 10 Mar 2010 - 07:17:37
twitter.com/goetter Administrateur 12017 Posts	Hello, Chaque élément a un rendu par défaut différent. L'élément <p> dispose de marges par défaut (1em en haut et en bas si mes souvenirs sont bons), ce qui n'est pas de cas de l'élément <div>. Dans ton cas, puisque tu ne fixes que la marge haute (10px) de ton élément, il restera à supprimer la marge basse pour obtenir le même rendu. PS : ton choix de <p> pour énumérer une liste d'images ne me semble pas forcément le plus judicieux de toute façon Modifié par Raphael (10 Mar 2010 - 07:19) Le livre qui va vous permettre d'aller (vraiment) plus loin avec CSS : "CSS avancées - vers HTML5 et CSS3"
twitter.com/goetter Administrateur 12017 Posts
Laurent Denis	# 10 Mar 2010 - 07:59:05
7979 Posts	Un titre H2 dans un élément P, pas top non plus Ne parlons pas de choses nouvelles. Commencez par ne pas détourner CSS de son objet, ce que vous faites immanquablement avec des techniques sexy qu'on enseigne ici.
7979 Posts
fvsch	# 10 Mar 2010 - 12:28:52
Administrateur 19942 Posts	Le code HTML de départ était pas mal. Le remplacer par quelque chose d'invalide, c'est dommage. C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19942 Posts
jewome62	# 10 Mar 2010 - 20:23:06
9 Posts	Merci de vos avis J'ai opté pour ceci `<div> <p><a href="lien"><img src="imgage" alt="album10" /></a></p> <h2><a href="lien">titre</a></h2> <p>Le date a lieu</p> </div>`
9 Posts