[resolu] Probleme de z-index apparemment simple

Bonjour Alsacreations,

mon probleme se situe sur cette page.
http://www.lemondeestanous.ch/nos-photos

Quand on passe sur un bouton un sousmenu apparait. Le rollover est fait avec jquery.

Ce que je ne comprend pas :
Pourquoi le sousmenu vert ne passe par au dessus des boutons bleu (en les cachant comme ca devrait).

J'ai bien mis des z-index qui me semblent corrects. Et bien mis des position relatives ou absolutes aux elements concernes.

Chaque li.parent correspond a un bouton.

ul.menu_nos_photos li.parent{
position:relative;
display:block;
float:left;
margin-bottom:7px;
margin-right:-15px;
margin-left:-15px;
height:152px;
width:183px;
text-align:center;
background: url(../les_images/photos/bt_menu_photos.png) no-repeat top;
z-index:1;
}

A l'interieur de ces li.parent se trouve un ul. C'est ce ul en position absolute qui forme mon sous menu vert.

ul.menu_nos_photos ul{
position:absolute;
padding-top:20px;
height:152px;
top:23px;
left:0;
width:183px;
background: url(../les_images/photos/fond_sousmenu_photos.png) no-repeat top;
z-index:2;}

Le code html pour clarifier ca (je met qu'un extrait puisque pour chaque bouton c'est la meme chose):

<li class="parent item374">
    	<span class="separator">
        	<span>photos inde</span>
        </span>        
        <ul>
        	<li class="item375">
            	<span class="separator">
                	<span>Delhi</span>
                </span>
             </li>
             <li class="item376">
             	<span class="separator">
                	<span>Ladakh</span>
            	</span>
             </li>
        </ul>
     </li>
     
     
       <li class="parent item378">
    	<span class="separator">
        	<span>photos Nepal</span>
        </span>        
        <ul>
        	<li class="item379">
            	<span class="separator">
                	<span>Katmandou</span>
                </span>
             </li>
             <li class="item380">
             	<span class="separator">
                	<span>Pokhara</span>
            	</span>
             </li>
        </ul>
     </li>

Je precise que ce que ce code html est dynamiquement genere par le CMS Joomla. Il faut que je m'adapte a lui ou je peux le modifier moderemment en Jquery.

Detail bizarre :
Le ul (le sousmenu vert) passe au dessus de li.parent mais uniquement quand il s'agit de son li.parent a lui, son parent a lui.
Cependant il ne passe pas au dessus des li.parent appartenant a d'autre bouton.

Je suis sur que le probleme est simple je dois faire un blocage
Merci encore pour votre aide,
Modifié par boucdur00000 (09 Mar 2010 - 19:42)

Dans ta css tu as :

ul.menu_nos_photos li{
position: relative;
z-index: 1;
}

De ce fait, il me semble, les li des ul qui doivent passer au-dessus se retrouvent avec un z-index 1 malgré le z-index 2 des ul.

Teste en supprimant (ou en la mettant en commentaire) la portion css précédemment citée.

bonjour et merci.

Mais ce n'est pas ca.
Je viens de tester ca a tout hasard et pas de changement.

En css le ul est l'enfant il n'herite donc pas du z-index de son parent li.parent sauf ci celui-ci n'est pas specifie.
hors dans ce css le z-index du ul est specifie a 2.
Normalement les li de ce ul herite du z-index a 2 je crois.
Modifié par boucdur00000 (09 Mar 2010 - 17:37)

boucdur00000 a écrit :


En css le ul est l'enfant il n'herite donc pas du z-index de son parent li.parent sauf ci celui-ci n'est pas specifie.
hors dans ce css le z-index du ul est specifie a 2.
Normalement les li de ce ul herite du z-index a 2 je crois.

Logiquement il hérite du z-index de 2 du ul mais si tu mets un z-index à 1 ensuite aux li là j'ai un doute.

Sinon essaie de mettre un z-index uniquement sur le ul en positionnement absolu; soit enlève (ou mets les en commentaires) ceux sur les positions relatives. Je ne garantis pas le résultat mais je ne vois pas trop pour l'instant.

J ai bien tente ce que tu a dis mais c'est sans effet.
Ce truc bizarre ici est surement la clef du probleme

a écrit :
Detail bizarre :
Le ul (le sousmenu vert) passe au dessus de li.parent mais uniquement quand il s'agit de son li.parent a lui, son parent a lui.
Cependant il ne passe pas au dessus des li.parent appartenant a d'autre bouton.

Modifié par boucdur00000 (09 Mar 2010 - 18:56)

boucdur00000 a écrit :
J ai bien tente ce que tu a dis mais c'est sans effet.
Ce truc bizarre ici est surement la clef du probleme

Detail bizarre :
Le ul (le sousmenu vert) passe au dessus de li.parent mais uniquement quand il s'agit de son li.parent a lui, son parent a lui.
Cependant il ne passe pas au dessus des li.parent appartenant a d'autre bouton.

Supprime :

ul.menu_nos_photos li{
position:relative;
z-index:1;}

J'ai testé via firebug sous firefox et ça fonctionnait.

J'ai changé ça dans ta CSS (un peu à l'intuition vite fait sous Firebug) :

ul.menu_nos_photos ul{
position:absolute;
display:block;
padding-top:20px;
height:152px;
top:23px;
left:0;
width:183px;
background: url(../les_images/photos/fond_sousmenu_photos.png) no-repeat top;
z-index:22;
border:1px solid red;}


ul.menu_nos_photos li{
position:relative;
/*z-index:21;*/}

J'ai eu l'impression que ça allait mieux. Tu confirmes ?

Evidemment ca marche.
Je ne sais meme pas pourquoi j'avais ecris cette ligne.
J'avais mal lu ta premiere reponse lefou.
Du coup je ne parlais pas du meme li que toi et forcement je ne comprenais pas.
C'etait evident, sous mon nez mais comme j'ecris mon css dans l'editeur pas terrible de joomla j'ai meme pas vu cette ligne.

Merci beaucoup, c'est resolu.
Modifié par boucdur00000 (09 Mar 2010 - 19:41)