Centrer un menu horizontallement

Bonjour (ou plutôt bonsoir !) ,
J'ai un p'tit soucci pour centrer horizontallement mon menu http://orphee.perso.cegetel.net/le_peintre2.html . Voici le css :

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #000000 ;
}

div#conteneur
{
	width: 760px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ffffff ;
	background: #000000 ;
}

h1#header
{
	height: 100px ;
	background: url("../images/banniere2.png") no-repeat left top ;
	margin: 0 ;
}

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}

div#contenu
{
	padding: 0 25px 0 25px ;
	color: #ffffff ;
}

div#contenu h2
{
	padding-top: 50px ;
	padding-bottom: 10px ;
	line-height: 0px ;
	font-size: 1.4em ;
	color: #c4bcbc ;
	border-bottom: 1px solid #FFD700 ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #ffffff ;
	border-left: 3px solid #ffffff ;
	color: #c4bcbc ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #ffffff ;
}

div#contenu a:hover
{
	color: #ffffff ;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}

* html pre
{
	width: 636px ;
}

pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}
			
dt, dl, dd, ul, li {
margin: 0 10px 0 0;
padding: 0;
}

#menu {
position: relative;
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
}

#menu dl {
float: left;
font-size: 1.2em;
letter-spacing: 4px ;
border-right: 2px solid #FFD700;
}

#menu li {
display: inline;
border-right: 2px solid #FFD700;
}

#menu a {
font-size: 1em;
font-weight: bold ;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
letter-spacing: 1px ;
width: 600px;
}

a {text-decoration: none;
color: #ffffff;
}

Donc, je voudrais que les menu(s) de 1er et de 2ème niveau soient centrés horizontallement. J'ai beau cheché (pas assez j'imagine )

Merci d'avance
Modifié par d0d0shez (09 May 2006 - 20:13)

Bonsoir,
Merci pour ta réponse. Par contre, j'ai l'impression que le morceau de code que tu as cité est une partie de mon code qui est erroné (je sais, c'est un peu le bordel dans mon code, mais je démarre tout doucement ).

J'ai l'impression que c'est plus cette partie là pour le menu en question :

dt, dl, dd, ul, li {

margin: 0 10px 0 0;

padding: 0;

}



#menu {

position: relative;

margin-left: auto;

margin-right: auto;

width: 760px;

text-align: left;

}



#menu dl {

float: left;

font-size: 1.2em;

letter-spacing: 4px ;

border-right: 2px solid #FFD700;

}



#menu li {

display: inline;

border-right: 2px solid #FFD700;

}



#menu a {

font-size: 1em;

font-weight: bold ;

}



#smenu1, #smenu2, #smenu3, #smenu4 {

position: absolute;

left: 0;

letter-spacing: 1px ;

width: 600px;

}

Au passage, j'ai essayé les modifs que tu m'as indiqué, et ça n'a rien donné.

Merci d'avance

Dans #menu tu as un width de la largeur totale 760px donc tes marges auto ne servent a rien et cette largeur qui equivaut à 100% n'est en principe pas utile puisque qu'un élément de type block comme le div prend par default toute la largeur de son conteneur.

Essayes avec ça (le 310px est une largeur arbitraire, à toi de donner la largeur final du menu et à reporter la moitié de cette valeur sur le margin-left)

#menu {
	 POSITION: relative; left: 50%; width: 310px; margin-left: -155px
}

ça c'est l'autre technique du centrage horizontal qui est en général plus utilisé pour le centrage vertical.
Modifié par herman31 (09 May 2006 - 23:46)

Merci pour ta réponse, c'est déjà mieux mais malheureusement c'est pas completement résolu .

J'ai réusi à centrer le 1er menu. Maintenant, j'ai le 2ème niveau qui par un peu de travers . Voici l'adresse à nouveau : http://orphee.perso.cegetel.net/le_peintre2.html

... et le code css :

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.9em "Trebuchet MS", helvetica, sans-serif ;
	background: #000000 ;
}

div#conteneur
{
	width: 760px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ffffff ;
	background: #000000 ;
}

h1#header
{
	height: 100px ;
	background: url("../images/banniere2.png") no-repeat left top ;
	margin: 0 ;
}

ul#menu
{
	height: 35px ;
	margin-left: auto; 
	padding: 0 ;
	background: url(bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}

div#contenu
{
	padding: 0 25px 0 25px ;
	color: #ffffff ;
}

div#contenu h2
{
	padding-top: 50px ;
	padding-bottom: 10px ;
	line-height: 0px ;
	font-size: 1.4em ;
	color: #c4bcbc ;
	border-bottom: 1px solid #FFD700 ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #ffffff ;
	border-left: 3px solid #ffffff ;
	color: #c4bcbc ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #ffffff ;
}

div#contenu a:hover
{
	color: #ffffff ;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}

* html pre
{
	width: 636px ;
}

pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}
			
dt, dl, dd, ul, li {
margin: 0 10px 0 0;
padding: 0;
}

#menu {
POSITION: relative; 
left: 10%; 
width: 760px; 
}

#menu dl {
float: left;
font-size: 1.2em;
letter-spacing: 2px ;
border-right: 2px solid #FFD700;
}

#menu li {
display: inline;
padding-right: 10;
letter-spacing: 2px ;
border-right: 2px solid #FFD700;
}

#menu a {
font-size: 1em;
font-weight: bold ;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
position: absolute;
letter-spacing: 1px ;
width: 600px;
margin-top: 10px;
}

a {text-decoration: none;
color: #ffffff;
}

Encore mille merci d'avance
Modifié par d0d0shez (10 May 2006 - 09:20)

Bjr,
Honnêtement essayes de comprendre par toi même d'ou vient le problème sans avoir à compter sur les autres, c'est pas insurmotable quand même, css reste un language simple. C'est pas aux autres à faire ton boulot.
Apprends à résoudre les problèmes simples par toi même ça te fera gagner pas mal de temps...
Ton problème doit venir de la structuration HTML mais le nonbres de sous rub est trop important alors il faut opter pour ses sous menu verticaux.