Passer de visibility:hidden à visible en Javascript

Version imprimable

17/04/2008, 20h11
bysus

Passer de visibility:hidden à visible en Javascript
Bonjour à tous,
J'aimerai mettre un élément en visibility:hidden dans le css et rendre cet élément visible suite à un mouseOver.
J'ai donc mis en place une fonction setVisibility associée au mouseOver qui consiste à faire ça :
Code:

1 2 3 4 function setVisibility(id) { document.getElementById(id).style.visibility = 'visible'; }
Seulement ça ne fonctionne pas donc si quelqu'un pouvait m'aider, ça m'arrangerait beaucoup, merci :)
Edit: en fait c'est pas que ça ne fonctionne pas mais ça fonctionne mal, ça s'affiche une fois sur 3 ou 4 alors que j'ai mis le mouseOver bien là ou il faut...
En fait j'ai l'impression que le css "se bat" pour que mon élément (<ul>) reste en hidden...
17/04/2008, 20h28
Jumano

Bonsoir,
Pourrais tu nous montrer également le code correspondant aux éléments <ul>
17/04/2008, 20h32
Jumano

Et puis, je vais peut être dire une bétise mais tant pis ... si ton élément <ul> est "hidden" je ne pense pas que l'on puisse faire un onmouseover dessus ...:roll:

Merci de tenter de m'aider :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<dt>
   <a href="./monde3D.html" onMouseOver="document.boutonKidnetServices.src='./images/boutonKidnetServices_fonce.gif';" onMouseOut="document.boutonKidnetServices.src='./images/boutonKidnetServices_clair.gif';">
<img src="./images/boutonKidnetServices_clair.gif" name="boutonKidnetServices">
   </a>
</dt>
   <dd id="smenu5" onmouseover="setVisibility('menu5');">
      <ul class="menu5" id="menu5"><br>
	<li> 
           <a href="./monde3D.html">
	      <div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> Un monde en 3D 
               </div>
           </a>
         </li>

17/04/2008, 20h48
Jumano

Et le code de ta class="menu5" ... ;)

Code:

1 2 3 4 5 6 7 8 9 10 11 #menuBas ul.menu5 { visibility:hidden; margin:0; background-image: url(../images/sousMenuBas1.png); background-position: 0 0px; background-repeat: no-repeat; z-index:60; width:145px; height:505px; }
Encore une fois, merci car là je désespère (je suis toujours au boulot alors que je suis censé finir à 17h :cry: )

17/04/2008, 21h15
Jumano
Bon, je ne suis pas très fort en CSS, mais je pense que c'est au niveau du nom de ta classe dans la partie CSS :
En faisant comme ceci est ce que cela fonctionne :
Code:

1 2 3 4 .menu5 { .......... }
17/04/2008, 21h25
bysus

Non, aucun changement :(
17/04/2008, 21h32
Jumano

Et si tu enlève dans ton css cette ligne là :

Code:

background-image: url(../images/sousMenuBas1.png);
17/04/2008, 21h34
bysus

En fait, mon but est de faire un menu déroulant.
Et à la base j'avais tout mis visible dans le css et j'exécutais au chargement de la page, une fonction javascript qui rendait tout invisible.
Seulement je ne sais pas si ça vient de onload ou pas mais les menus apparaissaient une fraction de seconde avant de disparaitre et c'était assez désagréable. (vu que c'était appelé par onload, je pense que les sous-menus apparaissaient le temps que la page charge...).
J'ai donc voulu faire l'inverse (mais pour avoir le même résultat bien sûr) avec le code donné dans les posts précédents.
Maintenant, le problème est que les menus ne réapparaissent plus du tout (j'ai dû changer quelque chose depuis mon premier post car les sous-menus n'apparaissent vraiment plus maintenant!).
Je ne vois vraiment pas comment résoudre le problème, j'ai lu pas mal de forums et je ne vois vraiment pas quoi tenter...

Edit: non, aucun changement non plus.
17/04/2008, 21h39
Jumano

As tu été voir la Galerie CSS ici, il y a plein de mune peut être trouveras tu une solution ... ;) ... Bon courage et ne tarde pas trop au boulot quand même ... :lol:
17/04/2008, 21h43
bysus

