Centrer un menu deroulant en CSS

Version imprimable

bonjour
je cherche à centrer un menuderoulant en css. j'ai mis margin-left: auto et margin-right:auto et precisez le width , j'ai trouvé sur le forum qu'il fallait mettre text-align: center dans le body mais rien
je suis obligé de faire margin-left=130 px et la c'est centre. j'ai IE et je controle sous morzilla. mais même,pb sur les deux
merci a tous

code

Code:

#menuDeroulant {width: 800px; list-style-type: none; margin: 0; padding: 0; border: 0;margin-left:130px; margin-right: auto;}
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="bandeau" style="text-align: center"> <img src="banniere/banniere01-80 .jpg" border="0" width="756" height="80" alt=""> </div> <div id="menu" > <ul id="menuDeroulant"> <li> <a href="#">accueil</a> <ul class="sousMenu"> <li><a href="#">sommaire</a></li> <li><a href="#">accueil</a></li> </ul>

13/02/2008, 17h48
Seta-san

Salut, ajoutes :

Code:

text-align : center ;
13/02/2008, 18h15
Erwan31

Le text-align center n'aura aucun effet sur le centrage de ton UL (sauf sous IE
en mode Quirks...), il ne servira qu'à centrer le texte horizontalement à l'intèrieur des li.
Il faut conserver tes marges auto latérales, mais est ce que
800px est vraiment la bonne largeur pour centrer ton menu?

Il faudrait être plus clair ou/et donner la totalité de ton code HTML.
13/02/2008, 20h47
Seta-san

Je ne comprend pas trop ce que tu veux faire. Le centrer au centre de ta page ?

merci pour vos reponses

merci pour vos reponses si rapide

je veux centrer mon menun au cnetre de ma page et quelque soit la largeur de l'ecran des visiteurs voici mon code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<body bgcolor="#333333"> 
 
 
	<div id="bandeau" style="text-align: center">
	<img src="banniere/banniere01-80 .jpg" border="0" width="756" height="80" alt=""> </div>
		<div id="menu" > 
   <ul id="menuDeroulant"> 
   <li>
			<a href="#">accueil</a>
			<ul class="sousMenu">
				<li><a href="#">sommaire</a></li>
				<li><a href="#">accueil</a></li>
 
			</ul>
		<li>
			<a href="#">galeries</a>
			<ul class="sousMenu">
				<li><a href="#">photos</a></li>
				<li><a href="#">vidéo</a></li>
 
			</ul>
		</li>
		<li>
			<a href="#">mise en scène</a>
			<ul class="sousMenu">			      
				<li><a href="#">Charles Beauchart</a></li>
				<li><a href="#">enregistrement de la bande son</a></li>
				 <li><a href="#">25 ans de spectacle historique</a></li>
			</ul>
		</li>
		<li>
			<a href="#">technique</a>
			<ul class="sousMenu">			      
				<li><a href="#">lumière</a></li>
				<li><a href="#">accessoire</a></li>
				<li><a href="#">montage</a></li>
			</ul>
		</li>
		<li>
			<a href="#">costumes</a>
			<ul class="sousMenu">			      
				<li><a href="#">couture</a></li>
				<li><a href="#">habillage</a></li>
 
			</ul>
		</li>
		<li>
			<a href="#">lien</a>
			<ul class="sousMenu">			      
				<li><a href="#">site officiel</a></li>
				<li><a href="#">contact</a></li>
 
			</ul>
		</li>
	</ul>
	</div>
 
 
 
<div id="img_01"><img src="fichier_lumiere/2003_0913_230038AA-(2).jpg" border="0" width="210" height="114" alt=""></div>

13/02/2008, 21h19
hakurou

Bonjour,

evidement que ca ne veut pas se centrer comme tu veux, tu definie ton block UL avec un width:800px;

met dans ton css un margin:auto; pour centrer ton menu deroulant puis met lui un width:100px; par exemple tu verras la difference !

pour t'y retrouver dans tes blocks, je te conseille de faire des background-color afin de voir les delimitations
13/02/2008, 21h19
gandalf077

au sujet du width

merci erwan de ta reponse
j'ai, mis width:800px au hasrd je ne sais pas trop a quelle largeur faire reference sacnnnat que j'ai mis 120px pour chaque sous menu ce qui fait 720 px au total est ce que je dois changer mon width du menu???
merci
13/02/2008, 21h24
gandalf077

[resolu]merci c'est resolu

effectivement en mettant margin:auto et puis width à720 px le menu est centre sur la page aussi bien avec Ie que morzilla meric bp
14/02/2008, 16h13
Seta-san

Ba dans ce cas un simple div conteneur aurait suffit ^^ :

<div align="center">
<div id="bandeau" style="text-align: center">
...
</div>
</div>