Forum d'entraide PHPFrance

Bonjour,

ya un truc que je pige pas là, je code un menu avec les balises div et j'aimerai que quand la souris passe sur le div, le a soit détecté et que le background change, voici mon code:

Je précise que sous firefox, le code fonctionne comme je le souhaite mais pas sous IE

<div id="menu_vertical">
<a href="page1.php">
	<div class="aul"><span>Description du lien de la page 1</span></div>
</a>
<a href="page2.php">
	<div class="aul"><span>Description du lien de la page 2</span></div>
</a>
</div>

et mon CSS:

#menu_vertical .aul { text-align: left; margin: -1px 2px 0px 2px; padding: 5px; text-decoration: none; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; }
#menu_vertical .aul span { color:#004e68; padding-left:30px; }
#menu_vertical .aul:hover, #menu_vertical .aul:hover span{ background:#235566; color:white; font-weight:bold;}

et le CSS IE (c'est lui qui ne rempli pas la deuxième div avec la couleur background, fonctionne très bien sur la 1er mais pas la deuxième et les suivantes):

#menu_vertical .aul { text-align: left; margin: -1px 2px 0px 2px; padding: 5px; text-decoration: none; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; }
#menu_vertical .aul span { color:#004e68; padding-left:30px; }
#menu_vertical .aul:hover, #menu_vertical .aul:hover span{ background:#235566; color:white; font-weight:bold;}

internet explorer exemple 2

J'aimerai bien que ce soit comme sur l'exemple 1 et 2 de Firefox en fait mais IE ne l’interprète pas

Bonjour,
tu places un élément de type "block"(div) dans un élément "inline" (a).
Sous IE, la propriété du type de block du parent (a) semble écraser celle de l'enfant, d'ou ton problème.

D'autre part, avec les CSS, ton div et ton span sont totalement inutiles.
Met display: block sur ton "a", utilises le padding et tu pourras obtenir le même rendu.

La solution d'attribuer le display block à "a" fonctionne mais c'est le même résultat que j'ai sous IE, voici mon nouveau CSS:

#menu_vertical a.aul { display:block; text-align: left; margin: -1px 2px 0px 2px; padding: 5px 5px 5px 30px; text-decoration: none; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; }
#menu_vertical a.aul:hover { background:#235566; color:white; font-weight:bold;}

et mon HTML:

<a href="page1.php" class="aul">Description du lien de la page 1</a>
<a href="page2.php" class="aul">Description du lien de la page 2</a>
<a href="page3.php" class="aul">Description du lien de la page 3</a>
<a href="page4.php" class="aul">Description du lien de la page 4</a>
<a href="page5.php" class="aul">Description du lien de la page 5</a>
<a href="page6.php" class="aul">Description du lien de la page 6</a>

Le rendu est toujouts celui de l'image ie2.png (en pièce jointe)

Pour moi la CSS est bonne la, ça devrait fonctionner même sous IE. Peut être un background-color au lieu du background mais je serais quand même étonné que ça change quoi que ce soit. On est en 2012 quand même (IE9 ?). ^^

IE8

background-color ne change rien

Salut, faut pas trop s'étonner d'avoir des résultats incohérents sur du balisage non standard

ton garde-fou est ici : http://validator.w3.org/

Ouai mais il y a un bug et il y a certainement moyen d'y remédier

Je travail en local pour le moment, je ne peut pas voir avec http://validator.w3.org/ (la flemme de mettre un code sur un de mes sites)

Solutionné!

Fonctionne avec inline-block au lieu de block seulement:

#menu_vertical a.aul { display: inline-block; width:730px;...