Merci, même si j'ai déjà à peu près tout testé :?
Pour le boulot, pas le choix : il faut que le site soit mis en ligne demain avant midi et je ne suis que stagiaire (en licence)donc vraiment pas un pro.
17/04/2008, 21h50
Jumano

Ou alors donne tout le code de ta page et de ton fichier CSS ...

Ok ben bonne chance car c'est bien long mais la majeur partie n'est pas intéressante...
A noter que j'ai, sur cette page, un menu déroulant vertical qui fonctionne très bien mais apparemment je ne peux pas avoir le même en horizontal sur la même page (les propriétés du premier sont appliquées au deuxième donc forcément ça s'affiche n'importe comment).

Code:

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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
 
 
 
	<head>
		<!-- script du menu -->
		<script type="text/javascript" src="./javascript/dynMenu.js"></script>
		 <!-- détéction du navigateur -->
		<script type="text/javascript" src="./javascript/browserdetect.js"></script>
		<!-- pour le menu bas-->
		<script type="text/javascript" src="./javascript/menu.js"></script>
			<title>3D2plus - Bienvenue</title>		
	</head>
	<body>
 
		<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1"/>
		<link href="./stylesheet/style2.css" rel="stylesheet" type="text/css">
		<table border="0" width="100%" height="90%" cellspacing="0" cellpadding="0"><!--TABLEAU PRINCIPAL CONTENANT TOUTE LA PAGE-->
			<tr ><!-- 1.0 logo et menu de gauche -->
				<td rowspan="3" background="./images/blocgauche1024.png" color="white" width="250" align="left" valign="top" cellpadding="0"> <!-- 1.1 et 2.1 (rowspan) -->
					<div  id="logo_3d2plus_haut">	
						<a href="./index.html">
							<img src="./images/logo.gif"  border="0">
						</a>
					</div>	
					<ul id="menu">
					    <li>
							<a href="#menu1">
								<img src="./images/bouton3d2PlusSociete_clair.gif" name="bouton3d2PlusSociete">
							</a>
					        <ul class="menu1">
					            <li>
									<a href="./pages/historique.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Historique</div>
									</a>
								</li>
					            <li>
									<a href="./pages/equipe.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">L'équipe</div>
									</a>
								</li>
								<li>
									<a href="./pages/partenaires.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Partenaires</div>
									</a>
								</li>
								<li>
									<a href="./pages/investisseurs.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Investisseurs</div>
									</a>
								</li>
								<li>
									<a href="./pages/references.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Références</div>
									</a>
								</li>
								<li>
									<a href="./pages/emplois.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Stages & Emplois</div>
									</a>
								</li>
					        </ul>
					    </li>
						<li>
							<a href="#">
								<img src="./images/bouton3d2PlusPresse_clair.gif" name="bouton3d2PlusPresse">
							</a>	
					        <ul class="menu2" id="menu2">
					            <li>
									<a href="./pages/communiquezPresse.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">
										Communiqués de presse
										</div>
									</a>
								</li>
					            <li>
									<a href="./pages/phototheque.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">
										Photothèque
										</div>
									</a>
								</li>
					            <li>
									<a href="./pages/logo3D2Plus.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">
										Logo 3D2+
										</div>
									</a>
								</li>	
								<li>
									<a href="./pages/logoKidnet.html">
										<div id="txtSsMenu" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">
										Image et Logo Kidnet
										</div>
									</a>
								</li>
					        </ul>
					    </li>
						<a href="./pages/services.html" onMouseOver="document.bouton3d2PlusServices.src='./images/bouton3d2PlusServices_fonce.gif';" onMouseOut="document.bouton3d2PlusServices.src='./images/bouton3d2PlusServices_clair.gif';">
							<img src="./images/bouton3d2PlusServices_clair.gif" name="bouton3d2PlusServices">
						</a>
						<a href="./pages/contact.html" onMouseOver="document.bouton3d2PlusContact.src='./images/bouton3d2PlusContact_fonce.gif';" onMouseOut="document.bouton3d2PlusContact.src='./images/bouton3d2PlusContact_clair.gif';">
							<img src="./images/bouton3d2PlusContact_clair.gif" name="bouton3d2PlusContact">
						</a>
					</ul>
					<script type="text/javascript">
						initMenu();
					</script>
					<br>
					<div id="newsletter1">
						Recevez <br> 3D2+ INFOS,
					</div>
					<div id="newsletter2">
						<br>l'actualité de 3D2+ par mail
						<form method="post" action="./wanewsletter/subscribe.php">
									<input type="text" name="email" maxlength="100" />
									<input type="hidden" name="format" value="1" />
									<input type="hidden" name="liste" value="1" />
									<input type="submit" name="wanewsletter" value="OK" />
								</form>
					</div>
				</td>
			</tr>
			<tr> 
				<td width="100%" valign="top" style="background-color:white"> <!--2.1 sur la meme ligne que le menu de gauche (à cause du rowspan) : contenu  -->
					<table width="100%" border="0" cellpadding="15" cellspacing="0" background="./images/bloccontenu.gif" style="background-color:white">
						<tr height="60">
							<td>
							<h2>
								VIVRE LE <b>NUMERIQUE</b> COMME LE <b>REEL</b>
							</h2>
							</td>
							<td>
						<span style="position: absolute; top: 50px; right: 0px;  z-index:0">
								<img src="./images/man3.gif" width="380">
						</span>
							</td>
						</tr>
						<tr>
							<td>
 
							</td>
						</tr>	
						<tr>
							<td height="130px">
							</td>
						</tr>
						<tr style="background-color:white">
							<td width="80%">
							<h1>
									Bienvenue
							</h1>
							<h6>
							<p>	04/04/08 : <b> Playmobil, 1er partenaire à rejoindre KidNet avec la Cité des métiers,</b> un 
							espace en 3D dans lequel les enfants peuvent découvrir 10 métiers qui les passionnent. Présenté de
							façon ludique, chaque métier est mis en scène avec des personnages Playmobil. Ce nouveau KidClub est
							gratuit et ouvert à tout KidNaute venu s’inscrire sur 
							www.kidnet.fr. Avec la cité des métiers, Playmobil renforce ainsi
							sa connivence avec les enfants, déjà fidèles à la marque.
							</p>
							<br>
							<p> 11/03/08 : <b>3D2+ a été sélectionnée par Innovact’2008</b> pour participer au forum des 
							capitaux qui se tiendra dans le cadre de cette manifestation à Reims le 18 et 19 Mars 2008. 
							Inscription : <a href="http://www.innovact.com"> www.innovact.com </a>. 
							</p>
							<br>
							<p> 13/02/08 : <b> <a href="http://www.lefigaro.fr/hightech/2008/02/13/01007-20080213ARTFIG00371-les-enfants-aussi-ont-leurs-univers-virtuels.php">
							Le Figaro parle de 3D2+</a></b> dans un article dédié aux univers virtuels pour enfants. KidNet 
							est présenté comme « univers en 3D à contenu éducatif et sécurisé ».
							</p>
							</h6>
							</td>
							<td width="20%">
							</td>
						</tr>
						<tr>
						<td><br><br>
							<div id="img_abonnez_vous">
								<img src="./images/persoAbonnezVous.gif">
							</div>
							<div id="logo_kidnet">
								<a href="http://www.kidnet.fr"> <img src="./images/logoKidnet.gif" width="80" height="80" > </a>
							</div>
						</td>
					</tr>
					</table>
				</td>
			</tr>
			<tr style="background-color:white">
				<td colspan="2" background="./images/mire4.gif" height="15px" width="100%" style="background-repeat:no-repeat; background-position:bottom">
				</td>
			</tr>
			<tr> <!-- 3.0 logo bas gauche et menu bas droite -->
				<td valign="top" background="./images/fond3D2plus2.gif" style="background-repeat:no-repeat">
				</td>
				<td align="left">
				<table border="0"  cellspacing="25" cellpadding="0" height="180" align="right" style="background-repeat:repeat-y; background-color:#E0E028"  background="./images/barreBas2.gif"> <!--nouveau sous tableau pour le menu de bas à droite -->
					<tr height="100" >  <!-- pour l'instant seulement images mais après mettre le menu -->
						<td width="60%" >
						</td>
						<td>
							<div id="menuBas">
								<dl>
									<dt onmouseover="montre('smenu5');">
										<a href="./monde3D.html" onMouseOver="document.boutonKidnetServices.src='./images/boutonKidnetServices_fonce.gif';" onMouseOut="document.boutonKidnetServices.src='./images/boutonKidnetServices_clair.gif';">
											<img src="./images/boutonKidnetServices_clair.gif" name="boutonKidnetServices">
										</a>
									</dt>
									<dd id="smenu5" onmouseover="montre('smenu5');">
										<ul class="menu5" id="menu5">
											<br>
											<li>
											<a href="./monde3D.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> Un monde en 3D </div>
											</a>
											</li>
												<li>
											<a href="./pour6-12.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">  Pour les 6 - 12 </div>
											</a>
											</li>
											<li>
											<a href="./interface3D.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">   Interface 3D </div>
											</a>
											</li>											
											<li>
											<a href="./communauteSecurisee.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	 Communauté <br>  sécurisée </div>
											</a>
											</li>
											<li>
											<a href="./espacePersonnel.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	  Espace <br>  personnel</div>
											</a>
											</li>
											<li>
											<a href="./contenusEducatifs.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	 Contenus <br>  ludo-éducatifs </div>
											</a>
											</li>
											<li>
											<a href="./nouveauRegard.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	 Nouveau regard <br>  sur Internet </div>
											</a>
											</li>
											<li>
											<a href="./ethique.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> Charte d'éthique</div>
											</a>
											</li>
										</ul>
									</dd>
								</dl>
							</div>
						</td>
						<td>
							<a href="./actuKidnet.html" onMouseOver="document.boutonKidnetActu.src='./images/boutonKidnetActu_fonce.gif';" onMouseOut="document.boutonKidnetActu.src='./images/boutonKidnetActu_clair.gif';">
								<img src="./images/boutonKidnetActu_clair.gif" name="boutonKidnetActu">
							</a>
						</td>
						<td> 
							<div id="menuBas">
								<dl>
									<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
										<a href="./devenirPartenaire.html" onMouseOver="document.boutonKidnetPartenaires.src='./images/boutonKidnetPartenaires_fonce.gif';" onMouseOut="document.boutonKidnetPartenaires.src='./images/boutonKidnetPartenaires_clair.gif';">
											<img src="./images/boutonKidnetPartenaires_clair.gif" name="boutonKidnetPartenaires">
										</a>
									</dt>
									<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
										<ul class="menu7">
											<br> 
											<li>
											<a href="./devenirPartenaire.html#communiquer">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> Communiquer <br> au sein de <br> Kidnet </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#devenir_editeur">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	<br>  Devenir Editeur </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#etre_diffuseur">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> <br>Etre diffuseur </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#vendre_kidnet">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	<br>  Vendre Kidnet </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#etre_partenaire">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">  <br>Etre Partenaire Technique</div>
											</a>
											</li>
										</ul>
									</dd>
								</dl>
							</div>
						</td>
					</tr>
					<tr height="60">
						<td colspan="4" height="20px"align="center" id="liens_bas">
							<a href="./pages/mentionsLegales.html">Mentions légales</a>
							/
							<a href="./pages/plan.html">Plan du Site</a>
							/
							<a href="./pages/liens.html">Liens</a>
							/
							<a href="./pages/aPropos.html">A propos </a>
						</td>
					</tr> 
				</table>
				</td>
			</tr>
		</table>

