Discussion :

[Tchupa]

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:



Voici mon 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
 
.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 :

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

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.

[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.

[Tchupa]

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



Voici mon 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
 
.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 :

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

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.