[Résolu] Sens dessus-dessous

Bonjour à tous,

J'ai un soucis d'affichage avec un menu déroulant en css3. Quand je déplie un sous-menu celui-ci se glisse sous les autres éléments de ma page (voir image). Je voudrais savoir comment le faire passer au-dessus. J'ai essayé avec z-index mais rien n'y fait.

http://i68.photobucket.com/albums/i7/Anatal/ScreenShot005.jpg

Voici mon code HTML (rien de particulier de ce coté):

    <div id="entete"><!-- navigation horizontal -->
        <ul id="menuH">
            <li>
                <a href="{LIEN_ACCUEIL}">Accueil</a>
            </li>
            <li>
                <a href="{LIEN_ANNUAIRE}">Annuaire</a>
            </li>
            <li>
                <a href="#">Outils</a>
                <ul>
                    <li><a href="{LIEN_ASA}" target="_blank">ASA</a></li>
                    <li><a href="{LIEN_IREEF}" target="_blank">iReef</a></li>
                    <li><a href="{LIEN_WEBMAIL}" target="_blank" style="z-index:3;">Webmail</a></li>                    
                </ul>
            </li>
        </ul><!-- #menuH -->
    </div><!-- #entete -->

Et voici les éléments CSS qui se rapportent à mon menu déroulant:

/* entete */
#entete {
	max-width: 1275px;
	min-width: 860px;	
	background-color: #4B4B4B;
    list-style: none; 
    text-align:center;
	height:50px;
	margin-left:auto;
	margin-right:auto;
}
/* Menu déroulant Horizontal */
#menuH, #menuH ul {
    line-height: 50px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align:center;
}
#menuH {
        font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	display:block;
	width:490px;
        list-style: none; 
        text-align:center;
	height:50px;
	vertical-align:top;
	background-color:#4B4B4B;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}
#menuH a {
    background: none repeat scroll 0 0 #4B4B4B;
    color:#FFFFFF;
    display: block;
    padding: 0;
    text-decoration: none;
    width: 160px;
    overflow:hidden;	
}
#menuH li {
    border-right: 1px solid #FFFFFF;
    float: left;
    display: inline;
    overflow:hidden;
    text-align:center;
    display:block;
}
html > body #menuH li {
    border-right: 1px solid transparent;
}
#menuH li ul {
    left: -999em;
    position: absolute;
    width: 160px;
    overflow:hidden;
}
#menuH li ul li {
    border-top: 1px solid #FFFFFF;
    overflow:hidden;
    display:block;
}
html > body #menuH li ul li {
    border-top: 1px solid transparent;
}
#menuH li ul ul {
    border-left: 1px solid #FFFFFF;
    margin: -22px 0 0 160px;
    overflow:hidden;
}
html > body #menuH li ul ul {
    border-left: 1px solid transparent;
}
#menuH a:hover, #menuH li ul a:hover {
    background: none repeat scroll 0 0 #393939;
    color: #FFFFFF;
    text-decoration:none;
    overflow:hidden;
}
#menuH li:hover ul ul, #menuH li.sfhover ul ul {
    left: -999em;
    overflow:hidden;
}
#menuH li:hover ul, #menuH li li:hover ul, #menuH li.sfhover ul, #menuH li li.sfhover ul {
    left: auto;
    min-height: 0;
    overflow:hidden;
}

J'ai essayé sur toutes mes pages, dès qu'un élément HTML se trouve en-dessous du sous-menu il s'affiche automatiquement au-dessus , et ce, peu importe sa nature (un INPUT, un IMG, etc..).

Si vous voyez quelque chose de déconnant dans mon code faites le moi savoir.

THX

Bonjour,


ajouter un " position : relative; z-index : 5; " à ton #menuH ne fonctionne pas ?

Tu dis avoir essayé le z-index, mais tu ne dis pas avoir positionné ton élément. z-index ne fonctionne que si l'élément est positionné.

PS : Où est le css3 ?
Modifié par n3k0 (09 Jun 2011 - 10:41)

Ah mince je ne savais pas qu'il fallait positionner l'élément pour appliquer un z-index! Le problème est que dès que je positionne #menuH, mes sous-menu ne se déroulent plus. Si j'applique "position : relative; z-index : 5;" à mon élément #menuH li ul li (celui des sous-élément) il ne se passe rien.

(j'ai en effet viré tout ce qui est en CSS3)

En effet, ton élément ne passera pas au dessus parce que la plupart des navigateurs regardent la position des ancêtres.

en gros :

<div id="header" >
  <div id="truite" style="position:relative; z-index : 99"></div>
</div>
<div id="body" style="position:relative; z-index : 2">
  <div id="saumon"></div>
</div>
<div id="footer"></div>

#saumon sera normalement toujours au dessus de #truite, même si truite a un z-index de 99, #body a été déclaré comme " au dessus " de #header, et ses enfants doivent normalement suivre cela, les enfants de #body seront au dessus de #header et de ses enfants.
Ces derniers temps, j'ai cru remarquer que certains navigateurs n'appliquent pas totalement cette règle ( IE 7 ou 8 peut-être ). Mais c'est comme ça qu'il faut le voir.

Pour ce qui est de ton menu, c'est vrai que le plug-in superfish (je ne l'aime pas ) n'est pas super maléable.

Essaye sur #entete, ça devrait le faire tout aussi bien .

Erf... il va falloir que modifie sacrément mon code pour faire apparaitre mon entête après mon corps de page dans mon code (pour la question d'héritage) mais qu'elle s'affiche avant!

C'est ça ou changer tout mon entête et le système de menu.

(au fait... je n'utilise pas le plug-in superfish ni aucun module Jquery)

Euh... je ne te disais pas de mettre ton entete après, juste d'appliquer le " position:relative; z-index:5; " sur ton #entete

Pour ce qui est de superfish, désolé, c'est la classe sfhover qui m'a induit en erreur...

Et voilà problème réglé!

J'ai essayé ce que tu me disais mais cela n'a pas été concluant. Par contre j'ai enfermé tout mon entête dans une div #blocTop avec les caractéristiques suivantes:

#blocTop {
	position:relative;
	top:0;
	left:0;
	width:100%;
	display:block;
	z-index:10;
}

Et maintenant ça fonctionne parfaitement. Merci à toi, si tu ne m'avais pas dit de positionner je n'aurais jamais trouvé.

Cordialement.
Modifié par LordBatoon (09 Jun 2011 - 12:43)