Le CSS

Code:

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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
 
body {
margin:0px 0px 0px 0px;
padding: 0;
font-family: Arial;
font-weight: 500;
text-align: center;
background-color: white;
background-image: url('../images/blocgauche1024.png');
a:link: #FF9900;
}
ul {
behavior: url(./iepngfix.htc) }
img{
border:0;
}
 
a:link{
color: #FF9900;
}
/*début menu*/
 
#menu ul.menu1 {
/*margin:5px;*/
background-image: url(../images/sousMenu1.4.png);
background-position: 0 0px;
background-repeat: no-repeat;
width:245px;
height:300px;
}
#menu ul.menu4 {
/*margin:5px;*/
background-image: url(../images/sousMenu4.2.png);
background-position: 0 0px;
background-repeat: no-repeat;
width:245px;
height:228px;
}
#txtSsMenu{
color: #7F0000;
text-decoration:none;
text-align:center;
font-size : 17;
font-weight: bold;
}
#menu {
width: 10em;
z-index : 2;
}
#menu dt {
margin: 0px;/*peut etre remettre à 15 car ça ne change rien*/
padding: 0;/*peut etre remettre à 15 car ça ne change rien*/
list-style-type: none;/*peut etre remettre à 15 car ça ne change rien*/
z-index : 2;/*peut etre remettre à 15 car ça ne change rien*/
cursor: pointer;
height: 70px;
line-height: 5px;
text-align: left;
font-weight: bold;
}
#menu dl {
margin: 0px;/*peut etre remettre à 15 car ça ne change rien*/
padding: 0;
list-style-type: none;
z-index : 2;
}
 
