[RESOLU] Z-index et IE... encore un sujet !

Bonjour,

J'ai déjà lu des post à ce sujet, et je m'excuse d'avance d'en reposter un à ce sujet.

Voici le problème sous IE7 (et certainement IE antérieurs) - Pas de pb avec Firefox :
Le menu s'affiche sous le contenu suivant, au lieu de s'afficher en-dessous !

Voici le code html :

<div id="menu">
<ul id="menu">
    <li><a href="#menu1"><img src="IMG/jpeg/menu/menu_rsm124.jpg" alt="Ressources en santé mentale" border="0" /></a>
        <ul>
            <li><a href="basedoc.php3" target="_blank"> 1.1 Base SantéPsy</a></li>
            <li><a href="spip.php?article893"> 1.2 Veille en psychiatrie</a>                
            </li>      
            
        </ul>
    </li>
</ul>
</div>

<div id="conteneur"> .....</div>

Voici la css :

#menu{
    position:absolute;
    z-index:100;
    display:block;
    margin:0;
    padding:0;
    width:60em;
	   }

.menu ul{
    position:absolute;
    display:block;
    width:12em;
    margin: 0;
    padding:0;
    border:0;
    z-index:100;
   }
    
.menu li ul{
    visibility:hidden;
    }

.menu li li ul{ /* element 1.1.1 */ 
    position:absolute;
    z-index:100;
    margin-left:124px;
    margin-top:-23px;
    border:2px solid blue;
    background-color:yellow;
    }
    
.menu li{
    list-style:none;
    z-index:200;
    width:124px;
    height:auto;
    display:inline;
    display:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    background-color:black;
	    }

#conteneur { 
     position: relative; 
     float:left; 
     width: 67%; 
     margin-top: 5em; 
     overflow: hidden; 
      z-index:1;
}

Il me semble que les z-index sont bien renseignés... mais je débute en css, alors je ne saisi pas toutes les subtilités.

Merci de ton aide.
Modifié par Florent V. (10 Jul 2009 - 20:09)

Salut,

Essaie d'enlever le overflow:hidden.

Salut,

Essaie surtout de régler ça :

<div id="menu">
<ul id="menu">

Au passage, j'ai remarqué quelques éléments :

.menu li{
display:inline;
display:block;}

Erh... display : inline... ou block ?!
En l'occurence, ton display : inline, ne sert absolument à rien, c'est l'un ou l'autre.
Si tu voulais faire un mix des deux, cela existe en "display:inline-block".

De plus, je ne vois aucune classe "menu" dans ton code HTML...

#menu{
display:block;
}

Comme le dit Marcv, ton id="menu" cible deux éléments, un id doit être unique dans la page.
De plus, que ce soit le <div> ou le <ul> qui détient l'id #menu, ces éléments sont par défaut en display:block, pourquoi le respécifier ?
Modifié par Nigel (08 Jul 2009 - 19:13)

Bonjour

Merci pour vos remarques. J'ai corrigé selon, mais le problème persiste. Je travaille en local, mais si c'est plus simple, je peux mettre la page en ligne le temps du test.

Code CSS :

/* Code du conteneur du dessous*/ 
#conteneur { position: relative; float:left; width: 67%; margin-top: 5em; border:2px solid green; background:lightblue; z-index:1;}



/* CSS du menu horizontal */

.menu{
    position:absolute;
    z-index:100;
    display:block;
    margin:0;
    padding:0;
    width:60em;
	   }

.menu ul{
    position:absolute;
    width:12em;
    margin: 0;
    padding:0;
    border:0;
	 }
    
.menu li ul{
    visibility:hidden;
    }

.menu li li ul{ /* element 1.1.1 */ 
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
    border:2px solid blue;
    background-color:yellow;
    }
    
.menu li{
    list-style:none;
    width:124px;
    height:auto;   
    float:left;
    margin:0;
    padding:0;
    background-color:black;
	    }
    
