[Résolu]Problème placement du menu dans 1 page

Bonsoir,

Je suis en train de créer un site et j'ai donc voulu faire un menu. Je l'ai fait en suivant le tuto d'Alsacréations, c'est un menu déroulant horizontal. Je l'ai positionné comme je le voulais dans ma page web (cf ici : lien cassé ). Le problème est qu'il se positionne pas de la même façon sur l'écran d'autres personnes (par exemple : lien cassé ).


Auriez-vous une idée de comment je pourrais faire pour que ça s'affiche toujours pareil, peu importe l'écran sur lequel mon site s'affiche ? SVP...

Voici mon CSS (parait que c'est le bordel dedans mais moi je m'y retrouve alors si c'est vraiment le bazar... Excusez-moi...) :

/* CSS Document */

<style type="text/css">
body {
margin: 0;
padding: 0;
background: white;
font: 81% verdana, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 33%;
left: 10%;
z-index:100;
width: 81%;
}
#menu dl {
float: left;
width: 198px;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #000051;
color: #FFF;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a { 
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a {
color: #FFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #6060FF;
}
#menubis {
position: absolute;
top: 37%;
left: 18%;
z-index:50;
width: 80%;
}
#menubis dl {
float: left;
width: 200px;
margin: 0 1px;
}
#menubis dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #000051;
color: #FFF;
border: 1px solid gray;
}
#menubis dd {
border: 1px solid gray;
}
#menubis li {
text-align: center;
background: #fff;
}
#menubis li a { 
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menubis dt a {
color: #FFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menubis li a:hover, #menu dt a:hover {
background: #6060FF;
}
#site {
color: #FFF;
}
</style>

Modifié par Crakotte (31 Oct 2008 - 14:33)

Bonjour,

J'avais cru trouver une solution à mon problème mais en fait il n'a été résolu qu'en partie. Je vous éclaire. Je suis allée voir le tuto "Comment positionner les éléments en CSS ?" (ici : http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS ).
J'ai donc changé un peu mon CSS:

.conteneur {
padding-top: 5px;
padding-left: 123px;
}
#menu {
position: absolute;
z-index: 100;
}

.conteneurbis {
padding-top: 30px;
padding-left: 220px;
}
#menubis {
position: absolute;
z-index: 50;
}

Et donc changé ceci dans ma page HTML (j'ai rajouté class="..."):

<div id="menu" class="conteneur">

<div id="menubis" class="conteneurbis">

Le problème est que le padding-top semble très bien marcher, en revanche le padding-left n'a rien changé... Donc le problème n'est résolu qu'à moitié. Voici ce que voit maintenant, depuis ces changements, la personne qui ne voit pas mon site comme il faut: lien cassé

Avec ce début d'éclaircissement, quelqu'un aurait-il désormais une idée du comment résoudre mon problème ? SVP...

-------------------------------------------------------------------------------------------------------------------------

EDIT MARDI 17 JUIN :

Merci de votre aide à tous... (hum)

J'ai trouvé la solution en mettant une taille à mon tableau en pixels et qui correspond à la taille de mon menu (si y'en a que ça intéresse... )

Bonne soirée à vous !
Modifié par Crakotte (31 Oct 2008 - 14:33)