/*avec le margin du dt et dl à 0, ça change rien : bug dans ie et ff
quand on change le dd à 0, ça marche sous ff mais pas sous ie
*/
#menu dd {
margin: 0px;/*peut etre remettre à 15 car ça ne change rien*/
padding: 0;/*peut etre remettre à 15 car ça ne change rien*/
list-style-type: none;/*peut etre remettre à 15 car ça ne change rien*/
position: absolute;
z-index: 100;
left: 140px;/*à changer pour l'écartement horizontal entre menus et sous menus*/
margin-top: -77px;
/*width: 10em;*/
}
#menu ul {
margin: 0px;
padding: 0;
list-style-type: none;
z-index : 2;
}
#menu li {
text-align: center;
font-size: 85%;
height: 45px;
line-height: 18px;
margin: 5px;
padding: 0;
list-style-type: none;
z-index : 2;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
z-index: 2;
}
#menu li a:hover {
text-decoration: none;
}
/*fin menu*/
 
/*debut menu bas*/
#txtSsMenuBas{
color: #7F0000;
text-decoration: none;
text-align: center;
width:145px;
font-size : 17;
font-weight: bold;
}
#menuBas ul.menu5 {
margin:0;
background-image: url(../images/sousMenuBas1.png);
background-position: 0 0px;
background-repeat: no-repeat;
z-index:60;
width:145px;
height:505px;
}
#menuBas ul.menu7 {
margin:0;
background-image: url(../images/sousMenuBas2.png);
background-position: 0 0px;
background-repeat: no-repeat;
z-index:60;
width:145px;
height:395px;
text-align: center;
}
#menuBas {
width: 10em;
z-index : 60;
}
#menuBas dl{
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 156px;
position: relative;
z-index:60;
}
#menuBas dt{
height:100%;
width:155px;
margin: 0;
padding: 0;
z-index:60;
list-style-type: none;
text-align:left;
cursor: pointer;
}
 
