largeur fixe dans un menu onglets CSS?

[rugbyredon]

Bonjour
Je me permets de laisser un message ici parce que je n'arrive pas à trouver une solution à mon problème...
J'ai fait un menu avec onglet sen CSS tout standard et je souhaiterai que ces onglets soient tous de la même largeur car ils se calent sur le texte du menu...

Je vous montre le code, mon html c'est ça:

Code: Tout sélectionner

<div class="barre">
   <ul class="onglet">
      <li ><a href="lien1.html" >Lien 1</a></li>
      <li ><a href="lien2.html" >Lien beaucoup plus long</a></li>
      <li ><a href="lien3.html" >Lien 3</a></li>
      <li ><a href="lien4.html" >Lien 4</a></li>
        </ul>
</div>


et le CSS c'est celui là:

Code: Tout sélectionner

.barre {
display:none;
}

.barre {
padding-top:130px;
display:block;
}
ul.onglet
{
margin:0;
padding: 3px 0.5em;
font: bold 12px Verdana, sans-serif;
}

ul.onglet li
{
list-style: none;
margin: 0;
display: inline;
}

ul.onglet li a
{
padding: 3px 0.5em;
margin-left: 3px;
color: #000;
text-decoration: none;
border-right: 1px solid #778;
border-top: 1px solid #778;
border-left: 1px solid #778;
background: #DDE;
}

ul.onglet li a:link {
padding: 3px 0.5em;
margin-left: 3px;
text-decoration: none;
border-right: 1px solid #778;
border-top: 1px solid #778;
border-left: 1px solid #778;
background: #DDE;
color: #448;
}
ul.onglet li a:visited {
padding: 3px 0.5em;
margin-left: 3px;
text-decoration: none;
border-right: 1px solid #778;
border-top: 1px solid #778;
border-left: 1px solid #778;
background: #DDE;
color: #667;
}

ul.onglet li a:hover
{
padding: 3px 0.5em;
margin-left: 3px;
color: #000;
text-decoration: none;
background: #AAE;
border-color: #227;
}
.barre {
padding: 3px 0.5em;
border:1px solid #aaa;
border-top:0;
}


Est ce que vous savez où je pourrai mettre un paramètre pour fixer la largeur de l'onglet et qu'ils soient tous de la même largeur que l'onglet le plus long?
Merci beaucoup

[antinomx]

Salut,

Il faut appliquer un display block sur les li de la liste onglet pour pouvoir utiliser width, en fonction du lien le plus long.

[nickargall]

merci antinomx, je cherchais justement à faire ça

[rugbyredon]

Il faut appliquer un display block sur les li de la liste onglet pour pouvoir utiliser width, en fonction du lien le plus long.

Mais du coup, mon "display inline" est neutralisé et le menu n'est plus horizontal... je ne mets peut être pas mon display au bon endroit, je l'ai mis dans "ul.onglet li a" alors j'ai un très joli menu avec effectivement la largeur que je souhaite mais où mettre ces paramètres pour que le menu reste horizontal?
Merci beaucoup

[antinomx]

Il faut ajouter float:left sur tes li.