Centrer une liste flottante

[yuston]

Bonsoir,

J'ai un menu horizontal de dimension fixe. Les liens (une liste flottante) dans ce menu sont de nombre variable. Je souhaite, quelque soit le nombre de lien qu'il y a dans ce menu centrer le tout.

<ul id="menu">
	<li><a href="#">Lien 1</a></li>
	<li><a href="#">Lien 2</a></li>
	<li><a href="#">Lien 3</a></li>
	<li><a href="#">Lien n</a></li>
</ul>

Le style associé:

ul#menu{
	width:600px;
	height:40px;
	margin:auto;
	background:url('fond.png') no-repeat transparent;
	padding:10px 40px 10px 40px;
}

ul#menu li{
	float:left;
	list-style:none;
}

ul#menu li a{
	color:red;
	text-decoration:none;
	display:block;
	margin:0 12px 0 0;
}

Voilà, si le nombre de lien est fixe, suffit de bidouiller un peu, et on arrive à quelque chose de plus ou moins centré... mais là, le nombre de liens, je ne le connais pas. J'ai tenté des text-align: center; mais rien ne marche

Précision: lorsque je dis "centrer le tout", c'est que l'ensemble des liens soient centrés par rapport aux 600 pixels de ul.

Avez-vous une idée?! Merci !

[captain_torche]

J'ai un peu de mal à suivre : les liens sont-ils censés être les uns en-dessous des autres (ce que je comprends de la question), ou les uns à côté des autres (ce que je comprends du CSS, avec le float: left) ?

[Ernestine]

Je suppose que les liens sont disposes horizontalement.

Pourquoi mets-tu la propriete display block a tes <a> ? Rien ne le justifie dans ton cas (pour info la propriete margin marchera tres bien quand même dans le sens horizontal). Tu peux supprimer ce display block et partant de la tu peux mettre les <li> en display inline et sans float left, ainsi ils se succederont sur une même ligne. Et enfin tu mets un text-align center sur le <ul>

Parce que sinon, avec des floats dont tu ne connais pas la taille totale, le centrage est impossible.

PS : desolee pour les accents.

[yuston]

C'est horizontal, donc les uns à côté des autres.

Le block, c'est pour permettre de rendre la zone cliquable plus "large".

Je vais voir tout ça, merci !

[yuston]

Voilà, j'ai tout centré comme décrit par Ernestine! C'est cool, merci. Mais là, mes boutons ne sont cliquables que sur l'ancre du lien, le texte en résumé. Or, ce sont des boutons, existe-t-il un moyen, de tout garder centré, en plus de pouvoir "étendre" la zone cliquable?!

Merci !

Désolé pour le double post!

[MrPierre]

Tiens, dans une autre optique : tu pourrais te passer d'employer une liste pour faire ça ? C'est à la fois une suggestion mais aussi une question

Sinon regarde comment je coderais ça à ta place :

#menuonglets{margin-top:2em;margin-left:8.5em;}
#onglets
{   list-style-type:none;
    padding-bottom:27px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom:1px solid #9EA0A1;
    margin-left:0;}
#onglets li
{   float:left;
    height:24px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background: url('fond.png') no-repeat transparent;
    margin:2px !important; 
    border:1px solid #9EA0A1;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;}
#onglets li.active{
    border-bottom:1px solid #fff;
    background-color:#fff;}
#onglets a{
    display:block;
    color:#666;
    text-decoration:none;
    padding:4px;}
#onglets a:hover{background:#fff;}

Et puis je ferais pareil mais en mettant la liste dans un div :

<div id=menuonglets>
<ul id=onglets>
<li><a href=""> Lien 1 </a>
<li><a href=""> Lien 2 </a>
<li><a href=""> Lien 3 </a>
<li><a href=""> Lien 4 </a>
<li><a href=""> Lien 5 </a>
</ul>
</div>

[yuston]

Salut MrPierre.

Ta proposition correspond un peu à ce que j'avais fait à la base. Sauf que, je désire pouvoir centrer tous les onglets (c'était des boutons moi^^) au milieu de la page en sachant que le nombre d'onglets m'est inconnu et surtout, est variable.

Mais c'est pas grave, tant pis. Je corrigerai ce problème plus tard

[Ernestine]

Le block, c'est pour permettre de rendre la zone cliquable plus "large".

Pour agrandir la zone cliquable sans pour autant appliquer un display block aux <a>, il suffit de leur mettre un padding.

Les <li> en display inline et sans float

Les <a> en display inline aussi (c'est leur valeur par défaut) avec un padding.

Le <ul> en text-align center

Ce qui donne :

<style type="text/css">
ul {
    text-align: center;
    width: 600px;
}
li {
    display: inline;
}
a {
    padding: 50px;
}
</style>

et :

<ul>
    <li><a href="">salut</a></li>
    <li><a href="">bonjour</a></li>
    <li><a href="">merci</a></li>
</ul>

Seul petit bémol : sous ie6 et ie7, le padding ne fonctionnera que dans le sens horizontal, mais pas vertical. A priori ce n'est pas gênant, c'est surtout le côté horizontal qui nous intéresse ici.

[yuston]

Ah merci bien Ernestine ! C'est un peu près parfait !

Merci et bonne soirée à tous!