#menuBas dd{
position: absolute;
bottom:75px;/*distance verticale entre le bas et le sous menu*/
left: 5px;
width:100%;
margin: 0;
padding: 0;
z-index:60;
list-style-type: none;
}
 
#menuBas ul {
margin: 0px;
padding: 0;
list-style-type: none;
z-index : 60;
}
#menuBas li {
text-align: center;
font-size: 85%;
height: 55px;
line-height: 18px;
margin: 0px;
padding: 0;
list-style-type: none;
z-index : 60;
}
#menuBas li a, #menuBas dt a {
text-decoration: none;
display: block;
z-index: 60;
}
#menuBas li a:hover {
text-decoration: none;
}
 
/*fin menu bas*/
 
#img_abonnez_vous{
position : relative;
left : -75px;
bottom: 220px;
z-index : 1;
width : 350px;
}
 
#logo_kidnet{
position : relative;
left : 105px;
bottom : 285px;
z-index : 2;
width : 50px;
}
 
#liens_bas{
color : #FF9900;
position:relative;
bottom : -10px;
width: 100%;
text-align: center;
}
 
#logo_3d2plus_bas{
position : absolute;
bottom:0px;
left : 1px;
z-index:0;
}
 
#logo_3d2plus_haut{
position : relative;
top:7px;
left:7px;
}
 
