Parfait merci !

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

merci bcp

Salut,

c'est normal,

entre
[code]<div id="menu" class="menu">
....
</div>[/code]
et
[code]<div id="content">
</div> [/code]
il y a un à l'initial un espace vide car le cadre [i]menu_deroulant[/i] a un [i]display[/i] à [b]none[/b].
Quand le [i]display[/i] passe à [b]block[/b], l'espace est rempli avec le menu déroulant donc ce qui suit est décalé.

Tu peux utiliser l'attribut [i]visibility[/i] au lieu de [i]display[/i] :
[code]
<div id="menu_deroulant" style="visibility:hidden;" onmouseout="this.style.visibility='hidden';">
...
</div> [/code]

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.

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]
#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]

Code HTML :

[code]
<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-->
[/code]

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

Merci d'avance