{Résolu} Problème de placement de menu

Bonjour,
Cela fait plusieurs jours que je cherche une solution pour pouvoir centrer mon menu dans la page, pourriez-vous m'aider?
Ma page se compose d'une image d'arrière-plan sur laquelle repose un conteneur blanc dans lequel se trouve les informations. J'ai réussi à centrer ces éléments automatiquement comme vous pouvez le voir avec ce code:

 
html {
margin:0;
padding: 0;
font-size: 100%; /* Pour evite un bug d'IE 6-7.*/}

body{
background-image:url(../image/fondpageac.jpg);
background-repeat:no-repeat;
width:775px;
height:790px;
margin:0 auto;
background-position: center;
margin-top:130px;	
padding:0;}


#container {
width:700px;
height:650px;
background-color: #FBFCFA;	
margin:0px auto;
text-align:center;}

	

mais je n'arrive pas à centrer automatiquement mon menu déroulant dont voici la code:

#menuDeroulant{	
position:absolute;
border:1px;
border-top-color:green;
border-top-style:solid;
border-bottom-color:green;
border-bottom-style:solid;
width: 520px;
list-style-type: none;
font-size:11px;
font-family:Arial;
top:160px;
left:22%;}

#menuDeroulant li{
 float: left;
 width: 150px;
margin-right:10px;
padding: 0;
border: 0; }

#menuDeroulant li a:link, #menuDeroulant li a:visited{
display: block;
height: 2%;
color: #000000;
background:transparent;
margin: 0;
padding: 4px 2px;
border-right: 1px solid #fff;
text-decoration: none; }
	 
#menuDeroulant li a:hover { background-color:transparent ; }
#menuDeroulant li a:active { background-color:#54f98d ; }

#menuDeroulant .sousMenu1 li a:link,
#menuDeroulant .sousMenu1 li a:visited{
 display: block;
color: #000000;
margin-left: 12px;
border: 0;
text-decoration: none;
background:#87E990  repeat;
text-align:left;}
	
#menuDeroulant .sousMenu1 li a:hover{
background-image: none;
background-color:#B0F2B6;}

#menuDeroulant .sousMenu1
{display: none;
 list-style-type: none;
 margin: 0;
padding: 0;
border: 0;}

#menuDeroulant li:hover > .sousMenu1 { display: block; }
#menuDeroulant .sousMenu1 li
{float: none;
margin: 0;
padding: 0;
border: 0;
width: 140px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;}

(biensûr il existe un code comme pour le sous-menu1 pour les parties 2 et 3 mais c'était trop long)
En réalité c'est la position du menu en absolute qui pose ce problème et pourtant je ne peux pas m'en passer.

Je joins également un lien pour mieux comprendre: http://www.livre-poitoucharentes.org/Escales/paysage.php
Je vous remercie de prendre un peu de votre temps pour m'aider car je suis desperée.
Modifié par hb4 (09 Jul 2009 - 14:26)

bon je dit peut-être des bêtises, mais...

si tu ajoutais un margin:auto; dans #menuDeroulant?

de cette façon ta boîte se placerais centrer je crois... peut-être que j'enlèverais ton position:absolute; dedant. mais ça serais à tester...

Bonjour,

Oui, je crois que la propriété "absolute" est inutile car elle se met d'office.

Et si tu ajoutais display:block dans #menuDeroulant ? (+ effectivement margin:auto;)

Bonjour,
merci de vos réponses mais j'ai fini par trouver la solution grâce au tuto de alsacréations.
En effet, j'ai pris le temps de relire ce qui concernait les positions: absolu, relative, fixe et j'ai vu que l'on ne pouvait pas jouer avec la position absolu sauf si celle-ci se réfère à un élément précédent.

Je m'explique : sur ma page tout en haut j'ai un chemin d'Ariane et ensuite mon menu déroulant. En position absolu, le menu se placait automatiquement tout en haut à gauche et avait pour référent le body. J'ai donc mis mon chemin en position relative et est adapté mon menu déroulant par rapport à celui-ci.
L'adresse donnée précédemment est toujours consultable au cas où je n'aurai pas été très clair.

Attention cette solution n'est pas valable pour IE. Pour IE, j'ai joué des pourcentages.
Bonne journée.

Petites correction par rapport aux propos précédents :

juliesunset a écrit :
bon je dit peut-être des bêtises, mais...
si tu ajoutais un margin:auto; dans #menuDeroulant?

ça ne changerait rien, le menu étant positionné en absolu, il est hors du flux, le centrage d'un élément positionné en absolu se fait différemment (avec des marges négatives notamment).

mailbox13630 a écrit :
Oui, je crois que la propriété "absolute" est inutile car elle se met d'office.

Non, non, et non. Absolute n'est pas la valeur par defaut de position, c'est "static" qui est la valeur par défaut.


hb4 > Félicitation pour avoir trouvé par toi même
Si tu considère le problème comme étant [résolu], peux-tu l'indiquer ?
Modifié par Laurie-Anne (07 Jul 2009 - 08:14)

Bonjour,
Je veux bien indiquer que mon problème a été résolu mais dans l'aide il est indiqué qu'il faut cliquer sur éditer puis changer le titre mais il n'y a plus le bouton éditer sur mon premier message. Je ne sais donc comment faire.
Merci de m'expliquer.

Il faut être logué sur le site pour pouvoir éditer ses messages

C'est-à-dire exactement?

Il faut être connecté au site pour avoir accès à la fonction éditer les messages.

ahhhhh ouais! ok.merci.