[Resolu] validation W3C : problème balise div

[zavko]

Bonjour,

J'ai un site que j'essaie de valider avec l'aide de l'extension Webdevelopper, mais j'ai une erreur que je ne parviens pas à corriger.

Voici l'erreur que me donne W3C :
http://validator.w3.org/check?verbose=1 ... euil.fr%2F

En gros, j'utilise une balise <div class="puce"> afin d'ajouter une image (qui me sert de puce) pour "styliser" un titre <h2>.
Mais je n'ai pas besoin / envie d'utiliser la dite image à chaque fois que je me sert du titre <h2>. C'est pourquoi j'ai créer ce style .puce qui me permet d'insérer cette "puce" à l'affichage.

Je ne sais pas si je suis bien clair....

Enfin bref, j'ai essayé plusieurs solutions, mais à chaque tentative, qui me permet de rendre valide ma page, la "puce" n'apparait plus, donc ça ne me convient pas.

Auriez-vous une idée ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Nicosmos]

Je pense que tout simplement les <div> ne sont pas acceptés dans les balises de titres.

Si tu supprime toutes tes <div class="puce"> contenues dans des <h2> et que tu applique leur style à "h2" (au lieu de de "h2 div.puce"), ça devrait fonctionner et être valide.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

[calimo]

Effectivement, un simple <h2 class="puce"> va très bien. Pas besoin de multiplier les div inutilement. Le sélecteur peut alors être .puce tout simplement. Cela t'évitera des répétitions inutiles de

Code : Tout sélectionner

	background: url("http://www.hbcchabeuil.fr/image/puce_1.png") left center no-repeat;
	padding-left: +30px ;

[Asumbaa]

Salut,

Pour compléter, si tu ne souhaites pas des puces sur tous tes h2, ben tu fais des h2 class="puce", tout simplement
La balise div n'est pas l'unique vecteur de CSS ! On peut (et on doit, plutôt que de rajouter des div inutiles) styler toutes les balises.


Edit : arf, Calimo plus rapide :p


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[zavko]

Eh bien merci pour toutes ces réponses.

Ca rejoint un peu l'idée, que je m'étais fait de la correction à envisager

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

P.S. : La solution était donc toute simple, dans le CSS, j'ai créé un style
.puce {
background: url("http://www.hbcchabeuil.fr/image/puce_1.png") left top no-repeat;
padding-left: +30px ;
margin-left: +20px ;
}

Et dans ma page, j'ai simplement utilisé la balise : <h2 class="puce">