centrer verticalement texte dans les cellules d'un menu

[cyrano_de_bergerac]

Bonjour,

Le texte "Animaux" apparait toujours en haut de ma cellule, je ne comprends pas...

Code HTML:

Code :

1
2
3
4
5
6
 
<ul id="menu_horizontal">
   <li>
      <a href="/articles/menu_universel#" title="Menu 1">Animaux</a>
   </li>
</ul>

Code CSS:

Code :

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
 
ul#menu_horizontal
{
	width: 900px;
	height: 33px;
	list-style-type:none;
}
ul#menu_horizontal li
{
	float: left;
	width: 157px;
	height: 33px;
	text-align: center;
	vertical-align: middle;
	background-image: url(../Images/Menu/btn_menu_normal.png);
	background-repeat: no-repeat;
}
ul#menu_horizontal a
{
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	font-family: Arial;
	font-size: 12px;
}

Pour le moment, une seule cellue, mais c'est pour simplifier le problème!

Merci

[Nesmontou]

Bonjour,

Il faut utiliser la propriété line-height sur l'élément <li />.

Code :

1
2
3
4
5
6
7
8
9
10
ul#menu_horizontal li
{
	float: left;
	width: 157px;
	height: 33px;
	line-height: 33px; /* même valeur que height */
	vertical-align: middle;
	background-image: url(../Images/Menu/btn_menu_normal.png);
	background-repeat: no-repeat;
}

Bon développement

[cyrano_de_bergerac]

Super merci ça marche!

Maintenant, j'essaie de faire les sous menus, sans m'occuper de les faire apparaitre et disparaitre.

Code HTML:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<ul id="menu">
   <li class="principal">
      <a href="/articles/menu_universel#" title="Menu 1">Animaux</a>
   </li>
   <li class="principal">
      <a href="/articles/menu_universel#" title="Menu 2">Villes</a>
      <ul id="ssmenu2" class="ssmenu">
         <li>
            <a href="/articles/menu_universel#" title="Sous-menu 1">Lisbonne</a>
         </li>
         <li>
            <a href="/articles/menu_universel#" title="Sous-menu 2">Varsovie</a>
         </li>
         <li>
            <a href="/articles/menu_universel#" title="Sous-menu 3">Lima</a>
         </li>
         <li>
            <a href="/articles/menu_universel#" title="Sous-menu 4">Nairobi</a>
         </li>
      </ul>
   </li>
</ul>

Code CSS:

Code :

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
 
#menu
{
	width: 900px;
	height: 33px;
	list-style-type:none;
}
.principal
{
	float: left;
	width: 157px;
	height: 33px;
	line-height: 33px;
	text-align: center;
	vertical-align: middle;
	background-image: url(../Images/Menu/btn_menu_normal.png);
	background-repeat: no-repeat;
}
.principal a
{
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	font-family: Arial;
	font-size: 12px;
}
.principal a:hover
{
	text-decoration: none;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	font-family: Arial;
	font-size: 11px;
}
 
.ssmenu
{
	width: 147px;
	text-align: left;
	vertical-align: middle;
	background-image: url(../Images/Menu/sous-menu.png);
	background-repeat: repeat-y;
	list-style-type:none;
	z-index: 3;
}
 
.ssmenu li
{
	list-style-position: inside;
	width: 100%;
	height: 33px;
}
 
.ssmenu a
{
	text-decoration: none;
	color: #ffffff;
	text-align: left;
	vertical-align: middle;
}
 
.ssmenu a:hover, .ssmenu a:focus
{
	color: #dfdfdf;
	font-size: 11px;
}

Mon sous menu ul id="ssmenu2" est un peu en retrait à gauche par rapport à son li parent.
Et si tu peux m'expliquer ce que c'est le z-index..?

Merci!

[insane1]

Tes sous menu sont en retrait car le texte est aligné à gauche.
Rajouter un text-align: center dans ssmenu li et les elements de sous menu seront un peu décalés sur la droite par rapport au li parent.

La propriété z-index gère la "profondeur" de tes éléments. Si des éléments doivent se superposer, celui qui a le z-index le plus élevé sera visible.