Discussion :

[asagtoth]

Bonjour à tous,
j'utilise un menu déroulant pour mon site avec des images png en background.
Mon problème viens de l'alignement vertical de mon texte.
j'ai utilisé tout d'abord un line-height mais celà ne fonctionne pas dans mon cas car les textes utilisent une ligne et d'autres 2.
Je me suis donc interessé à vertical-align mais je n'arrive pas à l'utiliser à cause du display que je ne maîtrise pas du tout.

voici mon css merci d'avance

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
 
@charset "UTF-8";
 
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 10px;
	font-weight: bold;
	cursor: default;
	width: 100%;
}
 
ul.MenuBarActive
{
	z-index: 1000;
 
}
 
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 125px;
	height: 45px;
	float: left;
 
}
/* */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 45px;
	position: absolute;
	left: -1000em;
 
}
 
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
 
}
 
ul.MenuBarHorizontal ul li
{
	width: 125px;
 
}
 
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
 
}
 
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
 
}
 
 
 
 
/* Fond Menu sans sous menu + fond sous menu  */
 
ul.MenuBarHorizontal a
{
	color:#666666;
	line-height: 15px;
	display: block;
	cursor: pointer;
	padding: 0.5em 0.75em;
	background-image: url(../img/bouton.png);
	height: 35px;
	text-decoration: none;
 
}
/* fond quand rollover sur les menu*/
 
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	color: #000;
	background-image: url(../img/boutonhover.png);
 
}
/* Fond quand clic sur sous menu */
 
ul.MenuBarHorizontal ul a:active
{
	color: #FF0000;
	background-image: url(../img/boutonactive.png);
 
}
/* Fond quand clic sur menu */
 
ul.MenuBarHorizontal li a:active
{
	color: #FF0000;
	background-image: url(../img/boutonactive.png);
 
}
/* fond quand rollover sur les sous menu*/
 
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-image: url(../img/boutonhover.png);
	color: #000;
 
}
 
/* MEnu qui contienne un sous menu*/
 
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(../img/bouton.png);
	background-repeat: no-repeat;
	background-position: 95% 50%;
 
}
 
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(../img/bouton.png);
	background-repeat: no-repeat;
	background-position: 95% 50%;
 
}
 
{
	background-image: url(../img/boutonhover.png);
	background-repeat: no-repeat;
	background-position: 95% 50%;
 
}
 
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(../img/boutonhover.png);
	background-repeat: no-repeat;
	background-position: 95% 50%;
 
}
 
 
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
 
}
 
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
 
	}
}

[asagtoth]

j'ai oublié de dire que j'étais débutant 5 jours de css...

[Erwan31]

Bonjour,
tout d''abord dans la plupart des cas penses toujours à fournir la totalité du code XHTML avec le code CSS.
Je sais pas ou t'as récupéré ce menu mais son code à
l'air inutilement compliqué et mal foutu.

@charset "UTF-8"; ne te servira que si tu as du contenu généré avec la présence de caractère non ASCII.


Tu as un anti-slash en trop en fin de CSS:

Code :

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

1
2
3
4
5
6
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	
	}

La propriété vertical-align ne s'appliquer qu'aux éléments en-ligne (inline)
(strong, img,span,a ...) et donc aux éléments convertis en boite de ligne via la déclaration display:inline et aussi au td (et donc aux élément table-cell).