Menu horizontal - Largeur totale ?

**baggie** · 05/03/2010, 10h39

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** · 05/03/2010, 23h52

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** · 10/03/2010, 09h39

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** · 10/03/2010, 10h40

Curieux, pourrais tu fournir le nouveau code?

**baggie** · 10/03/2010, 12h10

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** · 10/03/2010, 12h53

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

**baggie** · 10/03/2010, 13h11

Merci c'est parfait !

Du coup, est-ce que tu saurais répondre à mes autres questions ?

Autres questions :
- sur le hover des <li>, j'ai mis une autre couleur de background.
J'ai mis un id sur le <li> de la page en cours (donc même CSS que le hover) dans le menu.
Ex : sur la page "page1.html", on aura <li id="active">Page1</li>.

Sauf que ça ne le prend pas en compte, il ne garde pas la couleur du hover. 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 ?

**Erwan31** · 10/03/2010, 13h54

Attention, comme je le l'ai expliqué, tu dois ajouter une CSS pour IE7- avec tes anciennes déclarations... sinon tu risque d'avoir de mauvaise surprises,
puis tester sur IE8 évidemment.

Envoyé par baggie

Ex : sur la page "page1.html", on aura <li id="active">Page1</li>.
Sauf que ça ne le prend pas en compte, il ne garde pas la couleur du hover. Pourquoi exactement ? Car c'est déja défini ailleurs ?

Sans la totalité des code XHTML et CSS il va être difficile de te répondre.

Envoyé par baggie

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 ?

En attendant une implémentation suffisante de :last-child et :first-child par les différents browsers, tu dois te contenter d'attribuer une class (ou un id si tu préfères) spécifique au premier et dernier LI.

**baggie** · 10/03/2010, 14h16

Oui je vais tout tester sur IE, c'est prévu !

Pour ce qui est du code, évidemment sans ça risque d'être plus compliqué pour comprendre ...

HTML :

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 id="encours"><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>

CSS :

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
 
#menu ul li a
{
	padding: 0.2em 1em;
	background-color: #336699;
	color: #FFFFFF;
	text-decoration: none;
	border-right: 1px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	text-align: center;
	display: block;
}
 
#menu ul li a:hover, #encours
{
	background-color: #A4D5F3;
	color: #FFFFFF;
	font-weight: bold;
}

Sauf que le #encours ne fonctionne pas, mon <li> correspondant à la page sur laquelle je suis reprendre le style d'un <li> normal.

Pour ce qui est du second problème, c'est ce qu'il me semblait, mais comme j'ai le problème ci-dessus je ne suis pas sûre que ça fonctionne. Je vais voir.

**Erwan31** · 10/03/2010, 14h24

Tu me redonne le même code... ya pas la totalité du code là.
Une page en ligne serait appréciable si c'est possible.

**baggie** · 10/03/2010, 15h18

Je n'ai pas encore mis en ligne les pages, désolée

Voici l'intégralité du code CSS :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
/* CSS Document */
 
*{
	margin:0px;
	padding:0px;
}
 
.clearboth
{
   clear:both;
}
 
body
{	
   margin:0px;
   padding:0px;
   background: #C8E6F7;
   font-family: verdana;
}
 
#container
{
   width: 796px;
   position:absolute;
   padding-left:50%;
   margin-left:-400px;
   margin-top: 50px;
}
 
#header
{
   width: 796px;
   height: 200px;
   background-image: url("banniere.jpg");
   background-repeat: no-repeat;
}
 
#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: #336699;
	color: #FFFFFF;
	text-decoration: none;
	border-right: 1px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	text-align: center;
	display: block;
}
 
#menu ul li a:hover, #active
{
	background-color: #A4D5F3;
	color: #FFFFFF;
	font-weight: bold;
}
 
#contenu
{
   width: 790px;
   min-height:350px;
   background-color: #D9D1CE;
   color:#336699;
   background-repeat: no-repeat;
   background-position:left bottom;
   border-left: 3px solid #FFFFFF;
   border-right: 3px solid #FFFFFF;
}
 
#footer
{
   width: 796px;
   height: 30px;
   color:#336699;
   text-align:center;
   font-size:0.8em;
   padding-top:0.6em;
   background-image: url("footer.jpg");
   background-repeat: no-repeat;
}
 
#blabla a:link, a:visited {
	color: #336699;
	font-weight: bold;
	text-decoration: none;
}
 
#blabla a:hover {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}
 
#blabla {
	overflow: hidden;
}
#blabla div {
	float: left;
  	padding: 10px 10px 10px 10px;
}
 
#blabla h3 {
	font-size:1.0em;
	color:#336699;
}
 
#blabla ul {
	padding-left: 20px;
	margin-left: 0;
	color: #336699;
	float: left;
	width: 100%;
	font-family: verdana;
}
 
#blabla ul ul li {
	font-size: 0.8em;
}
 
#blabla ul ul {
	padding-left: 50px;
	margin-left: 0;
	color: #336699;
	float: left;
	width: 100%;
	font-family: verdana;
}

Et le code HTML :

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
33
34
 
<body>
		<div id="container">
			<div id="header"></div>
 
		<div id="menu">
	<ul>
		<li><a href="">Accueil</a></li>
		<li id="encours"><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>
 
			<div class="clearboth"></div>
 
			<div id="contenu">
				<div id="blabla">
					<div>
						<h3>SuperTiteul</h3>
						<br />
					</div>
				</div>
 
 
				<div class="clearboth"></div>
			</div>
 
			<div id="footer">&copy; 2010 Pouët</div>
		</div>
</body>

J'espère que ça pourra t'aider à trouver une solution !

**Erwan31** · 10/03/2010, 22h36

Code :

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

1
2
3
4
5
6
 #menu a:hover, #menu a:focus, #menu a:active, #menu #encours a
{ /*supprimer les sélecteur intermédiaire inutiles ici > ul li*/
	background: #A4D5F3; /*background suffit*/
	color: #FFF; /*si 6 fois même lettre/chiffres > 3 suffisent*/
	font-weight: bold;
}

Lire les commentaires.
Comme les styles de l'item sont appliqués au niveau de l'ancre a, tu dois aussi le définir au niveau de l'ancre qui se trouve au premier plan.
D'autre part tu dois ajouter #menu devant pour pas que la règle définie pour les a (#menu ul li a) surclasse #encours a selon les règles de spécificité.
Tu dois aussi ajouter ce changement sur le focus (si accès au clavier) et la pseudo class :active pour que le focus soit actif sous IE.

**baggie** · 11/03/2010, 10h16

Je te remercie pour ta réponse ! Ca fonctionne très bien

Pour les commentaires que tu as fait, il y a certaines choses que je savais (pour les #fff au lieu de #ffffff), ce que j'aimerai juste savoir c'est si ça change réellement les choses ou si c'est juste un détail histoire d'écrire trois caractères en moins ?