Menu horizontal qui ne déroule pas sous IE et animation flash en dessous qui ne s'affiche pas

**wallash** · 26/08/2009, 18h29

salut à tous et je crie au secours, c'est vrai qu'il y a des solutions similaires à mon problème sur le forum mais j'ai essayer de suivre ces solutions sans succès. ce qui se passe c'est que mon menu déroulant horizontal ne se déroule pas sous IE 6 et l'animation flash qui est juste en dessous ne s'affiche pas également sous IE 6. j'ai vivement besoin de votre aide s'il vous plait !

code html

Code html :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if !IE]> <-->
<link rel="stylesheet" href="css/general.css" type="text/css" />
<!--> <![endif]-->
 
<!--[if IE]> 
<link rel="stylesheet" href="css/mie.css" type="text/css" />
<![endif]-->
</head>
 
<body>
      <div id="contenant">
	       <div id="haut">
                <div id="menu_haut">
				<b><a href="index.php">Home</a> | <a href="index.php?page=sitemap">Sitemap</a> | <a href="french/index.php">Version Française</a></b>
				</div>
		        <div id="baniere"><div id="logo"></div></div>
		        <div id="menu_horizontal">
				<div id="menu">
				     <ul>
				        <li style="border-left: 1px solid #ccc;"><a href="index.php?page=compro">Company Profile</a>
				            <ul>
					            <li><a href="index.php?page=profile">Profile</a></li>
						        <li><a href="index.php?page=vimi">Vision & Mission</a></li>
						        <li><a href="index.php?page=value">Value</a></li>
				            </ul>
						</li>	
						<li><a href="index.php?page=solutions">Solutions</a>
				            <ul>
							    <li><a href="index.php?page=fiberins">Fiber installation</a></li>
						        <li><a href="index.php?page=sitecons">Site Construction</a></li>
						        <li><a href="index.php?page=solarener">Solar Energy Solution</a></li>
								<li><a href="index.php?page=turnso">Turnkey Solution</a></li>
				            </ul>
						</li>	
						<li><a href="index.php?page=partners">Partners</a>
						    <ul>
					            <li><a href="#">LIKUSASA</a></li>
				            </ul>
						</li>
						<li><a href="index.php?page=careers">Careers</a></li>
					    <li><a href="index.php?page=contact">Contact us</a></li>
				    </ul>
				</div>
				</div>				
		        <div id="flash">
				<object type="application/x-shockwave-flash" data="images/f_ngf.swf" width="900" height="153">
				<param name="movie" value="ADRESSE" /><param name="allowFullScreen" value="true"/>
				<param name="WMODE" value="opaque" />
				</object> 
				</div>
		   </div>
		   <div id="milieu">
                <div id="menu_gauche">
				<?php include("menu/menu.php");?>
				</div>
		        <div id="contenu">
				     <?php include("contenu/content.php"); ?> 
			    </div>
		   </div>
		   <div id="bas">
		        <div id="pied_page">Copyright 2009 © NGF Power Technologies.<br>All rights reserved.<br>email: mail@ngf-powertechnologies.com </div>
		   </div>
     </div>
</body>
</html>

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
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
 
/* CSS Document */
 
/* CSS Document */
body{
font: 13px Helvetica,Arial,sans-serif,Bookman old style;
/*background: url(../images/bg.jpg) repeat-x; */
background-color: #FF8C00;
}
body a{
color: #080DCD;
}
img,a{
border: 0px;
}
.c_text{
width: 450px;
}
.solutions{
text-decoration: underline;
padding-top: 6px;
list-style: url(../images/arrow.png) outside;
}
.compro,a{
text-decoration: underline;
padding-top: 6px;
padding-right: 2px;
list-style: url(../images/arrow.png);
}
.home{
text-decoration: underline;
padding-top: 6px;
list-style: url(../images/arrow.png);
}
.partners{
text-decoration: underline;
padding-top: 6px;
list-style: url(../images/arrow.png);
}
.careers{
text-decoration: underline;
padding-top: 6px;
list-style: url(../images/arrow.png);
}
.contact{
text-decoration: underline;
padding-top: 6px;
list-style: url(../images/arrow.png);
}
#contenant{
width:900px;
height: auto;
border: 1px solid #FFF;
margin-left: auto;
margin-right: auto;
}
#haut{
height: 330px;
border-bottom: 1px solid #ccc;
}
#menu_haut{
height: 20px;
font: 12px Helvetica,Arial,sans-serif;
padding-left: 690px;
padding-top: 5px;
background-color: #fff;
}
#menu_haut a{
color: #080DCD;
font-weight: bold;
text-decoration: none;
}
 
