Menu css au dessus d'une iframe ?

**fmargoulin** · 24/04/2008, 06h47

Bonjour,

J'ai réalisé un menu horizontal en suivant les indications présentes ici (premier exemple):
http://css.developpez.com/galerie/?p...us-horizontaux
Mais page est divisée grace à cette méthode :
http://ditch.developpez.com/javascript/partialupdate/

Mon problème est donc que mon menu est masqué par une iframe mais seulement quand le site est sur le serveur de prod... Quand il est sur mon poste tout marche impeccable... Je tourne en rond depuis qq jours, si quelqu'un pouvait m'aider

Voici 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
/********************************/
/*  début menu	déroulant	*/
/********************************/
ul, li {
	list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
	position:relative;
	float:left;
	width:125px;
	cursor:pointer;
	display:block;
	background:none;
	height:22px;
 
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
	display:none;
	position:absolute;
	width:125px;
	border:1px solid #dddddd;
	border-top:none;
	top:22px;
	left:0;
 
}
 
/*sert uniquement pour le mot Accueil*/
#menu ul li a {
	position:relative;
	float:left;
	width:125px;
	cursor:pointer;
	display:block;
	background:none;
	height:22px;
 
} 
 
#menu ul li ul li {
	height:100%;
 
}
 
#menu ul li ul li a {
	color:#3399ff;
	font-size:11px;
	font-weight:normal;
	display:block;
	height:100%;
	border-top:1px solid #dddddd;
 
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
	color:#ffffff;
	background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
	top:0px;
	left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
	left:-127px;
}

Merci par avance

PS : oupss je me suis trompé je n'ai pas posté dans la bonne catégorie, toutes me excuses.

**le_chomeur** · 24/04/2008, 09h24

je t'oriente vers la section css

par contre , regarde du coté des z-index , avec un z-index inférieur pour ton iframe et un supérieur pour ton menu ...

**fmargoulin** · 24/04/2008, 11h20

Merci pour ton action

J'ai beau tout testé, même avec z-index, je n'arrive à rien.

Je pense que c'est du à mon intégration du menu avec le reste du site que j'ai mal foutu... Si jamais une ame charitable peut lire mon code pour me mettre sur une piste (mauvaise intégration du menu, à retravailler par exemple ou qq idées), j'ai enlevé les z-index, voici le fichier 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
{/*Définition du style général de la page*/
	margin:0px;/*Pas de marge*/
	padding:0px;
	background:#ffffff;/*Couleur de fond de la page si rien n'est précisé dans les divisions, la c'est blanc*/
	/*text-align:center;On centre les divisions, right -> collé à droite left -> collé à gauche*/
	z-index:0;
	}
 
body{/*Si rien de précisé, valeur par défaut du body*/
	font-family:Arial, Helvetica, sans-serif;
	}
 
img {/*Si rien de précisé, concernant les images*/
	border:none;
	}
 
a { /*Si rien de précisé, concernant les liens hypertextes*/ 
	color:#000000;
	text-decoration:none;
	text-transform:none;
	}
 
div#centrer {/*centre la page et donne la largeur pour une basse résolution*/
	margin-left:auto;
	margin-right:auto;
	width:100%; /*806px;*/
	}
 
div#bandeau { /*On définit le bandeau*/
	width:100%; /*806px;lageur du bandeau*/
	height:20px; /*hauteur du bandeau*/
	background-color:#6666CC; /*couleur de fond du bandeau*/
	text-align:left;
	font-weight:bord;
	}
 
div#haut_bandeau { /*On définit le haut du bandeau*/
	width:100%; /*806px;lageur du bandeau*/
	height:20px; /*hauteur du bandeau*/
	background-color:#6666CC; /*couleur de fond du bandeau*/
	font-weight:bolder;
	text-align:center;
	}
 
div#contenu {/*On définit le contenu*/
	width:100%; /*600px;lageur du contenu*/
	height:100%;/*400px;hauteur du contenu*/
	background-color:#6666CC;/*couleur de fond du contenu*/
	}
 
div#contenu iframe#FrameMiseAJour {/*On définit pour la frame mise à jours*/
	width:80%; /*600px;lageur du contenu*/
	}
 
div#contenu iframe#FrameNews {/*On définit pour la frame news*/
	width:20%; /*600px;lageur du contenu*/
	}
 
div#piedpage {/*On définit le pied de page*/
	width:776px;/*lageur du pied de page*/
	height:50px;/*hauteur du pied de page*/
	background-color:#1C2079;/*couleur de fond du pied de page*/
	}
 
 
/********************************/
/*  début menu	déroulant	*/
/********************************/
ul, li {
	list-style-type:none;
 
}
 
/*chaque sous-menu*/
#menu ul li {
	position:relative;
	float:left;
	width:125px;
	cursor:pointer;
	display:block;
	background:none;
	height:22px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
	display:none;
	position:absolute;
	width:125px;
	border:1px solid #dddddd;
	border-top:none;
	top:22px;
	left:0;
}
 
/*sert uniquement pour le mot Accueil*/
#menu ul li a {
	position:relative;
	float:left;
	width:125px;
	cursor:pointer;
	display:block
	background:none;
	height:22px;
} 
 
#menu ul li ul li {
	height:100%;
 
}
 
#menu ul li ul li a {
	color:#3399ff;
	font-size:11px;
	font-weight:normal;
	display:block;
	height:100%;
	border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
	color:#ffffff;
	background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
	top:0px;
	left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
	left:-127px;
}

