Problème de décallage lors du déroulement de mon Menu.

Bonjour à tous.

Voilà j'ai un soucis. Lorque je désire dérouler mon menu, le "sous-menu" décale le block Flottant de gauche. Je m'explique par ce screen:


AVANT


APRES


Je n'arrive pas à comprendre à quoi cela est due. J'ai essayer d'utiliser la Balise "z-index", mais cela n'y change rien.

Voici le code CSS du Menu déroulant:

#menu  /*Cadre contenant le menu*/{
	margin-bottom: 20px;
	height: 21px;
	width: 901px; 
}

dl, dt, dd, ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}

#menu dl {
 float: left;
 width: auto;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
margin:0px;
}

#menu dd /*Sous-Menu*/{ 
display: block;
}

#menu li {
text-align: center;
background: none;
}

#menu img
{
border: none;
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border:none;
}

LE "Block" de gauche qui se décale est simplement défini comme cela:

#left{
float: left;
width: 130px;
}


Un grand merci de votre aide, j'espère ne pas etre trop confu. A tres bientot!
Modifié par Matumbo (10 Sep 2008 - 19:40)

Bonsoir Matumbo,

Tu as dû survoler ce passage :

a écrit :

Le tutoriel a écrit :

Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page. En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.

Cela devrait t'aider à solutionner ton petit soucis.

D'autre part, et pour rappel :

a écrit :

Le tutoriel a également écrit :

Préambule : ce tutoriel est estampillé "délicat"; Il ne doit pas être considéré comme une référence en la matière car il comporte certains problèmes intrinsèques.

Pour résumer, le menu réalisé à l'aide de ce tutoriel vieillissant ne sera pas exempt de défauts, ni forcément accessible à tous.

Malgré ces problèmes, la raison d'être de ce tutoriel est de pallier à des techniques encore plus problématiques proposées un peu partout sur le Web et qui ne tiennent aucun compte de l'accessibilité ou de l'ergonomie du resultat.

Sachez que ce tutoriel, très demandé, est actuellement en complète refonte. Nous vous conseillons de patienter un peu avant de vous jeter sur les menus déroulants actuellement proposés... Ou d'opter pour le Menu en Accordéon avec JQuery.

Tu peux également te tourner vers les liens cités en référence dans le tutoriel

Cdt,
Sylvain

Merci pour ta réponse, je suis en train de regarder le menu proposé, ça à l'air intéressant

Mais par rapport au "z-index", faut-il que je définissent 2 'espaces' (site et menu) en créant deux div globales? Car j'ai essayé de créer une div englobant la totalité des blocks situés en dessous du menu, et de changer la valeur du z-index, mais sans résultat.

Merci beaucoup de ton aide.
PS: L'affichage est correct sous IE7 et non sous MFF
Modifié par Matumbo (10 Sep 2008 - 22:11)