#menu_haut a:hover{
color: #000000;
font-weight: bold;
text-decoration: none;
}
 
#baniere{
height: 120px;
width: 900px;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
#logo{ 
background: transparent url(../images/ngflogorev.png); no-repeat; 
width: 154px;
height: 74px;
position: absolute;
top: 42px;
left:200px;
border: 1px solid #ccc;
background-color: #fff;
}
 
/* debut du menu horizontal */
#menu_horizontal1{
height: 30px;
width: 900px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
border-bottom: 1px solid #ccc;
}
#menu_horizontal{
height: 30px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
border-bottom: 1px solid #ccc;
}
#menu{
height: 30px;
width: 586px;
margin-left: auto;
margin-right: auto; 
}
#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menu li{
margin: auto;
padding: 0;
float: left;
border-right: 1px solid #ccc;
}
#menu li a{
display:block;
padding: 7px;
width: 100px;
color: #fff;
text-decoration: none;
}
#menu ul li ul{
display: none;
}
#menu ul li ul li:hover{
background-color: #000099;
}
 
#menu ul li:hover ul{
display: block;
}
#menu li:hover ul li{
float: none;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
/* background: transparent url("") repeat; */
background-color: #DFDFDF;
}
#menu li ul{
position:absolute;
}
 
/* fin du menu horizontal */
 
#flash{
height: 153px;
background-color:#fff;
}
#milieu{
width: 100%;
height: auto;
}
#menu_gauche{
width: 225px;
height: 250px;
float: left;
padding: auto;
background-color:#fff;
}
#contenu{
width: 674px;
height: 250px;
float: left;
border-left: 1px solid #000099;
background-color: #F5F5F5;
}
/*
#menu_droit{
width: 200px;
height: 498px;
float: right;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color:#FFFFCC;
}
*/
 
.photo{
float: right;
width: 75px;
height: 100px;
margin-top:40px;
margin-right: 5px;
border: 2px solid #ccc;
background-color:#FFFFFF;
}
 
#bas{
height: 60px;
border-right: 1px solid #ccc;
}
#pied_page{
font-family: Helvetica,Arial,sans-serif;
color: #000000;
font-size: 11px;
width: 899px;
height: 52px;
margin: 0;
padding: 8px 0 0 0;
text-align: center;
background: url(../images/pied_bg.jpg) no-repeat;
background-color: #F5F5F5;
}
#wrapper_adress_right{
float: right;
width: 200px;
height: auto;
padding-left: 5px;
}
#wrapper_form{
height: 372px;
width: 337px;
padding-top: 10px;
padding-left: 100px;
color:#FFFFFF;
}
 
#form{
}

**cssman** · 26/08/2009, 18h35

ce code pour le menu déroulant, tu l'as fait tout seul ou tu l'as récupéré quelque part ?

**wallash** · 27/08/2009, 09h32

salut, j'ai récupérer le code dans un site et j'ai essayer de l'adapter pour obtenir ce que je voulais avoir.

**Macmillenium** · 27/08/2009, 09h49

Bonjour,

Envoyé par wallash

ce qui se passe c'est que mon menu déroulant horizontal ne se déroule pas sous IE

Sous IE6, le pseudo-classe dynamique :hover ne fonctionne que sur l'élément A.
Il faut trouver un petit correctif en JS.

Envoyé par wallash

et l'animation flash qui est juste en dessous ne s'affiche pas également sous IE.

Code html :

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

1
2
3
4
5
6
	
<object type="application/x-shockwave-flash" data="images/f_ngf.swf" width="900" height="153">
<param name="movie" value="images/f_ngf.swf" />
<param name="allowFullScreen" value="true"/>
<param name="WMODE" value="opaque" />
</object>

**HiRoN** · 27/08/2009, 09h56

Envoyé par Macmillenium

Il faut trouver un petit correctif en JS.

+1... Comme le hover:whatever

**cssman** · 27/08/2009, 13h31

Le mieux serait de te référer aux cours et tutoriels CSS : http://css.developpez.com/cours/

**wallash** · 27/08/2009, 15h27

Je viens de me rendre compte qu'il faut programmer en javascript pour l'affichage sous IE 6 et comment ? un exemple s'il vous plait

**Macmillenium** · 27/08/2009, 19h04

Envoyé par wallash

salut cssman, exactement c'est dans ce site que j'ai récupérer le code mais je ne me souvenais plus du lien, merci du lien, je viens de me rendre compte qu'il faut programmer en javascript pour l'affichage sous IE 6 et comment ? un exemple s'il vous plait

