Rollover dans mon menu

Version imprimable

Bonjour,
je rencontre un petit soucis avec le rollover de mon menu, l'image des mes boutons dans mon menu n'apparaissent pas entièrement, voici un petit screen de l'effet indésirable:

http://img150.imageshack.us/img150/5...nurollover.png

Voici mon 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
 
.menu
 
{
 
	width:100%;
 
	height:71px;
 
	list-style:none;
 
	position:absolute;
 
	top:152px;
 
	line-height:0px ; margin:0px ; padding:0px ;
 
}
 
 
 
.menu li a 
 
{
 
	display:block;
 
	float:left;
 
	height:32px;
 
	background: url("design2/bouton1.gif") left top no-repeat ;
 
	color:#FFFFFF;
 
	line-height: 25px ;
 
	text-decoration:none;
 
	font-family:arial, verdana, sans-serif;
 
	text-decoration:underline;
 
	padding:0 0 0 17px;
 
	text-align: center ;
 
}
 
 
 
.menu li a:hover, .menu li a:focus, .menu li a:active 
 
{
 
	color:#000000;
 
	background: url("design2/bouton2.gif") left top no-repeat ;
 
	font-family:arial, verdana, sans-serif;
 
}

mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ul class="menu">
 
	<li><a>Accueil</a></li>
 
	<li><a>La socièté</a></li>
 
        <li><a>Condition général</a></li>
 
	<li><a>Palmares</a></li>
 
	<li><a>Contact</a></li>
 
</ul>

Si quelqu'un peu me venir en aide.
En vous remerciant.
Cordialement Tchupa.

08/07/2009, 10h18
Macmillenium

Bonjour,

A quoi ressemblent tes images bouton1 et bouton2 ? enfin, bon, tu peux tenter padding:0 17px; mais vu ton code je doute que cela puisse fonctionner.

J'ai tout repris a zéro et j'obtiens un résultat concluant.

http://img44.imageshack.us/img44/5481/pbrollover2.gif

Voici mon 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
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
 
.menu 
 
{
 
	list-style:none;
 
	width:100%; 
 
	height:71px;
 
	margin:0;
 
	position:absolute;
 
	top:152px;
 
	left:0px;
 
	line-height:0px ; margin:0px ; padding:0px ;
 
} 
 
 
 
.menu li a 
 
{
 
	display:block;
 
	float:left;
 
	height:32px;
 
	line-height:32px;
 
	color:#fff;
 
	text-decoration:none;
 
	font-family:arial, verdana, sans-serif;
 
	text-align:center;
 
	font-size:14px;
 
	text-decoration:underline;
 
	background:url("design2/bouton1.gif");
 
	padding:0 0 0 9px;
 
	cursor:pointer;
 
}
 
 
 
.menu li b 
 
{
 
	background:url("design2/bouton1.gif") no-repeat right top;
 
}
 
 
 
.menu li a b 
 
{
 
	float:left;
 
	display:block;
 
	padding:0 14px 0 7px;
 
}
 
 
 
.menu li a:hover 
 
{
 
	color:#fff;
 
	text-decoration:none;
 
	background: url("design2/bouton2.gif");
 
}
 
 
 
.menu li a:hover b 
 
{
 
	background:url("design2/bouton2.gif") no-repeat right top;
 
}

mon html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ul class="menu">
 
			<li><a href=""><b>Accueil</b></a></li>
 
			<li><a href=""><b>La socièté</b></a></li>
 
			<li><a href=""><b>Condition général</b></a></li>
 
			<li><a href=""><b>Palmares</b></a></li>
 
			<li><a href=""><b>Contact</b></a></li>
 
</ul>

Par contre je voudrais le centré et j' y arrive pas. :(