Bonjour!
J'ai un soucis avec mon menu et je sollicite votre aide smile
Mon menu est composé de 4 éléments. Chaque élément est associé à une image et donc, il n'y a pas d'affiche de texte proprement dit.
Je veux que l'image change au passage de la souris et j'aimerais utiliser la technique "une seule image".
Voici mon code css :
Et 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
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 #menu { width:100%; height:31px; background-color:#fff; text-align:center; } #menu ul { list-style-type: none; margin:0; padding:0; } #menu li { margin: 0; padding: 0 ; float:left; } #menu ul a { list-style-type: none; display: block; height:31px; text-indent: -5000px; } #menu ul a#menu_programmation{ background-image: url(images/menu_programmation.jpg) no-repeat; width: 158px; } #menu ul a#menu_programmation:hover{ background-image: url(images/menu_programmation.jpg) no-repeat 0 -31px; } [ .................... ] #menu ul a#menu_contact{ background-image: url(images/menu_contact.jpg) no-repeat 0 0; width: 91px; } #menu ul a#menu_contact:hover{ background-image: url(images/menu_contact.jpg) no-repeat 0 -31px; }
Voici l'exemple en ligne : http://www.gertruderockfestival.com/...ct/gertrudev3/
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 <div id="menu"> <ul> <li><a href="#" id="menu_programmation">Programmation</a></li> <li><a href="#" id="menu_groupes">Groupes</a></li> <li><a href="#" id="menu_staff">Staff</a></li> <li><a href="#" id="menu_contact">Contact</a></li> </ul> </div>
Vous verrez que les images ne s'affiche... Ce qui est étrange c'est qu'avez Firebug, je ne vois pas la propriété background !
J'espère que vous pouvvez m'aider confused
Merci beaucoup!
LarZuK
Partager