Tableau en CSS et cellule de tailles identiques

Bonjour,


J'ai besoin de créer un menu horizontal à 6 éléments.
Et je voudrais que chacun des liens occupe une taille similaire dans la ligne... Que ce soit équilibré quoi. Pour le moment, ils sont en lignes, mais les un derrière les autres...

Comment faire ça en CSS ?

Merci de votre aide

Hello,

As-tu suivi les tutoriels de création de menu sur Alsa ?
T'ont-ils posé des problèmes ?

Bonne chance à toi

Oui oui, mais y a aucun truc qui s'approche de ce que je veux obtenir....

Bonjour TheoOrl45,

Tu l'as fait comment ton menu ? avec des ul et des li ?

Oui, avec des ul et li !

Salut!
Un truc dans ce genre :

*Header et menu*/
#logo         {background: url(http://logo01.png) no-repeat;margin:0px 0px -20px 0px;top:0px;height:96px;width:768px;}
#menu li      {text-align:center;font-weight:bold;color:#779;font-size:1.1em;margin:9px 0px 0px 0px;padding:0px 0px 0px 0px;float:left;}
#menu ul      {margin:-50px 0px 0px 0px;padding:0px 0px 0px 0px;float:left;}
#menu a#lien1       {background-position:   0px 73px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu a#lien1:hover {background-position:   0px 33px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu a#lien2       {background-position:-192px 73px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu a#lien2:hover {background-position:-192px 33px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu a#lien3       {background-position:-384px 73px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu a#lien3:hover {background-position:-384px 33px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu a#lien4       {background-position:-576px 73px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu a#lien4:hover {background-position:-576px 33px;width: 192px;padding:2px 0px 0px 0px;line-hei ght:0em;height:18px;}
#menu         {height:20px;margin:28px 0px -28px 0px;padding:0px 0px 0px 0px;}
#menu a       {background: url('http://ogo01.png') 0 ;height:20px;font-weight:bold;float:left;margin:0px ;padding:0px ;text-decoration:none;font-weight:bold;color:#668;position:relative;font-style:normal;text-align:center;}
#menu a:hover {top:0px;color:#cce;margin:0px 0px 0px 0px;padding:0px ;}

et

  echo "<div id='menu'><ul>";
  echo "<li><a id='lien1'href='index.php?lien=1'>blabla</a></li>";
  echo "<li><a id='lien2'href='index.php?lien=2'>blabla</a></li>";
  echo "<li><a id='lien3'href='index.php?lien=3'>blabla</a></li>";
  echo "<li><a id='lien4'href='index.php?lien=4'>blabla</a></li>";
  echo "</ul></div>";

Ca donne un menu horizontal à 4 items (192px de width )qui s'affiche exactement pareil sur ie ff opéra.
Inconvénients :
Les css sont optimisables. Un probleme est un temps de latence au survol avec ie qui devrai pouvoir se régler.


EDIT => utilise la propriété display:inline/block en combinaison avec un petit width: xx pxs pour faire prendre une largeur fixe à tes liens.
Modifié par Ralfman68 (05 Apr 2006 - 10:39)

Merci, j'ai réussi à bidouiller un truc.

Par contre, j'ai mis une hauteur de 30px pour le div principal. Et j'aimerais bien que mes liens soit centré verticalement. Comment faire ?

Salut,

Ceci devrait t'aider : Comment aligner du contenu (texte ou bloc) verticalement dans un élément ?