Menu déroulant et message d'erreur

**aragorn23** · 03/09/2007, 23h40

J'ai un menu déroulant horizontal crée en Javascript et CSS.

Lorsque j'affiche un message dans mon programme via du javascript et une boîte alert je vois apparaître en arrière plus le liste des options du menu mais non formatée par la CSS. Un fois répondu au message monmenu s'affiche correctement.

Ma feuille de style :

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
 
body {
margin: 0;
padding: 0;
background: #FEEEBC;
font: 12px verdana, sans-serif;
}
div#contenu {
	width:1200px;
	height:600px;
	top:70px;
	left:10px;
	float:left; 
	z-index: 1;
	position:absolute;
	}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width:100%;
top:0px;
z-index: 2;
float:left;
position:absolute;
}
#menu dl {
float: left;
width: 15em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #3B4E77;
color: #fff;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
color: #fff;
background: #3B4E77;
}
#menu li {
text-align: center;
background: #3B4E77;
margin: 10px;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #F2462E;
border-right: 1px solid #fff;
}

Mon code HTML du menu :

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
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="Menu1.php">Menu1</a></dt>
	</dl>
 
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Sous-menu 1.</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="SousMenu11.php">Sous-menu 1.1</a></li>
 
					<li><a href="SousMenu12.php">Sous-menu 1.2</a></li>
					<li><a href="SousMenu13.php">Sous-menu 1.3</a></li>
				</ul>
 
			</dd>
	</dl>
 
</div>

Le menu est appelé via un require dans mon programme principal.
Et le message d'erreur est du javascript .

Merci d'avance.

**Bisûnûrs** · 04/09/2007, 07h55

C'est normal, avec ce menu, tes sous-menus ne se cachent qu'à la fin du cargement complet de ta page. Si tu mets une alerte Javascript ça bloque le chargement de la page jusqu'au moment où tu valide la boîte de dialogue et donc laisse en attendant tes sous-menus visibles.

(J'espère avoir bien compris ton problème. :/)

**aragorn23** · 06/09/2007, 21h52

Merci pour ta réponse.
Mais j'ai résolu mon problème en positionnant les instructions HTML en début de ma page PHP

Code :

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

1
2
3
4
5
6
7
8
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="CSS/Level3_2.css" rel="stylesheet" type="text/css" />
<title>Titre</title>
</head>

Ce bloc était en fait placé après un certain nombre d'instructions en PHP.

Merci.

Menu déroulant et message d'erreur

CSS

Vue hybride

Discussions similaires

Partager

Partager