Largeur d'éléments de liste [RESOLU ]

Bonsoir,

Sur ce site : http://www.aveyronnaise-classic.com/

la mise en page est actuellement basée sur une largeur fixe de 800px.
Les éléments du menu horizontal ont donc une largeur de 160px.

Mon problème : je voudrais faire évoluer la mise en page vers une largeur fluide.
Les éléments du menu devraient donc avoir une largeur de 100/5 = 20%.
Ça fonctionne parfaitement pour Firefox et Opera mais hélas pas pour IE

Quelqu'un aurait il une idée pour que le résultat soit équivalent quelque soit le navigateur.

Le html :

      <div id="onglet">
          <ul>
	<li>
          <a href="index.php?page=accueil&amp;menu=accueil" <?php if($id2=='accueil'){echo 'id="actif2"';} ?> title="ACCUEIL">ACCUEIL</a></li>
      <li>
          <a href="index.php?page=aveyron&amp;menu=presentation" <?php if($id2=='presentation'){echo 'id="actif2"';} ?>  title="PRESENTATION">PRESENTATION</a></li>
    <li>
          <a  href="index.php?page=presse&amp;menu=edition" <?php if($id2=='edition'){echo 'id="actif2"';} ?>  title="EDITION 2007">EDITION 2007</a></li>
          <li>
          <a href="index.php?page=historique&amp;menu=historique" <?php if($id2=='historique'){echo 'id="actif2"';} ?>  title="HISTORIQUE" >HISTORIQUE</a></li>
					<li>
          <a href="./2bgal/index.php" title="LES PHOTOS">PHOTOS</a></li>
        </ul>
      </div>

et la CSS actuelle associée :

 /* les onglets*/
#onglet {
font-family:arial,verdana;
line-height:300%;
margin:10px 0 10px 0;
height:50px;
}

#onglet ul {list-style-type: none;
margin:0;
padding:0;
}
#onglet li {
margin-bottom: 0px;
float:left;
width: 160px;
}

#onglet a {
height: 40px;
display: block;
text-align: center;
font-size:1.4em;
font-weight:bold;
color:#FFFFFF;
text-decoration: none;
border-bottom:solid 2px green;
}
	 
#onglet a:hover {
border-bottom:solid 2px red;
color:red;
}

#onglet #actif2{
cursor:crosshair;
color:red;
border-bottom:solid 2px green;
}

Modifié par jld (06 Nov 2007 - 10:24)

Salut jld ,

j'ai posé la même question pour mon site voilà quelques temps dans ce sujet et la solution de Florent fonctionnait très bien...

Cela dit, j'ai trouvé (après mûre réflexion ) que cela "alourdissait" le code de gérer différemment le dernier lien et j'ai donc opté pour tous les <li> en float:left avec un width:20% et un commentaire conditionnel pour IE < 7 qui met un width:19.95%

L'inconvénient de la solution ul / li est qu'en cas d'augmentation de la taille du texte (via Ctrl molette ou autre) la mise en page part un peu en sucette ...

Tout ça pour dire que le plus simple et le plus robuste serait sans doute de faire cela à l'aide d'une table avec width:100% et des <td> avec text-align:center

A+

Merci pour ta réponse, je vais essayer.