Sur cette page (http://www.eleonorepoussot.com/spip/spip.php?article11) d’un site en reconstruction, je souhaite qu’une description du haut ou du bas du vêtement s’affiche lorsque la souris passe sur le haut ou sur le bas du vêtement.
J’ai donc une div « hidden » au-dessus de la partie haute de la photo et une div « hidden » au-dessus de la parte basse, chacune devant réagir au survol de la souris pour afficher une description avec le JavaScript (MM_showHideLayers //v9.0//).
Évidement cela fonctionne parfaitement avec FF, Safari, Chrome.
Mais sous IE quel que soit le z-index que j’attribue à chacune de ces deux div elles restent sous la photo et donc ne réagissent pas.
Une recherche sur divers sites d’aide CSS ne m’a pas permise de trouver une solution, aussi d’avance merci de vos suggestions.
La clef du problème se situe probablement la ou Camille l'a situé: dans le positionnement des blocs.
J'ajouterais à cela une petite remarque: attention au positionnement des deux divs supportant le javascript !
Actuellement, elles sont positionnées ainsi : #lien-haut (ligne 138)
{
position: absolute;
top: 179px;
width: 700px;
height: 209px;
left: 210px;
z-index: 100;
}
La mauvaise blague c'est que c'est relatif au bord de la page, donc sur une autre résolution que celle que tu utilises, ce sera cata ( c'est le cas chez moi).
Pour bien faire, il te faudra un conteneur ( une div par exemple ) contenant à la fois ton image et tes deux div en hover.
Tu pourras ainsi te positionner par rapport à cet élément parent commun et avoir la paix avec IE6.
Si tu veux des exemples plus précis, je te recommande de décortiquer la manière dont marchent les menus déroulants sur les sites qui sont à base de CSS et de z-index en particulier. Tu peux par exemple mettre en évidence les éléments en positionnement absolu, relatif etc avec l'extension webdevelopper sous firefox.