p {/*mise en forme des paragraphes*/
text-align: justify;
z-index:99;/*change rien...*/
}
 
h1 {/*le titre (bienvenue, historique,...)*/
position : absolute;
top : 225px;
color:red;
font-size: 27pt;
font-family: sans-serif;
font-weight: 550;
}
 
h2{/*vivre le numérique...*/
position : absolute ;
top : 143px ; 
color: E1631C;
font-size: 18pt;
font-family: Arial;
font-weight: 500;
z-index:100;
}
 
h6{/*le texte*/
position : relative;
top : 10px ;
font-size:17;
font-weight:normal;
font-family:Arial;
background-color:white;
}
 
h4{/*Recevez 3D2+ INFOS,*/
text-align:center;
color: red;
position : relative;
left :20px;
top: -50px;
font-family: Arial;
font-size: 15pt;
font-weight: bold;
z-index : 2;
width: 185px;
}
 
h5{/*le formulaire de newsletter*/
text-align:center;
position : relative;
top: -70px;
left:0px;
z-index: 10;
font-family: Arial;
font-weight: 300;
font-size: 10pt;
z-index : 2;
}

Ya quelques trucs qui servent à rien (style z-index:10) mais j'ai fait des dizaines de tests dans tous les sens et j'ai pas encore fait le ménage...

17/04/2008, 22h11
Jumano

Tu devrais déjà replacer la balise <meta> et la balise <link> qui sont justes en dessous de <body>, et les remettre dans <head>

Citation:

Envoyé par jumano

Et puis, je vais peut être dire une bétise mais tant pis ... si ton élément <ul> est "hidden" je ne pense pas que l'on puisse faire un onmouseover dessus ...:roll:

Effectivement.

Si tu testes ca:
Code:

1 2 3 <div style="background-color:red; height:50px; width:100px;"></div> <div style="background-color:blue; visibility:hidden; height:50px; width:100px;" onMouseOver="console.log('over')"></div> <div style="background-color:red; height:50px; width:100px;"></div>
En passant sur la div du milieu il ne se passera rien. Si maintenant tu enleves le visibility:hidden, tu a bien le log qui s'exécute...

18/04/2008, 10h16
bysus

Ouais, je teste ça tout à l'heure car là j'étais parti sur un autre truc trouvé sur le net. Merci en tout cas
18/04/2008, 11h17
Matthieu2000

Code:

<ul class="menu5" id="menu5" style="">

ajoute l'attribut style...

Bon ben j'ai trouvé une nouvelle solution pour mon menu déroulant, ça marche presque, sauf sous IE6 : le menu disparait lorsqu'on veut aller dessus. J'ai vérifié, normalement ça devrait vraiment marcher... je vous donne le code du menu concerné :

