Menu Horizontal avec <li> en ligne

Bonjour,

Voilà mon souci, je m'arrache les cheveux!!
J'ai mon ul en block avec une hauteur de 30px, idem pour mes li et j'ai un lien a dans chaque li mais ces liens ne veulent pas prendre un hauteur de 30px.

Pour visualiser le problème
C'est mieux qu'un long discours!

Voilà mon CSS :

#menu {
position: absolute; 
top: 120px; 
height: 30px; 
margin-left: 280px;
margin-right: 20px;
background: url(img/nav.png) no-repeat top left #fff;}

#menu ul {margin-left: 7px; list-style: none; float: left; display: block; height: 29px; }
#menu ul li {display: inline; float: left; height: 29px; padding: 0;border: 1px solid black}
#menu ul li a {display: inline; text-align: center; background: url(img/nav_puce.png) no-repeat top left; border: 1px solid red ; 
               color: #000; text-decoration: none; font-weight: normal !important; padding: 0px 20px 0px 20px}
#menu ul li a:hover {background: url(img/nav_puce_over.png) no-repeat top left; text-decoration: underline;}

Et mon code:

<div id="menu">
   
    <ul>
      <li><a href="#">Home &amp; encore un truc</a></li>
      <li><a href="#">Work</a></li>
      <li id="nav-end"></li>  
    </ul>
 </div>

Comment faire? Merci!
Modifié par xgregx (17 Nov 2006 - 15:39)

Salut !

Pour qu'un élément puisse avoir une hauteur, une largeur ou des marges, il faut qu'il soit de type block, ce qui n'est pas le cas de tes liens :

a écrit :
#menu ul li a {
display:inline;
}

Modifie donc ce comportement par un

display:block;

et tu devrais voir ton problème résolu...

Par ailleurs, je te conseille d'aller jeter un oeil sur ce menu horizontal qui correspond à ce que tu souhaites obtenir.
En regardant le code, tu pourras supprimer les instructions inutiles de ton code
Modifié par Cygnus (17 Nov 2006 - 17:38)

J'ai testé mais en block et les li et a deviennent très long alors que je n'ai pas spécifié de width.

Je voudrais que le width reste en auto comme ça si j'ajoute un lien avec un texte assez long, la longueure du li et du a se règle automatiquement.

Je poste ce soir le visu avec les balises en "block".

Merci pour la réponse.

xgregx a écrit :
J'ai testé mais en block et les li et a deviennent très long alors que je n'ai pas spécifié de width.

Je voudrais que le width reste en auto comme ça si j'ajoute un lien avec un texte assez long, la longueure du li et du a se règle automatiquement.

Effectivement par défaut, un élément de type block prend toute la largeur possible.

Te serait-il possible de nous montrer un exemple de ce que tu souhaite obtenir ?
Peut-être que cela nous permettrait de mieux t'aider...
Modifié par Cygnus (17 Nov 2006 - 17:43)

oui alors c'est un peu comme ça ->lien<-

Ici la longueur du texte importe peu tu n'est pas obligé de modifier la longueur de chaque <li>...c'est pratique! mais bon, j'ai pas envie de pomper bêtement son css. Merci Cygnus pour ton temps.