Pb avec menu horizontal en position absolue

Bonjour à tous,
Voilà, comme beaucoup, j'ai voulu utiliser un menu déroulant horizontal pour présenter les rubriques de mon site. Super tuto, j'ai réussi à faire ce que je voulais. J'ai positionné mon menu en "absolue" et entré une valeur "top" et "left" pour le mettre ou je voulais. Mais ... Je me suis rendu compte que en fonction des paramètres de l'ordinateur de l'tilisateur, mon menu se retrouve à l'extérieur du site ! Arf ! en 1024 par 768 pas de pb... Toute autre résolution et c tout décalé ! les positions relatives et inhérit ne sont pas compatible avec firefox. Qqun aurait-il une solution? Voila mon code css (ça doit venir de là !)

<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 75% verdana, arial, sans-serif;
font-size-adjust: inherit;
font-family: arial;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 115;
left: 120;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 15em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
background: #000000;
border: 1px solid orange;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid orange;
}
#menu li {
text-align: center;
border: 1px solid orange;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0px none;
}
#menu li a:hover, #menu li a:focus{
background: #eee;
}
#menu dt a:hover, #menu dt a:focus {
background: white;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
}
-->
</style>

Voilà ! merci bcp !

Bonjour,
Que de nouveaux sur ce forum! ça n'arrête pas!

Ton code commenté (n'oublies pas d'utiliser le bouton code pour insérer du code et d'envoyer avec la css ton code html)
A priori je pense que c'est dû au fait que tu as oublié de spécifier l'unité de positionnement (top et left)

<style type="text/css" media="screen"> 
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 75% verdana, arial, sans-serif;
font-size-adjust: inherit;     /*inherit (hérité) de rien puisque il n'y a rien de définit dans le parent de body c-a-d html*/
font-family: arial; /*arial ou verdana? (plus haut)*/
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 115;  /*erreur fréquente : tu as oublié l'unité (px)*/
left: 120; /*erreur fréquente : tu as oublié l'unité (px)*/
z-index:100;  /*pas utile*/
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 15em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
background: #000000;
border: 1px solid orange;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid orange;
}
#menu li {
text-align: center;
border: 1px solid orange;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0px none;
}
#menu li a:hover, #menu li a:focus{
background: #eee;
} 
#menu dt a:hover, #menu dt a:focus {
background: white;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
}
-->
</style>

Modifié par Hermann (25 May 2006 - 16:49)

ok merci mais as tu une idée pour que je centre mon menu? Les positions top et left, ça marche même ss mettre l'unité. Cependant, si je passe ma résolution d'écran en 2048 par 1024 par ex, ça bouge! le menu sort du site ! tu crois que ça peux venir de quoi?
Merci

Salut,
Ton body est variable(selon l'utilisateur), assigne lui un bloc fixe, qui deviendra lui, invariable.
A partir de ce moment là tu pourras placer des éléments en valeur absolue:


il te manquerait un "div" global (fixe) qui te permettrait de centrer ton site dans ton body (variable)
Tout ton site serait placé entre cette balise.
du genre:

#global {
position:relative;
margin:0 auto ;
width:200px;
heigh:200px;
}
Ton block #global defini en widht et heigh doit-être positionné en relatif, afin que tous les autres éléments de ta page s'alignent sur cette valeur mère, ces éléments auront donc un point fixe sur lequel ils s'aligneront.

J'espère avoir été clair...

je vais essayer ça... Merci encore pour votre aide. Si j'y arrive pas, vous risquez de me revoir ! lol...