Si tu ne connais pas assez JavaScript, tu peux tenter le solution de Hiron.

Sinon, inspire toi de l'exemple proposé par desert.

**wallash** · 31/08/2009, 11h49

salut à vous, merci déjà de votre participation à ma difficulté que je commence à résoudre, je me suis donc basé sur une discussion du forum pour pouvoir obtenir ce que je voulais mais cette fois mon menu s'affiche bien sous IE mais il est en l'envers sous Firefox et les autres navigateurs ressent. comment palier à cela svp !

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
 
		        <div id="menu_horizontal">
				<div id="menu">
				    <ul>
					    <li><a href="index.php?page=contact">Contact us</a></li>
						<li><a href="index.php?page=careers">Careers</a></li>
						<li onmouseover="montre('menu_pa',true);" onmouseout="montre('menu_pa',false);"><a href="index.php?page=partners">Partners</a>
						    <ul id="menu_pa">
					            <li><a href="#">LIKUSASA</a></li>
				            </ul>
						</li>
						<li onmouseover="montre('menu_so',true);" onmouseout="montre('menu_so',false);"><a href="index.php?page=solutions">Solutions</a>
				            <ul id="menu_so">
							    <li><a href="index.php?page=fiberins">Fiber installation</a></li>
						        <li><a href="index.php?page=sitecons">Site Construction</a></li>
						        <li><a href="index.php?page=solarener">Solar Energy Solution</a></li>
								<li><a href="index.php?page=turnso">Turnkey Solution</a></li>
				            </ul>
						</li>	
				        <li onmouseover="montre('menu_cp',true);" onmouseout="montre('menu_cp',false);" style="border-left: 1px solid #ccc;"><a href="index.php?page=compro">Company Profile</a>
				            <ul id="menu_cp">
					            <li><a href="index.php?page=profile">Profile</a></li>
						        <li><a href="index.php?page=vimi">Vision & Mission</a></li>
						        <li><a href="index.php?page=value">Value</a></li>
				            </ul>
						</li>	
				    </ul>
				</div>
				</div>

code javascript

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
 
<script>
<!--
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		d.style.display='none'; //on l'efface
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
		{
			c.firstChild.style.color='#39f';
			c.firstChild.style.background='#fff';
		}
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{ 
		d.style.display='block'; //on l'affiche
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
		{
			c.firstChild.style.color='#fff';
			c.firstChild.style.background='#39f';
		}
	}
}
//-->
</script>

code css pour IE

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
 
 
#menu_horizontal{
height: 30px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
}
ul, li {
list-style-type:none;
}
 
#menu ul li {
position:relative;
float:right;
width:100px;
cursor:pointer;
display:block;
background:none;
height:29px;
}
 #menu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menu li{
margin: auto;
padding: 0;
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#menu li a{
display:block;
padding: 7px;
width: 100px;
color: #fff;
text-decoration: none;
}
#menu li:hover ul li{
float: none;
text-align: center;
/* background: transparent url("") repeat; */
background-color: #DFDFDF;
}
 
#menu ul li:hover ul{
display: block;
}
 
 
#menu ul li ul {
display:none;
position:absolute;
width:100px;
border-top:none;
border-left: 1px solid #ccc;
left:0;
}
 
#menu{
height: 30px;
width: 586px;
margin-left: auto;
margin-right: auto; 
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#fff;
display:block;
height:100%;
border-top:1px solid #dddddd;
background-color:#DFDFDF;
}
 
#menu ul li ul li a:hover {
color:#ffffff;
background-color: #000099;
}

code css pour Firefox,opéra.

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
 
 
#menu_horizontal{
height: 30px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
border-bottom: 1px solid #ccc;
}
 
#menu{
height: 30px;
width: 586px;
margin-left: auto;
margin-right: auto; 
}
 
#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
 
#menu li{
margin: auto;
padding: 0;
float: left;
border-right: 1px solid #ccc;
}
 
#menu li a{
display:block;
padding: 7px;
width: 100px;
color: #fff;
text-decoration: none;
}
 
#menu li a:hover{
}
 
#menu ul li ul{
display: none;
}
 
#menu ul li ul li:hover{
background-color: #000099;
}
 
#menu ul li:hover ul{
display: block;
}
 
#menu li:hover ul li{
float: none;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background-color: #DFDFDF;
}
 
#menu li ul{
position:absolute;
}

Menu horizontal qui ne déroule pas sous IE et animation flash en dessous qui ne s'affiche pas

Animation en CSS

Discussions similaires

Partager

Partager