Problème de menu déroulant et flash IE et Firefox

**polo66** · 28/02/2009, 19h48

Bonjour a tous !

je réalise un site pour lequel je souhaite avoir entres autres un menu déroulant (catégorie+ x souscatégorie) et juste dessous un flash.

J'ai réussi a superposer le menu déroulant et le flash, mais:

- la superposition se passe mal, comme vous pouvez le voir sur la page test à l'adresse http://paulcostaseca.mas-vidalou.com/newindex.html Il ya comme un effet de sautement... comme un cryptage de canal+ !

- Sous le super et merveuilleux IE7, même problème avec en plus un décalage sur la droite pour le menu déroulant: il ne vient pas dessous (là encore je vous renvoi vers ma page test http://paulcostaseca.mas-vidalou.com/newindex.html )

voici le 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
119
120
121
122
123
<!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>
<link rel="stylesheet" type="text/css" href="newstyle.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>
 
<body>
<div id="contenu">
 <!-- Début du menu déroulant-->
 
   <div id="menu">
 
   <ul id="menuDeroulant">
 
			<li><a href="#">Notre société</a>
 
				<ul class="sousMenu">
 
					<li><a href="#">Mot du président</a></li>
 
					<li><a href="#">L'entreprise</a></li>
 
					<li><a href="#">Notre équipe</a></li>
 
					<li><a href="#">Chiffres clés</a></li>
 
					<li><a href="#">Nos références</a></li>
 
					<li><a href="#">Nos partenaires</a></li>
				</ul>
			</li>
 
 
 
			<li><a href="#">Nos services </a>
 
				<ul class="sousMenu">	
 
					<li><a href="#">Audit</a></li>
 
					<li><a href="#">Conseil avant-vente</a></li>
 
					<li><a href="#">Conseil infrastructure</a></li>
 
					<li><a href="#">Distribution</a></li>
 
					<li><a href="#">Administration</a></li>
 
					<li><a href="#">Expertise</a></li>
 
					<li><a href="#">Gestion de projets</a></li>
 
					<li><a href="#">Installation déploiement</a></li>
 
					<li><a href="#">Help desk</a></li>
 
					<li><a href="#">Transfert de compétences</a></li>
 
					<li><a href="#">Support</a></li>
				</ul>
			</li>
 
 
 
			<li><a href="#">Actualités</a></li>
 
 
 
			<li><a href="#">Nous contacter</a></li>
 
 
 
			<li><a href="#">Recrutement</a>
 
				<ul class="sousMenu">
 
					<li><a href="#">La vie chez EI</a></li>
 
					<li><a href="#">Offres d'emploi</a></li>
 
					<li><a href="#">Les métiers</a></li>
				</ul>
			</li>
 
 
 
			<li><a href="#">Intranet</a>
 
				<ul class="sousMenu">
 
					<li><a href="#">Equipier</a></li>
 
					<li><a href="#">Client</a></li>
 
					<li><a href="#">Partenaires</a></li>
				</ul>	
			</li>
     </ul>
 
 
 
  </div>
<div id="flash">
  <ul id="menuDeroulant">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="855" height="399">
      <param name="movie" value="image/aeffacer.swf" />
      <param name="quality" value="high" />
	  <param name="wmode" value="transparent" />
      <embed src="image/aeffacer.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="855" height="399"></embed>
    </object>
  </ul>
</div>
</div>
</body>
</html>

Voici le 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
#contenu {
width: 100%;
max-width: 1024px;
min-width: 800px;
}
 
#menuDeroulant
 
{
 
 text-align: center;
 
 list-style-type: none;
 
 margin: 0;
 
 padding: 0;
 
 border: 0;
 
 width: 780px;
 
 list-style-type: none;
 
 
 top: 0;
 
 left: 0;
 
}
 
#menuDeroulant li
 
{
 
 float: left;
 
 width: 130px;
 
 margin: 0;
 
 padding: 0;
 
 border: 0;
 
}
 
#menuDeroulant .sousMenu
 
{
 
 list-style-type: none;
 
 margin: 0;
 
 padding: 0;
 
 border: 0;
 
}
 
#menuDeroulant .sousMenu li
 
{
 
 float: none;
 
 margin: 0;
 
 padding: 0;
 
 border: 0;
 
}
 
 
 
#menuDeroulant li a:link, #menuDeroulant li a:visited
 
{
 
 display: block;
 
 height: 1%;
 
 color: #FFF;
 
 background: #333366;
 
 margin: 0;
 
 padding: 2px 8px;
 
 border-right: 1px solid white;
 
 text-decoration: none;
 
}
 
#menuDeroulant li a:hover { background-color: black; }
 
#menuDeroulant li a:active { background-color: red; }
 
#menuDeroulant li a:visited { background-color: #333366; }
 
 
 
#menuDeroulant .sousMenu li a:link,
 
#menuDeroulant .sousMenu li a:visited
 
{
 
 display: block;
 
 color: #FFF;
 
 margin: 0;
 
 border: 0;
 
 text-decoration: none;
 background-color:#0000CC;
 
 }
 
#menuDeroulant .sousMenu li a:hover
 
{
 
 background-image: none;
 
 background-color: #999999;
position:absolute;
 
}
 
#menuDeroulant .sousMenu li
 
{
 
 float: none;
 
 margin: 0;
 
 padding: 0;
 
 border: 0;
 
 width: 129px;
 
 border-top: 1px solid transparent;
 
 border-right: 1px solid transparent;
 
}
 
#menuDeroulant .sousMenu
 
{
 
 display: none;
 
 list-style-type: none;
 
 margin: 0;
position:absolute;
 padding: 0;
 
 border: 0;
 
}
 
 
 
#menuDeroulant li:hover > .sousMenu 
 
{ display: block; 
clear:both;
 
}
#flash {
clear:both;
width:100%;
height:300px;
}

Le code du menu déroulant n'est pas de moi

, mais je l'ai quelques peu modifié !

Donc si vous connaissez la solution à mes problèmes, n'hésitez pas !!!!

Merci les amis !

**Macmillenium** · 28/02/2009, 21h13

Bonsoir,

Pour l'effet de sautement, cela vient du positionnement absolue dans le hover :

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
#menuDeroulant .sousMenu li a:hover
 
{
 
 background-image: none;
 background-color: #999999;
 /* position:absolute; */
 
}

Pour le problème de IE (et en règle générale), il faut que #menuDeroulant li soit le référent de son enfant .sousmenu positionné en absolute en ajoutant un position:relative

Code CSS :

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
#menuDeroulant li

{

 float: left;

 width: 130px;
 
 position:relative;
 
 margin: 0;

 padding: 0;

 border: 0;

}

et le placer à gauche :

Code CSS :

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
#menuDeroulant .sousMenu

{

 list-style-type: none;

 margin: 0;

 padding: 0;

 border: 0;
 
 left:0;
 
 top:20px;

}

**polo66** · 28/02/2009, 22h09

merci c'est nikel, et en plus j'ai compris !!!

encore merci et bon weekend

Problème de menu déroulant et flash IE et Firefox

CSS

Discussions similaires

Partager

Partager