Aller au contenu

Centrer une liste flottante


yuston

Sujets conseillés

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 !

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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!

Lien vers le commentaire
Partager sur d’autres sites

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>

Lien vers le commentaire
Partager sur d’autres sites

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 :(

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...