Ameliorer menu horizontal

bonjour,

j'ai fait un menu horizontal mais je ne trouve pas de solutions pour le remplir à gauche et à droite, ça fait bizarre du vide de chaque coté.
j'aurais voulu que ce soit comme les boutons du milieu.
si quelqu'un avait des solutions à proposer?

merci
http://forum.alsacreations.com/smilies/eek.gif

<ul id="menuline">
<li id="act"><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
</ul>


#menuline {margin: 3px 0 0 0; padding: 0;background: #B53C18;border: 1px solid;border-color: #000 #317184 #ddd #317184; text-align:center; line-height:24px;height:24px;}
#menuline li { display: inline; padding : 0; width:80px;list-style-type: none; margin: 0 -1px; white-space: nowrap;}
#menuline ul { margin: 0; padding: 0;}
#menuline a {width: 100px; font-size:14px; padding: 3px 12px 3px 12px; border: 1px solid;border-color: #ddd #000 #000 #ddd; background:#B5925A; text-decoration: none;}
#menuline a:link, #menuline a:visited {padding: 3px 12px 3px 12px;color:#fff;}
#menuline a:hover { background: #E3542B;}
#menuline a:active, #act a:link, #act a:visited, #act a:hover, #act a:active { padding: 3px 12px 3px 12px;background: #B53C18; color: #F7B294;}

oups j'ai pas fait de balisage!

voila

<ul id="menuline">
<li id="act"><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
</ul>


#menuline {margin: 3px 0 0 0; padding: 0;background: #B53C18;border: 1px solid;border-color: #000 #317184 #ddd #317184; text-align:center; line-height:24px;height:24px;}
#menuline li { display: inline; padding : 0; width:80px;list-style-type: none; margin: 0 -1px; white-space: nowrap;}
#menuline ul { margin: 0; padding: 0;}
#menuline a {width: 100px; font-size:14px; padding: 3px 12px 3px 12px; border: 1px solid;border-color: #ddd #000 #000 #ddd; background:#B5925A; text-decoration: none;}
#menuline a:link, #menuline a:visited {padding: 3px 12px 3px 12px;color:#fff;}
#menuline a:hover { background: #E3542B;}
#menuline a:active, #act a:link, #act a:visited, #act a:hover, #act a:active { padding: 3px 12px 3px 12px;background: #B53C18; color: #F7B294;}

Bonjour,

J'ai jeté un coup d'oeil au rendu de ce menu, qui je crois est assez différent suivant le navigateur. Je conseillerais de retirer la propriété width, puisque l'élément a n'est pas ici de type block. Ensuite, pour agrandir le menu en largeur, il serait peut-être utile d'accroître le padding horizontal d'un lien. Ainsi, il y aura légèrement plus d'espace entre le texte d'un lien et la bordure qui l'entoure. De plus, il est également possible de définir une très légère marge, afin de laisser quelques pixels d'espacement entre chaque lien.

#menuline a {font-size:14px; padding: 3px 20px 3px 20px; margin: 0 2px; border: 1px solid; border-color: #ddd #000 #000 #ddd; background:#B5925A; text-decoration: none;}

Les valeurs sont ensuite à adapter suivant le nombre de liens utilisés et leur dimension. Attention cependant, car je vois que les propriétés de padding ont été également spécifiées pour les pseudo-classes :link, :visited et :active. Pour ne pas avoir de redimensionnements suivant les pseudo-formats, il faut que ces propriétés soient identiques. Je conseillerais même de ne pas les redéfinir si elles ne sont pas modifiées.

Bon courage !

PS : lors d'une petite erreur d'affichage sur le forum, il est possible d'éditer son message.
Modifié par Romain H. (14 Jan 2006 - 10:05)

bonjour,

j'ai accru le padding horizontal des liens comme vous me l'avez suggeré et c'est beaucoup mieux, les liens que je voulais au milieu se repartissent sur toute la ligne mais c'est deja une tres bonne solution car ça comble les vides. j'ai enlevé la propriété width de l'element a et aussi les propriétés de padding pour les pseudo-classes :link, :visited, et :active, c'est vrai que c'etait pas trés utile. Il reste encore un petit probleme où je n'arrive pas à aller pile poil au debut et fin de ligne mais je vais essayé de trouver un truc. je n'ai pas testé dans tous les navigateurs mais ça a l'air de fonctionner sous firefox et ie.

merci pour votre aide
bonne journée
bounounours

<ul id="menuline">
<li id="act"><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounounours</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bou</a></li>
<li><a href="#">bounounours</a></li>
<li><a href="#">bounou</a></li>
<li><a href="#">bounou</a></li>
</ul>

#menuline {width:100%;margin: 3px 0 0 0; padding: 0;background: #B53C18;border: 1px solid;border-color: #000 #317184 #ddd #317184; text-align:center; line-height:24px;height:24px;}
#menuline li { display: inline; padding : 0; width:80px;list-style-type: none; margin: 0 -1px;  white-space: nowrap;}
#menuline ul { margin: 0; padding: 0;}
#menuline a {font-size:14px; padding: 3px 31px 3px 31px; border: 1px solid;border-color: #ddd #000 #000 #ddd; background:#B5925A; text-decoration: none;}
#menuline a:hover { background: #E3542B;}
#menuline a:active, #act a:link, #act a:visited, #act a:hover, #act a:active { background: #B53C18; color: #F7B294;}