.menu li li{
    display:block;
    float:none;
    }
    
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }

.menu a{
    text-decoration:none;
    padding:2px 0;
    margin:1px;
    }
    
.menu a:hover{
    background-color: #eee;
       }
    
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}

a.linkOver{
    background-color: #eee;
    }

Le code HTML :

<ul id="menu">
    <li><a href="#menu1"><img src="IMG/jpeg/menu/menu_rsm124.jpg" alt="Ressources en santé mentale" border="0" /></a>
        <ul>
            <li><a href="basedoc.php3" target="_blank"> 1.1 Base SantéPsy</a></li>
            <li><a href="spip.php?article893"> 1.2 Veille en psychiatrie</a>

                <ul>
                    <li><a href="#">1.2.1 élément 1</a></li>
                    <li><a href="#">1.2.3 élément 2</a></li>
                    <li><a href="#">1.2.4 élément 3</a>
                        <ul>
                            <li><a href="#">1.2.4.1 élément 1</a></li>
                            <li><a href="#">élément 2</a></li>

                            <li><a href="#">élément 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 3</a>

                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a></li>
                </ul>
            </li>
        </ul>

    </li>
    <li><a href="#menu2" ><img src="IMG/jpeg/menu/menu_archives_hosp124.jpg" alt="Archives hospitalières" border="0" /></a>	
        <ul>
            <li><a href="#">élément 2.1</a></li>
            <li><a href="#">élément 2.2</a></li>
            <li><a href="#">élément 2.3</a></li>
        </ul>

    </li>
    <li><a href="#menu3" ><img src="IMG/jpeg/menu/menu_fmc124.jpg" alt="FMC - EPP" border="0" /></a>	
        <ul>
            <li><a href="#">élément 3.1</a></li>
            <li><a href="#">élément 3.2</a></li>
            <li><a href="#">élément 3.3</a></li>
        </ul>
    </li>
	
	<li><a href="#menu4" ><img src="IMG/jpeg/menu/menu_formations124.jpg" alt="Formations Ascodocpsy" border="0" /></a>	
        <ul>
            <li><a href="#">élément 4.1</a></li>
            <li><a href="#">élément 4.2</a></li>
            <li><a href="#">élément 4.3</a></li>
        </ul>
    </li>
	
	<li><a href="#menu5" ><img src="IMG/jpeg/menu/menu_gip124.jpg" alt="Qui sommes-nous ?" border="0" /></a>	
        <ul>
            <li><a href="#">élément 5.1</a></li>
            <li><a href="#">élément 5.2</a></li>
            <li><a href="#">élément 5.3</a></li>
        </ul>
    </li>
	
	<li><a href="#menu6" ><img src="IMG/jpeg/menu/menu_pro124.jpg" alt="Accès adhérent" border="0" /></a>	
        <ul>
            <li><a href="#">élément 6.1</a></li>
            <li><a href="#">élément 6.2</a></li>
            <li><a href="#">élément 6.3</a></li>
        </ul>
    </li>
	
</ul>

<script type="text/javascript">
    initMenu();
</script>

Merci de toute aide et bonne journée.

a écrit :
si c'est plus simple, je peux mettre la page en ligne le temps du test

Je pense effectivement que c'est la meilleure solution, car perso je ne vois pas de problème sous IE7 avec le code que tu donnes.

ok. Je pars en vacances 1 semaine. Je m'en occupe en rentrant. Merci !

Bonjour,

Si tu veux cibler l'ID menu, il faut avoir #menu dans la CSS et non .menu (qui cible la CLASSE menu).

Bonjour,
Et merci pour vos messages et votre aide.
le problème a été résolu lorsque j'ai mis le site en ligne. bizarre... !
En tout cas, j'ai pu corriger les erreurs dans mes css grâce à vous : merci !
Modifié par gaelle (22 Jul 2009 - 13:37)