28173 sujets

CSS et mise en forme, CSS3

[Résolu] Bug d'affichage sous IE : z-index et menu déroulant

Bonjour,

Je rencontre sensiblement le problème évoqué ici mais n'y trouve pas de solution, même en essayant celles proposées.

J'ai un en-tête, dont le z-index est de 0, qui contient le menu déroulant vertical auquel a été assigné un z-index de 100. Le soucis étant que même en spécifiant un z-index de 0 au corps de la page qui se trouve en dessous, le menu s'affiche en partie dans l'en-tête (normal) mais ensuite glisse sous le corps de la page (oiiiiin).

Voici le code CSS :
/**
 * ----------------------------------------- Menu -----------------------------------------
 */
dl, dt, dd, ul, li { /* Initialisation des paramètres */
    margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
    width: 750px; /* Précision pour IE */
    position: relative;
	z-index: 100;
}

#menu dl {
    margin-top: 50px; /* Alignement en bas */
	margin-right: 10px;
    float: right; /* Alignement à droite */
    width: 6em;
}

#menu dt {
    cursor: pointer;
	text-align: center;
    font-family: Verdana, serif;
    color: #F7EFCD;
	font-size: 0.8em;
	font-weight: bold;
	border: 0px solid #6699CC;
	margin: 0px;
}

#menu dd {
    position: absolute;
	margin-top: 2px;
	width: 6em;
	display: none;
	border: 1px solid #F7EFCD;
}

#menu li {
    text-align: center;
    font-family: Verdana, serif;
	font-size: 0.8em;
    background: #8E6F43;
    color: #F7EFCD;
}

#menu li a {
    color: #F7EFCD;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

#menu li a:hover {
    background: #8E6F43;
    color: #EEAB7B;
    z-index:100;
}

#menu dt a {
    color: #F7EFCD;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

#menu dt a:hover {
    background: #8E6F43;
    color: #EEAB7B;
}


Et voici le code XHTML :
<div id='head'>

<div id="menu">

	<dl>
		<dt onmouseover="javascript:montre('smenu1');">Contacts</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Forum</a></li>
					<li><a href="#">Coaches</a></li>
					<li><a href="#">Liens</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Ligues</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Calendrier</a></li>
					<li><a href="#">Résultats</a></li>
					<li><a href="#">Classement</a></li>
					<li><a href="#">Statistiques</a></li>
				</ul>

			</dd>
	</dl>

	<dl>			
		<dt onmouseover="javascript:montre();"><a href="#"><b>Tournois</b></a></dt>
	</dl>

	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Infos</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="news.php">News</a></li>
					<li><a href="rules.php">Règles</a></li>
				</ul>

			</dd>
	</dl>

	<dl>			
		<dt onmouseover="javascript:montre();"><a href="accueil.php"><b>Accueil</b></a></dt>
	</dl>


</div>

</div> <!-- Fin du head -->

<div id='corps'>

...


Si vous avez une astuve, un crack, bref, n'importe quoi pour que cela fonctionne je suis preneur.

Merci par avance.
Modifié par Jedi (06 Apr 2006 - 18:41)
Qu'est-ce que tu entends par ensuite glisse sous le corps ? tu veux dire qu'il repousse le contenu ? et dans FF et dans IE?
Non, il ne repousse rien (vu qu'il est en absolute).

En fait il ne s'affiche pas à l'écran, ou plutôt s'affiche en partie. Le menu déroulant étant à cheval sur l'entête et le corps, la partie déroulante s'affiche normalement dans l'entête, mais pas dans le corps. Eventuellement, si je ne suis pas suffisamment clair, je peux faire un screen-shot.

Mais mis à part cela, il ne modifie en rien la mise en page (à part que dans la mise en page il devrait appraitre ^^)
Sujet clos
Aller à