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

[Erwan31]

Bonsoir,
l'astuce va consister à imiter le comportement d'untableaux et ses cellules.
Comme les display table-machin ne sont pas implémentés par IE7-, il faudra leur réserver le code CSS que tu as actuellement grâce à une CSS appelée via les commentaires conditionnels adéquates (IE7 et version antérieures) dans le head de ton document (faire une recherche pour la syntaxe).
Et suivre cet exemple pour les autres navigateurs.
Tu dois tester sur IE8, je suis pas certain que ça fonctionne très bien sur cette version mais en principe ça devrait.

Code :

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

1
2
3
#menu ul {display:table;}
#menu ul li {display: table-cell}
#menu ul li a {display:block;}

Le comportement de table-celle "imite" celui des cellules de tableaux.
Quant au display:block il permet une adapataion des liens en largeur en fonction de celle de leur conteneur (un élément un display:inline ou flottant s'adaptant à son contenu).

Au passage ton niveau de contraste (lien/fond) est beaucoup trop faible.

[baggie]

Merci pour ta réponse !

J'ai donc ajouté le code que tu m'as dit et testé pour le moment sur Firefox.
Et ça ne va pas encore jusqu'au bout de mon menu. (ci joint un screen).

Une idée ?

PS : pour la couleur du fond, en effet ! Je vais changer ça quand j'aurai réglé mon premier problème !

[Erwan31]

Curieux, pourrais tu fournir le nouveau code?

[baggie]

Comme j'avais déja créé les classes que tu as dites, j'ai inséré le code dans mon code existant :

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
 
#menu ul
{
	padding-left: 0;
	margin-left: 0;
	background-color: #A4D5F3;
	color: #FFFFFF;
	float: left;
	width: 100%;
	font-family: verdana;
	display: table;
}
 
#menu ul li { display: table-cell;}
 
#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;
	display: block;
}

J'ai oublié quelque chose ?

[Erwan31]

Oui enlever le float:left de #menu ul li a mais j'aurais dû te le préciser.