Discussion :

[baggie]

Bonjour,

j'ai créé un menu horizontal avec une liste.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="menu">
	<ul>
		<li><a href="">Accueil</a></li>
		<li><a href="">Lien 1</a></li>
		<li><a href="">Lien 2</a></li>
		<li><a href="">Lien 3</a></li>
		<li><a href="">Lien 4</a></li>
		<li><a href="">Lien 5</a></li>
		<li><a href="">Lien 6</a></li>
	</ul>
</div>

Ce menu est sous un div contenant le header et au dessus (dans le code) d'un autre div contenant le contenu. Le tout étant dans un div container.

Chaque lien peut contenir un nombre différent de caractères, donc les <li> ne feront pas la même taille.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
#menu ul
{
	padding-left: 0;
	margin-left: 0;
	background-color: #A4D5F3;
	color: #FFFFFF;
	float: left;
	width: 100%;
	font-family: verdana;
}
 
#menu ul li { display: inline; }
 
#menu ul li a
{
	padding: 0.2em 1em;
	background-color: #A4D5F3;
	color: #FFFFFF;
	text-decoration: none;
	float: left;
	border-right: 1px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	text-align: center;
}
 
#menu ul li a:hover, #active
{
	background-color: #336699;
	color: #FFFFFF;
	font-weight: bold;
}

Mon problème est que l'ensemble du menu ne prend pas la taille totale du container.
C'est comme si au lieu que "menu" prenne 100% de la taille, il n'en prend que 95%.
Et du coup ça me fait un truc pas terrible (voir pièce jointe) : après le "Lien 6", j'ai un espace vide. Or, j'aimerai que mes 7 liens prennent l'ensemble de la place qu'il y a horizontalement.

J'ai eu beau changer la taille de la police, ou celle des <li> pour avoir partout la même, ça ne va pas car certains mots sont trop longs par rapport à d'autres.

La seule solution est-elle de définir la taille des <li> pour chacune d'elles ?

Autres questions :
- sur le hover des <li>, j'ai mis une autre couleur de background.
J'ai mis un id "active" sur le <li> de la page en cours (donc même CSS que le hover). Sauf que ça ne le prend pas en compte. Pourquoi exactement ? Car c'est déja défini ailleurs ?
- est-ce que je peux faire en sorte que seul le premier <li> ait une bordure à gauche différente, et seul le dernier <li> ait une bordure à droite différente ?

Merci