[Résolu] Menu déroulant décalé à droite / au menu horizontal

Bonjour,

Je ne comprends pas pourquoi mon menu déroulant est décalé à droite par rapport au menu horizontal sous Firefox et sous IE cela decale carrement tout l'ensemble.
Vous pouvez visionner l'effet sur cette page.

Voici mon code css :

/* CSS Document */

body {
margin: 0px;
padding: 0px;
background-color: #e3effb;
color: black;
font: 80% verdana, arial, sans-serif;
}

#header {
height: 100px;
background: #97C05F url(banniere.jpg) top left no-repeat;
}

#header img {
float: right;
margin: 5px 5px 0 0;
}


#header h1 {
text-indent: -5000px;
margin: 0;
line-height: 0;
}

#header p {
margin: 55px 0 0 290px;
font-weight: bold;
color: white;
font-size: 1.1em;
}

#menuhaut {
margin-top: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding: 0.1em 0.5em 0.1em 0;
list-style-type: none;
background-color: #010c6e;
color: white;
text-align: right;
}

#menuhaut li {
display: inline;
}

#menuhaut a {
color: white;
text-decoration: none;
}

#menuhaut a:hover {
text-decoration: none;
color: #00CC00
}

/* Menus deroulants */

dl, dt, dd, ul, li {
margin-top: 0px;
padding: 0px;
list-style-type: none;
}
#menu {
position: absolute;  /*placement du menu, à modifier selon vos besoins */
top: 123px;
z-index:10;
margin-left: auto;
margin-right: auto;
width: 800px; /* largeur obligatoire pour être centré */
}

#menu dl {
float: left;
width: 20%;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #849da1;
border: 1px solid gray;
margin: 0;

}
#menu dd {
display: none;
border: none;
}

#menu li {
list-style-type: none;
text-align: center;
background: #9aa53e;
margin-left: auto;
margin-right: auto;
width: 158px;
border: 0;
}

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

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}

#site {
position: absolute;
margin-right: auto;
margin-left: auto;
padding: 5px;
width: 800px;
top: 3px;
left: 3px;
z-index: 1;
color: #000;
background-color: red;
border: 0; 
}

Dans l'attente d'une explication, je vous remercie.
Modifié par manu73 (23 Aug 2005 - 14:46)

Bonjour,

Il faudrai reprendre une a une les modifications que tu as fait depuis la derniere fois.

Là, si j'ai bien vu, tu a ajouter un "width:158px" ici :

#menu li {
list-style-type: none;
text-align: center;
background: #9aa53e;
left: 5px;
margin-left: auto;
margin-right: auto;
[b]width:158px[/b]
border: 0;
}

En le supprimant tu reviens a la mise en page d'hier.

Par défaut, les listes ont une marge a gauche. Si tu veux que ton sous menu soit exactement sous ton menu, regarde de ce coté la.

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #849da1;
border: 1px solid gray;
margin: 0;   
}

#menu dd {
display: none;
border: none;
[b]margin: 0px;[/b]
}

Je pense que vous devez indiquer au menu "dd" la taille des marges ..comme sur le menu "dt"...
si ca ne marche pas vous pouvez aller ICI, c'est un site que j'ai fait avec le meme menu ..donc regarder peut etre le code source


N.B. Dans votre code source css;
Pourquoi mettez vous dans le header h1 le text-indent sur - 5000px ?


++ bien a vous

Bonjour,

Je tiens à vous remercier car vous m'avez trouvez la solution - ou 75%.

En effet, j'ai enlevé mon width : 158px ( 800-(5+5) / 5 = 158 )
J'ai mis 0px sur les dd et dt. Voici le nouveau code css du menu déroulant :

/* Menus deroulants */

dl, dt, dd, ul, li {
margin-top: 0px;
padding: 0px;
list-style-type: none;
}
#menu {
position: absolute;  /*placement du menu, à modifier selon vos besoins */
top: 123px;
z-index:10;
margin-left: auto;
margin-right: auto;
width: 800px; /* largeur obligatoire pour être centré */
}

#menu dl {
float: left;
width: 20%;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #849da1;
border: 1px solid gray;
margin: 0px;

}
#menu dd {
display: none;
border: none;
margin: 0px;
}

#menu li {
list-style-type: none;
text-align: center;
background: #9aa53e;
margin-left: 0px;
margin-right: 0px;
border: 0;
}

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

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}

Donc dans Firefox, c'est parfait, mais dans IE, mon menu déroulant possède une marge sur la gauche. Vous pouvez voir le résultat ici

nb : j'ai mis le h1 à -5000px pour ne pas qu'il soit vu des navigateurs graphiques mais il sera vu des navigateurs texte, brail pour l'accessibilité. J'ai suivi le livre CSS2 de Raphaël G.

Enleve le "-top" ici :

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

Du fait que tu precises tes marges de cette facon, logiquement tu n'est pas obliger de les indiquer dans tes "#menu dt", "#menu dd", .....

Merci beaucoup à tous les participants

Ca fonctionne à merveille et ta remarque m'a fait encore fait comprendre le fonctionnement du CSS.
...et j'ai enlevé le margin: 0px dans les dd & dt

Maintenant je vais passer aux corps du site, au footer...

Bien à toi.
Modifié par manu73 (23 Aug 2005 - 14:45)