Et la c'est ma page index.htm:

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
<html>
<head>  <!-- Définition du haut de la page -->
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>ePortail - Application Informatique Réservoir - AIRV10</title><!-- Le titre de la page -->
	<link rel="stylesheet" type="text/css" href="./style_div.css"><!-- On appelle style_div.css qui définit le style de la page -->
	<script type="text/javascript" src="./iframe.js"></script><!-- Lien avec le fichier de script javascript pour les iframes-->
 
<div id="centrer"><!-- centre la page et donne la largeur pour une basse résolution -->
<div id="bandeau">
	<div id="haut_bandeau">
		<img src="./imgs_menu/logo-sncf.png" border="0" height="43" width="78" align=left>  <!-- On affiche le logo SNCF -->
		Application Informatique Réservoir - AIR V10 - <!-- Le texte du bandeau -->
		<img src="./imgs_menu/Bandeau07.jpg" border="0" height="43" width="322"><!-- image des réservoirs -->
	</div>
	<br>
	<div id="menu"><!-- Définition du menu dans le bandeau -->
		<ul><li><a href="./index.htm">Accueil</a></li></ul>
		<ul>	<!-- On définir le premier élément du menu -->	
			<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Formation<!-- La sourie passe, on affiche, elle part, on masque-->	
				<ul id="smenu5"><!-- Maintenant sous menu de niveau 1 -->
					<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href=javascript:UpdateEtape1('Formation_en_UFM');">Formation en UFM</a><!-- On envoi le paramètre Formation_en_UFM au javascript (iframe.js)-->
					</li>
					<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">Assistance formation</a>
						<ul id="smenu52"><!-- Maintenant sous menu de niveau 2 -->
							<li onmouseover="montre('smenu522',true);" onmouseout="montre('smenu522',false);"><a href="#">Gestion des réservoirs</a>
							<ul id="smenu522"><!-- Maintenant sous menu de niveau 3 -->
								<li><a href="javascript:UpdateEtape1('Creer_un_reservoir');">Création d'un réservoir</a></li>
								<li><a href="javascript:UpdateEtape1('Reservation_numeros_reservoir');">Réservation numéros réservoirs</a></li>
								<li><a href="javascript:UpdateEtape1('Renumeroter_un_reservoir');">Renuméroter un réservoir</a></li>	
								<li><a href="javascript:UpdateEtape1('Rebuter_un_reservoir');">Rebuter un réservoir</a></li>	
								<li><a href="javascript:UpdateEtape1('Intervention');">Suivi des interventions</a></li>	
								<li><a href="javascript:UpdateEtape1('Fin_de_vie');">Suivi des réservoirs en fin de vie</a></li>	
 
							</ul>	
							</li>
							<li onmouseover="montre('smenu523',true);" onmouseout="montre('smenu523',false);"><a href="javascript:UpdateEtape1('Gestion_vehicules');">Gestion des véhicules</a>	
							</li>
							<li onmouseover="montre('smenu524',true);" onmouseout="montre('smenu524',false);"><a href="javascript:UpdateEtape1('Identification');">Identification</a>	
							</li>
							<li onmouseover="montre('smenu525',true);" onmouseout="montre('smenu525',false);"><a href="#">Gestion des sondages</a>	
								<ul id="smenu525"><!-- Maintenant sous menu de niveau 3 -->
									<li><a href="javascript:UpdateEtape1('Type_de_sondage');">Type de sondage</a></li>
									<li><a href="javascript:UpdateEtape1('Prog_et_consult');">Programmation et consultation</a></li>
								</ul>							
							</li>
							<li onmouseover="montre('smenu526',true);" onmouseout="montre('smenu526',false);"><a href="javascript:UpdateEtape1('Aide_Memoire');">L'aide mémoire</a>	
							</li>							
						</ul>
					</li>
				</ul>
			</li>
			<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Application
				<ul id="smenu4">
					<li><a href="#">Aller directement à l'application AIR</a></li>
					<li><a href="javascript:UpdateEtape1('Habilitation_AIR');">Comment être habilité sur AIR?</a></li>
					<li><a href="javascript:UpdateEtape1('Config_requise');">Quelle est la configuration requise?</a></li>
				</ul>
 
			</li>	
		</ul>	<!-- On n'appelle pas la fonction javascript car on veut ouvrir dans une nouvelle fenêtre -->		
		<ul><li><a href="http://eimmo/Applications_informatiques/TabBordPublic/Air/Tableau%20de%20bord%20trimestriel.htm" target="_blank" fullscreen="1");">Tableau de bord</a></li></ul>
	</div>	
</div><!-- On a fini de composer le bandeau -->
</head><!-- Fin de la définition du haut de la page -->
 
<body><!-- Définition du corps de la page -->
 
<div id="contenu"><!-- On compose le contenu -->
	<iframe name="FrameMiseAJour" id="FrameMiseAJour" src="./centre.htm"/><!-- width="75%" height="100%" border="0" -->
	<iframe name="FrameNews" id="FrameNews" src="./texte_a_droite.htm"/><!--  width="25%" height="100%" border="0" -->
</div><!-- On compose le pieds de page -->
 
</div>
</body>
</html>

**Er3van** · 24/04/2008, 11h26

Un z-index peut être une solution à ton problème, mais ça te contraint à passer ta/tes div en positionnement absolu.

position : aboslute ;
top : // par rapport à l'angle supérieur gauche de l'écran
left : // idem
z-index : // 0 sera caché par 1, 1 par 2, et ainsi de suite

Mais les iframes j't'avouerai que j'suis pas convaincu....

Et si tu veux juste un résultat correct, y a pleins de codes de menu très bien dispos un peu partout.