Centrage d'une liste en ligne?

Salut,

J'ai un petit souci, je ne comprends d'ailleurs pas comment le résoudre. Normal sinon je ne posterais pas, bref.

J'ai un menu en ligne et j'aimerais le centrer.

Le code css :

#menu {
height: 40px;
line-height: 40px;
border-left: 10px solid #999;
border-right: 10px solid #999;
background: #ccc;
}

#menu ul li a {
float: left;
color: #222;
width: 102px;
font-weight: bold;
text-align: center;
}

#menu ul li.evidence a {
color: #aebe21;
border-bottom: 5px solid #aebe21;
background: #222;
}

#menu ul li a:hover {
color: #aebe21;
border-bottom: 5px solid #aebe21;
background: #222;
}

Et le menu est à cette endroit : http://www.heia.ch/test/

Merci d'avance, et désolé si cette question a déjà été posé.
A noter que j'ai réussi à le centrer, mais ça casse tout mon "design" des boutons du menu.

En gros j'ai enlevé le float: left; du #menu ul li a et j'ai ajouté #menu ul {text-align: center} et #menu ul li {display: inline}

A bientôt.

Salut,

avant de chercher plus loin tu devrais commencer par revoir ton reset général :

* {
border: 0;
[#blue][b]margin: 0 auto;[/b][/#]
padding: 0;
font-size: 13px;
font-family: 'trebuchet ms', arial, helvetica, sans-serif;
color: #000;
text-align: justify;
text-decoration: none;
list-style: none;
}

Si tu tiens vraiment à utiliser ce genre de chose tu devrais faire une recherche sur Reset Eric Meyer.

Au passage la taille de la police devrait plutôt être en em ou en % (cf. la FAQ) et je ne suis pas sûr que le text-align: justify; global soit une bonne idée (problème sur les petites largeurs).
Modifié par Heyoan (29 Dec 2008 - 19:35)

Salut et merci pour la réponse.

Je suis entiérement d'accord pour les em, mais c'est un "vieux" site et je n'ai pas vraiment la motivation à tout changer.

Maintenant pour en revenir à ma question de base, en quoi mon margin : 0 auto; changerait quelque chose au niveau de mon menu?

Merci d'avance.

le rouge a écrit :
Maintenant pour en revenir à ma question de base, en quoi mon margin : 0 auto; changerait quelque chose au niveau de mon menu?

Ça je sais pas, peut-être rien, mais autant de styles assez spécifiques (un margin: 0 auto c'est pas tout à fait anodin tout de même) appliqué à tous les éléments, c'est un peu du grand n'importe quoi question rigueur et méthodologie. Déjà que l'usage du sélecteur universel pour faire un reset est très limite...

Pour revenir au centrage du menu:
- tes éléments ne sont disposés horizontalement que parce que les liens sont flottants... je rajouterais au moins un display:inline aux éléments LI du menu (auxquels tu n'appliques aucun style!), par sécurité;
- tes items de menu ne peuvent pas être centrés horizontalement car ils sont flottants.

À retenir: float + centrage horizontal = pas possible.

Tu peux centrer les blocs suivants sans en connaitre la largeur exacte:
- tableau (via les marges automatiques);
- élément en display:table (via les marges automatiques);
- élément en display:inline-block (via un text-align: center sur le conteneur).

Mais je te conseille de gérer d'un peu plus près les styles appliqués aux éléments UL, LI et A de ton menu, parce que là il n'y a que les A qui sont stylés, ça te laisse pas une grande marge de manoeuvre...