Menu déroulant => décalage sous IE (7)

22 févr. 2008, 17:19

Bonjour,

j'ai un menu dont un des éléments fait apparaitre un menu déroulant lorsque la souris est dessus...
le probleme est que, sous IE7 (pas sous FF) lorsque le menu apparait (il passe de display:none à block) le div "content" se décale...
Si je met content en position:fixed alors je n'ai plus le décalage mais je ne peux pas mettre mon footer en dessous...

Merci d'avance,

Code CSS :

Code : Tout sélectionner

#content 
{
	margin-top:20px;
	background-color:#222222;
	width:580px;
	height:330px;
	position:relative;
	z-index:0;
}
#menu_deroulant
{
	width:150px;
	border:2px #00FF00 solid;
	background-color:#FFFFCC;
	z-index:1;
     position:absolute;
}

Code HTML :

Code : Tout sélectionner

<div id="menu" class="menu">
<a href="#" id="item" onmouseover="show(this);">Item</a>
</div>

<div id="menu_deroulant" style="display:none;" onmouseout="this.style.display='none';">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td>Sous item1</td></tr>
<tr><td>Sous item 2</td></tr>
</table>
</div>

<div id="content">
</div>
<div id="footer">
&copy; XXXX
</div><!-- Fin de FOOTER-->

La fonction javascript calcule les coordonnées et fait un style.display='block'; et fonctionne bien.

Merci d'avance

22 févr. 2008, 17:28

Salut,

c'est normal,

entre

Code : Tout sélectionner

<div id="menu" class="menu">
....
</div>

et

Code : Tout sélectionner

<div id="content">
</div>

il y a un à l'initial un espace vide car le cadre menu_deroulant a un display à none.
Quand le display passe à block, l'espace est rempli avec le menu déroulant donc ce qui suit est décalé.

Tu peux utiliser l'attribut visibility au lieu de display :

Code : Tout sélectionner

<div id="menu_deroulant" style="visibility:hidden;" onmouseout="this.style.visibility='hidden';">
...
</div>

L'avantage est que la place pour le cadre est réservé, l'espace semble vide mais ne l'est pas, il est juste vraiment littéralement caché et donc plus aucun décalage.

22 févr. 2008, 17:34

Parfait merci !

je pensais que visibility:hidden reserverai l'espace mais en fait non !!!

merci bcp

Menu déroulant => décalage sous IE (7)

Qui est en ligne