Menu déroulant en CSS qui se place mal sur IE7 et plus mais correctement sur FF

**steiner62** · 12/01/2009, 17h46

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

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 L’impur</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 L’impur</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>

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
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);

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
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;
}

voila donc si vous pouvez me donner un petit coup de main.

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.

**c_s_s** · 13/01/2009, 10h53

Bonjour,

Tu peux modifier ton CSS de la façon suivante :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#menu li {
	float : left;
	padding-bottom:3px;	/* Espace désiré entre les listes */
}
#menu li img {
	float : left; 
}
#menu li ul {
	margin-top:35px;	/* hauteur image (32px) + espace désiré (3px)  */
	width: 118px;
	left: -999em;	
	border:1px #FFFFFF solid;
}

**steiner62** · 13/01/2009, 15h33

Que dire à part que vous éte génial et très doué C_S_S

l'affichage ce fait comme désiré sur IE et FF.

Un grand merci pour cette réponse très rapide et très efficace.

Menu déroulant en CSS qui se place mal sur IE7 et plus mais correctement sur FF

CSS

Discussions similaires

Partager

Partager