Centrage menu horizontal

Bonjour,

Je suis en train de passer le site dont je m'occupe en css et xhtml strict.

J'ai un petit problème que je n'arrive pas à solutionner.

J'ai créé un menu en bas de page avec les balises ul et li.

La page est dynamique et s'adapte à la taille du navigateur.

Je cherche à centrer le mnu du bas au milieu de la page.

Voilà le code html concerné :

<div class="footer"><ul><li><a href="/Admin/index.php" title="Accès controlé à la zone d'administration du site">Administration</a></li><li><a href="#" onclick="window.external.AddFavorite(location.href, document.title);" title="Ajouter Cerclaqua.com à vos favoris">Ajouter aux favoris</a></li><li><a href="/phpBB2/calendar.php" title="Le calendrier du CAN">Calendrier</a></li><li><a href="/contact.php" title="Les principaux contacts de l'association">Contacts</a></li><li><a href="/liens.php" title="Les liens des sites préférés">Liens</a></li><li><a href="/partenaires.php" title="Liens vers nos partenaires">Partenaires</a></li><li><a href="/search/search.pl" title="Moteur de Recherche interne">Rechercher</a></li><li><a href="/envoi.php" title="Recommander le site Cerclaqua.com à des amis">Recommander ce site</a></li></ul></div>

voilà la portion css qui va avec :

/*Bas de page de chaque page*/
.footer {
	height:30px;
	width:100%;
	background-image:url(images/essaimb.png);
	background-repeat:repeat-x;
	padding-left:50px;
	padding-right:50px;
}
.footer ul {
display:inline;
width:auto;
margin-left:auto;
margin-right:auto;
}
.footer li {
display:inline;
}
.footer a {
	display:block;
	float:left;
	padding-right:5px;
	padding-left:5px;
	line-height:30px;
}
.footer a:link, .footer a:visited {
	text-decoration:none;
	background:none;
	color:#0457AB;
}
.footer a:hover {
	text-decoration: none;
	background-image:url(images/essaimbover.png);
	color:#FFFFFF;
}

La page est visible ici http://www.cerclaqua.com/essai.htm
La css est là http://www.cerclaqua.com/cerclaqua.css

Merci pour votre aide par avance.

Salut,

Tu as mis des margin : auto sur ton ul, ce qui devrait marcher, puisque c'est un élément de type bloc ... à condition que tu précises une largeur pour ton ul.
Sinon, je pense qu'il faudrait rajouter un text-align : center à ton ul, mais là je ne suis pas sûr.

J'ai déjà essayé sans succès...

Je me demande si ce n'est pas à cause du float:left pour mettre en une ligne les liens de type block..?

Je viens d'essayer en enlevant display:inline dans la balise ul et li...

J'ai donc maintenant :

.footer {
	height:30px;
	width:100%;
	background-image:url(images/essaimb.png);
	background-repeat:repeat-x;
	margin:0;
}
.footer ul {
margin-left:auto;
margin-right:auto;
width:1000px;
text-align:center;
}
.footer li {
list-style:none;
}

Le seul problème, je doit spécificer une taille en pixel dans ul pour que le menu ce centre, mais comme est dynamique, il faudrait que je mettes 100% et là, ça ne marche...

Comprends pas pourquoi???