Code:

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
<div id="menuBas">
								<ul>		
									<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);">
										<a href="./monde3D.html" onMouseOver="document.boutonKidnetServices.src='./images/boutonKidnetServices_fonce.gif';" onMouseOut="document.boutonKidnetServices.src='./images/boutonKidnetServices_clair.gif';">
											<img src="./images/boutonKidnetServices_clair.gif" name="boutonKidnetServices">
										</a>
										<ul class="smenu3" id="smenu3">
											<li>
											<a href="./monde3D.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> Un monde en 3D </div>
											</a>
											</li>
											<li>
											<a href="./pour6-12.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">  Pour les 6 - 12 </div>
											</a>
											</li>
											<li>
											<a href="./interface3D.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">   Interface 3D </div>
											</a>
											</li>											
											<li>
											<a href="./communauteSecurisee.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	 Communauté sécurisée </div>
											</a>
											</li>
											<li>
											<a href="./espacePersonnel.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	  Espace personnel</div>
											</a>
											</li>
											<li>
											<a href="./contenusEducatifs.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	 Contenus  ludo-éducatifs </div>
											</a>
											</li>
											<li>
											<a href="./nouveauRegard.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">	 Nouveau regard  sur Internet </div>
											</a>
											</li>
											<li>
											<a href="./ethique.html">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> Charte d'éthique</div>
											</a>
											</li>
										</ul>			
									</li>
								</ul>	
							</div>	
						</td>
						<td>
							<a href="./actuKidnet.html" onMouseOver="document.boutonKidnetActu.src='./images/boutonKidnetActu_fonce.gif';" onMouseOut="document.boutonKidnetActu.src='./images/boutonKidnetActu_clair.gif';">
								<img src="./images/boutonKidnetActu_clair.gif" name="boutonKidnetActu">
							</a>
						</td>
						<td> 
							<div id="menuBas">
								<ul>
									<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);">
										<a href="./monde3D.html" onMouseOver="document.boutonKidnetServices.src='./images/boutonKidnetServices_fonce.gif';" onMouseOut="document.boutonKidnetServices.src='./images/boutonKidnetServices_clair.gif';">
											<img src="./images/boutonKidnetServices_clair.gif" name="boutonKidnetServices">
										</a>
										<ul class="smenu2" id="smenu2">
											<li>
											<a href="./devenirPartenaire.html#communiquer">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';"> Communiquer au sein de Kidnet </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#devenir_editeur">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Devenir Editeur </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#etre_diffuseur">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Etre diffuseur </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#vendre_kidnet">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Vendre Kidnet </div>
											</a>
											</li>
											<li>
											<a href="./devenirPartenaire.html#etre_partenaire">
												<div id="txtSsMenuBas" onmouseover="this.style.color='#FF2525';" onmouseout="this.style.color='#7F0000';">Etre Partenaire Technique</div>
											</a>
											</li>
										</ul>			
									</li>
								</ul>	
							</div>

et voici le css :

Code:

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
#menuBas {
/*width: 100px;
z-index : 60;*/
padding:0;
margin:0;
}
 
#menuBas ul {
margin: 0px;
padding: 0;
list-style-type: none;
z-index : 60;
/*border:2px;*/
position: relative;
top:0px;
}
 
#menuBas li {
text-align: center;
font-size: 85%;
/*height: 25px;*/
/*line-height: 35px;*/
margin: 0px;
padding: 0;
list-style-type: none;
z-index : 60;
}
 
#menuBas li a{
text-decoration: none;
display: block;
z-index: 60;
}
 
#menuBas li a:hover {
text-decoration: none;
}
 
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menuBas ul li {
width:125px;
cursor:pointer;
display:block;
background:none;
/*height:22px;*/
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menuBas ul li ul {
display:none;
position: absolute;
width:125px;
border-top:none;
/*top:22px;*/
left:0;
}
 
#menuBas ul li ul li {
/*line-height:35px;*/
}
 
#menuBas ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
}
 
#txtSsMenuBas{
color: #7F0000;
text-decoration: none;
text-align: center;
width:145px;
font-size : 17;
font-weight: bold;
}
 
#menuBas ul.smenu3 li {/*celui de gauche*/
/*margin-top:5px;
margin-bottom:25px;*/
/*line-height:40px;/*fonctionne mais chaque li part du haut et se superpose à la précédente*/
position:relative;
}
 
#menuBas ul.smenu2 li {/*celui de droite*/
line-height:40px;/*fonctionne mais chaque li part du haut et se superpose à la précédente*/
position:relative;/*mieux que absolute : ne partent pas vraiment tous du même point*/
/*padding-bottom:10px;
padding-top:15px;*/
}
 
#menuBas ul.smenu3 {/*celui de gauche*/
margin:0;
position:absolute;
top:-485px;
background-image: url(../images/sousMenuBas1.png);
background-position: 0 0px;
background-repeat: no-repeat;
z-index:60;
width:145px;
height:505px;
text-align: center;
/*line-height:135px; ne change rien*/
padding-bottom:0px;/*pour ie6 mais ne change rien*/
/*padding-top:15px;*/
}
 
#menuBas ul.smenu2 {/*celui de droite*/
margin:0;
position:absolute;
top:-375px;
background-image: url(../images/sousMenuBas2.png);
background-position: 0 0px;
background-repeat: no-repeat;
z-index:60;
width:145px;
height:395px;
text-align: center;
padding-bottom:0px;/*pour ie6 mais ne change rien*/
/*padding-top:25px;*/
/*line-height:135px; ne change rien*/
}

Merci d'avance!