Bonjour à tous,
Voila j'ai créer ceci le tout est basé sur un CCS de menu déroulant, afin d'afficher les noms.
Le seul problème que je rencontre sur IE7 uniquement (comme par hasard) est que les nom qui devrai apparaitre sous l'image associé apparaisent sur cette dernière.
pour voir ce que je voudrai il vous suffit de regarder le lien au dessus sur FF et de comparer sur IE vous comprendrai tout de suite.
vous trouverez ci dessous les divers script de ma page
le code HTML
Mon code menu.js
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="menu.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans titre</title> <link href="style2.css" rel="stylesheet" type="text/css" /> </head> <body> <ul id="menu"> <li><img src="im/R10.png" /></li> <li> <img src="Alive/Naxxramas.png" title="Naxxramas" /> <ul> <li id="Down">Anub Rekhan</li> <li id="Down">Grande veuve Faerlina</li> <li id="Down">Maexxna</li> <li id="Alive">Le Recousu</li> <li id="Alive">Grobbulus</li> <li id="Alive">Gluth</li> <li id="Alive">Thaddius</li> <li id="Down">Instructeur Razuvious</li> <li id="Down">Gothik le moissonneur</li> <li id="Alive">Les 4 cavaliers</li> <li id="Down">Noth le Porte-Peste</li> <li id="Down">Heigan Limpur</li> <li id="Down">Horreb</li> <li id="Alive">Sapphiron</li> <li id="Alive">Kel Thuzad</li> </ul> </li> <li> <img src="Down/Sartharion.png" title="Le Sanctuaire Obsidien" /> <ul> <li id="Down">Sartharion</li> </ul> </li> <li> <img src="Alive/Malygos.png" title="Oeil de l Eternité" /> <ul> <li id="Alive">Malygos</li> </ul> </li> <li> <img src="Down/Archavon.png" title="Caverne d Archavon" /> <ul> <li id="Down">Archavon</li> </ul> </li> <li> <img src="Alive/Ulduar.png" title="Ulduar" /> <ul> </ul> </li> <li> <img src="Alive/Citadelle de glace.png" title="Citadelle de glace" /> <ul> </ul> </li> <br /> <li><img src="im/R25.png" /></li> <li> <img src="Alive/Naxxramas.png" title="Naxxramas" /> <ul> <li id="Alive">Anub Rekhan</li> <li id="Alive">Grande veuve Faerlina</li> <li id="Alive">Maexxna</li> <li id="Alive">Le Recousu</li> <li id="Alive">Grobbulus</li> <li id="Alive">Gluth</li> <li id="Alive">Thaddius</li> <li id="Alive">Instructeur Razuvious</li> <li id="Alive">Gothik le moissonneur</li> <li id="Alive">Les 4 cavaliers</li> <li id="Alive">Noth le Porte-Peste</li> <li id="Alive">Heigan Limpur</li> <li id="Alive">Horreb</li> <li id="Alive">Sapphiron</li> <li id="Alive">Kel Thuzad</li> </ul> </li> <li> <img src="Alive/Sartharion.png" title="Le Sanctuaire Obsidien" /> <ul> <li id="Alive">Sartharion</li> </ul> </li> <li> <img src="Alive/Malygos.png" title="Oeil de l Eternité" /> <ul> <li id="Alive">Malygos</li> </ul> </li> <li> <img src="Down/Archavon.png" title="Caverne d Archavon" /> <ul> <li id="Down">Archavon</li> </ul> </li> <li> <img src="Alive/Ulduar.png" title="Ulduar" /> <ul> </ul> </li> <li> <img src="Alive/Citadelle de glace.png" title="Citadelle de glace" /> <ul> </ul> </li> </ul> </body> </html>
et enfin 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 sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);
voila donc si vous pouvez me donner un petit coup de main.
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 /* CSS Document */ /*------------------------------- Style du Menu -------------------------------*/ #menu, #menu ul /* Liste */ { padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 15px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */ position: absolute; /*top: 70px;*/ z-index:1; width: 160px; } #menu /* Ensemble du menu */ { font-weight : bold; /* on met le texte en gras */ font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ font-size : 10px; /* hauteur du texte : 12 pixels */ z-index: 1; margin: 0; padding: 0; } #menu a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* couleur de fond */ color : #fff; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 50px; /* largeur 144*/ } #menu li /* Éléments des listes */ { float : left; /* pour IE qui ne reconnaît pas "transparent" */ /*border-right : 1px solid #ffffff;*/ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li { /* border-right: 1px solid transparent ;*/ /* on met une bordure transparente à droite de chaque élément */ } #menu li ul /* Sous-listes */ { width: 118px; /* Largeur des sous-listes */ left: -999em; border:1px #FFFFFF solid; } #menu li ul li /* Eléments de sous-listes */ { /*border-top : 1px #FFFFFF solid;*/ border-right: 1px #ffffff solid; width:118px; left:: -999em; background-image:url(im/BG.gif); } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li ul li { /*border-top : 1px solid transparent;*/ /* on met une bordure transparente en haut de chaque élément */ } #menu li ul ul { margin : -22px 0 0 144px; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-left : 1px solid #fff; } /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */ html>body #menu li ul ul { border-left : 1px solid #ffffff /*transparent*/ ; /* on met une bordure transparente sur la gauche de chaque élément */ } #menu a:hover /* Lorsque la souris passe sur un des liens */ { color:#ffffff; /* On passe le texte en noir... */ background: #000000; /* ... et au contraire, le fond en blanc */ background-image:url(im/BG.gif); } #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ { left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */ } #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */ { left: 0.2em; /* Repositionnement normal */ min-height: 0; /* Corrige un bug sous IE */ } /*------------------------------- Fin Style du Menu -------------------------------*/ #Down { color:#FFFFFF; } #Alive { color:#999999; }
PS : je ne sais pas du tout si je suis dans le bon forum surtout que là j'utilse du CSS, java, html donc si je me suis trompé de section veuillez m'en excuser.
Partager