Menu déroulant + déroulement au dessus de l'image

**feldi** · 22/05/2011, 22h04

Bonjour,

je poste ici car j'ai un soucis sur un morceau de code qui fonctionnait parfaitement il y a quelques temps.
Le code :

Code php :

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
 
#menu {
	margin-left: 10%;
	margin-right: 5%;
}
 
#menu ul{
 list-style-type:none; /* apparence des listes à puces */
 text-align:center; /* alignement du texte */
 }
#menu li {
 float:left; /* ancrage des thèmes sur la gauche */
 margin:auto;
 padding:0;
 background-color:lightblue;
 }
#menu li a {
 display:block;
 width:100px;
 color:black;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:black;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 color:lightblue;
 }
#menu li ul {
 position:absolute;
 }

pour le menu déroulant.
Le code de l'image qui est censée passée en dessous lors du déroulement :

Code php :

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
 
#image_transparente {
	margin-left: 10%;
	width: 2048;
	height: 1536;
	background: url("images/photo_design.JPG") no-repeat;
	filter:alpha(opacity=80);
    opacity:0.8;
}
#texte_au_dessus {
	filter:alpha(opacity=100);
    opacity:1;
	text-align: center;
	top: 0;
	left: 0;
}

et le code php qui fédère tout ça :

Code php :

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

1
2
3
4
5
6
7
8
 
<div id='image_transparente'>
	<div id='texte_au_dessus'>
		<div id='container' align=center>
                      ...
		</div>
	</div>
</div>

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="menu">
<ul>
	<li><a href="page_principale.php">Accueil</a>
		<ul>
			<li><a href="page_principale.php">Page d'accueil</a></li>
			<li><a href="historique.php">L'historique des UME</a></li>
			<li><a href="interlocuteurs.php">Vos interlocuteurs</a></li>
</ul>
</li>
<li>...
</ul>

Donc le problème :

le menu se déroule sous l'image ! Je ne peux donc pas cliquer sur les différents liens du menu.
Si vous avez des conseils ! Merci

Est-ce que ça vient de Firefox 4 et IE 9? Y a-t-il un "truc" à rajouter pour que l'affichage soit de nouveau fonctionnel avec Firefox 4 et IE 9?

**Bisûnûrs** · 23/05/2011, 09h25

Je pense que tu peux donner un z-index à ton #menu li ul, mais avec un code présenté aussi décousu, difficile de savoir qui va où, pourquoi et comment.

**feldi** · 23/05/2011, 09h53

D'abord, merci pour la réponse.
Je vais étoffer mon explication donc.

Je dispose d'un site perso effectué pendant un stage. Le code du menu (appelé à chaque page => menu.php) :

Code php :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf_8" />
		<meta http-equiv="X-UA-Compatible" content="IE=8" />
		<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
		<title>UME Erstein</title>
    </head>
	<body>
	<div align=center>
		<a href="page_principale.php"><img src="images/ume3.jpg" alt="Bannière des UME" title="Cliquez sur l'image pour revenir à l'accueil"border="0"/></a><br/>
	</div>
	<?php
		$base = mysql_connect('***', '***', '***');  
		$select = mysql_select_db('***', $base);
		//mysql_set_charset('utf8');
	?>
<div id="menu">
<ul>
	<li><a href="page_principale.php">Accueil</a>
		<ul>
			<li><a href="page_principale.php">Page d'accueil</a></li>
			<li><a href="historique.php">L'historique des UME</a></li>
			<li><a href="interlocuteurs.php">Vos interlocuteurs</a></li>
			<li><a href="mailto:ume@ume.fr">E-mail</a></li>
			<li><a href="horairesOuverture.php">Horaires d'ouvertures</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">Eau</a>
		<ul>
		  <li><a href="presentationTechniqueEau.php">Présentation technique</a></li>
		  <li><a href="qualite_eau.php">Analyse et qualité de l'eau</a></li>
		  <li><a href="controleSanitaire.php">Programme de contrôle sanitaire</a></li>
		  <li><a href="tarifEau.php">Tarif de l'eau potable</a></li>
		  <li><a href="reglementService.php">Règlement de service</a></li>
		  <li><a href="rapportAnnuel.php">Rapport annuel</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">Electricité</a>
		<ul>
			<li><a href="presentationTechniqueElectricite.php">Présentation technique</a></li>
			<li><a href="tarifsReglementes.php">Tarifs règlementés</a></li>
			<li><a href="http://www.ejp.es-energies.fr/internet/ejp.nsf/wContenu/U15D0T10Q0.htm">Infos EJP</a></li>
			<li><a href="infosFactures.php">Infos factures</a></li>
			<li><a href="statistiquesCoupures.php">Statistiques coupures</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">Marché public</a>
		<ul>
			<li><a href="dematerialisationMarchesPublics.php">Marché public</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">GRD</a>
		<ul>
		  <li><a href="photovoltaique.php">Photovoltaïque</a></li>
		  <li><a href="cataloguePrestations.php">Catalogue des prestations</a></li>
		  <li><a href="baremeRaccordement.php">Barème de raccordement</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">Liens utiles</a>
		<ul>
		  <li><a href="liensUtiles.php">Liens utiles</a></li>
		  <li><a href="communes_desservies.php">Les communes desservies</a></li>
		  <li><a href="planAcces.php">Nous rejoindre</a></li>
		  <li><a href="releveIndex.php">Relevés d'index en cas d'absence</a></li>
		  <li><a href="ouvertureCompteur.php">Formulaire d'ouverture de compteurs</a></li>
		</ul>
	</li>
</ul>
<br/><br/>
</div>
 
<!--[if !IE]> <-->
	<style type="text/CSS">
	#menu li ul {
	 position:absolute;
	 }
	</style>
<!--><![endif]-->
 
<!--[if IE 8]>
	<style type="text/CSS">
	#menu li ul {
	 position:absolute;
	 }
	</style>
<!--><![endif]-->

Ceci est donc le menu déroulant qui figure sur chaque page.
J'ai donc en page principale cette page (page_principale.php) :

Code php :

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
 
<?php
	ini_set('display_errors', true);
	ini_set('mysql.trace_mode', true);
	include 'menu.php';
?>
<br/>
<div id='image_'>
</div>
<div id='image_transparente'>
	<div id='texte_au_dessus'>
		...
		...
	</div>
</div>
<?php
	include 'bas.php';
?>

Cette page appelle donc menu.php et sous le menu, affiche une image avec du texte par dessus (résultat d'une requête SQL).
Ceci fonctionne (le positionnement de l'image, du texte et l'affichage du texte sur l'image).

Par contre, le soucis est que le menu se déroule sous l'image.
Le code CSS utilisé pour le menu déroulant :

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
 
#menu {
	margin-left: 10%;
	margin-right: 5%;
}
 
#menu ul{
 list-style-type:none; /* apparence des listes à puces */
 text-align:center; /* alignement du texte */
 }
#menu li {
 float:left; /* ancrage des thèmes sur la gauche */
 margin:auto;
 padding:0;
 background-color:lightblue;
 }
#menu li a {
 display:block;
 width:100px;
 color:black;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:black;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 color:lightblue;
 }
#menu li ul {
 position:absolute;
 }

et le code CSS utilisé pour l'image et le texte par dessus :

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
 
#image_transparente {
	margin-left: 10%;
	width: 2048;
	height: 1536;
	background: url("images/photo_design.JPG") no-repeat;
	filter:alpha(opacity=80);
    opacity:0.8;
}
#texte_au_dessus {
	filter:alpha(opacity=100);
    opacity:1;
	text-align: center;
	top: 0;
	left: 0;
}

Je pense qu'avec ceci, les explications seront plus claires.
Je vais regarder un peu ce qu'est le z-index.
Merci pour le conseil.

**Bisûnûrs** · 23/05/2011, 09h59

Envoyé par feldi

Je pense qu'avec ceci, les explications seront plus claires.

On a surtout besoin du code généré par le PHP, pas le PHP lui-même.
Cf : Important : Les règles incontournables d'utilisation de ce forum

**feldi** · 23/05/2011, 10h04

J'ai lancé le site sur Firefox 4 puis code source de la page.

Code php :

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
 
ï»¿ï»¿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf_8" />
		<meta http-equiv="X-UA-Compatible" content="IE=8" />
		<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
		<title>UME Erstein</title>
    </head>
	<body>
 
	<div align=center>
		<a href="page_principale.php"><img src="images/ume3.jpg" alt="BanniÃ¨re des UME" title="Cliquez sur l'image pour revenir Ã  l'accueil"border="0"/></a><br/>
	</div>
	<div id="menu">
<ul>
	<li><a href="page_principale.php">Accueil</a>
		<ul>
			<li><a href="page_principale.php">Page d'accueil</a></li>
 
			<li><a href="historique.php">L'historique des UME</a></li>
			<li><a href="interlocuteurs.php">Vos interlocuteurs</a></li>
			<li><a href="mailto:ume@ume.fr">E-mail</a></li>
			<li><a href="horairesOuverture.php">Horaires d'ouvertures</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">Eau</a>
 
		<ul>
		  <li><a href="presentationTechniqueEau.php">PrÃ©sentation technique</a></li>
		  <li><a href="qualite_eau.php">Analyse et qualitÃ© de l'eau</a></li>
		  <li><a href="controleSanitaire.php">Programme de contrÃ´le sanitaire</a></li>
		  <li><a href="tarifEau.php">Tarif de l'eau potable</a></li>
		  <li><a href="reglementService.php">RÃ¨glement de service</a></li>
 
		  <li><a href="rapportAnnuel.php">Rapport annuel</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">ElectricitÃ©</a>
		<ul>
			<li><a href="presentationTechniqueElectricite.php">PrÃ©sentation technique</a></li>
			<li><a href="tarifsReglementes.php">Tarifs rÃ¨glementÃ©s</a></li>
 
			<li><a href="http://www.ejp.es-energies.fr/internet/ejp.nsf/wContenu/U15D0T10Q0.htm">Infos EJP</a></li>
			<li><a href="infosFactures.php">Infos factures</a></li>
			<li><a href="statistiquesCoupures.php">Statistiques coupures</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">MarchÃ© public</a>
		<ul>
 
			<li><a href="dematerialisationMarchesPublics.php">MarchÃ© public</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">GRD</a>
		<ul>
		  <li><a href="photovoltaique.php">PhotovoltaÃ¯que</a></li>
		  <li><a href="cataloguePrestations.php">Catalogue des prestations</a></li>
 
		  <li><a href="baremeRaccordement.php">BarÃ¨me de raccordement</a></li>
		</ul>
	</li>
	<li><a href="page_principale.php">Liens utiles</a>
		<ul>
		  <li><a href="liensUtiles.php">Liens utiles</a></li>
		  <li><a href="communes_desservies.php">Les communes desservies</a></li>
 
		  <li><a href="planAcces.php">Nous rejoindre</a></li>
		  <li><a href="releveIndex.php">RelevÃ©s d'index en cas d'absence</a></li>
		  <li><a href="ouvertureCompteur.php">Formulaire d'ouverture de compteurs</a></li>
		</ul>
	</li>
</ul>
<br/><br/>
</div>
 
<!--[if !IE]> <-->
	<style type="text/CSS">
	#menu li ul {
	 position:absolute;
	 }
	</style>
<!--><![endif]-->
 
<!--[if IE 8]>
	<style type="text/CSS">
	#menu li ul {
	 position:absolute;
	 }
	</style>
<!--><![endif]> <br/>
<div id='image_'>
</div>
<div id='image_transparente'>
	<div id='texte_au_dessus'>
		<div id='container' align=center>
			<p>
 
				<i><em>Important</em> : Afin de pouvoir visualiser les fichiers en format <em>PDF</em>, <br/>
				vous devez vous munir de la deniÃ¨re version de <em>AdobeÂ® ReaderÂ®</em> disponible en cliquant <a href="http://get.adobe.com/fr/reader/">ici</a>.</i>
				<h1> Espace actualitÃ©s </h1>
 
				<br/><br/>
				<div id='couleur_texte'>
					<table>
								<tr>
									<td align=center>05 / 04 / 2011</td> 
									<td align=center> : </td>
									<td align=center>Ceci est un test pour vérifier que la requête SQL fonctionne correctement.</td>
 
								</tr>
								<tr>
									<td align=center>06 / 04 / 2011</td> 
									<td align=center> : </td>
									<td align=center>Ceci est un second test !</td>
								</tr>
								<tr>
 
									<td align=center>12 / 04 / 2011</td> 
									<td align=center> : </td>
									<td align=center>On fait un 3eme test pour être sur !</td>
								</tr><br/></table>					<br/><br/><br/><br/><br/>
				</div>
			</p>
		</div>
 
	</div>
</div>
ï»¿		<br/>
 
		<div align=center>
			Usines Municipales d'Erstein  -- 14 A rue Jean Georges Abry<br/>
			67150 ERSTEIN<br/><br/>
			<a href="planSite.php">Plan du site</a>
		</div>
 
	</body>
</html>

je pense que c'est ça. Non ?

Edit : Quoi qu'il en soit, en utilisant la propriété z-index, le menu déroulant se déroule bien au-dessus de l'image. Je te remercie !

**Bisûnûrs** · 23/05/2011, 10h18

Envoyé par feldi

J'ai lancé le site sur Firefox 4 puis code source de la page. je pense que c'est ça. Non ?

Oui, c'était ça. Ne l'oublie pas la prochaine fois que tu postes dans les forums HTML / CSS.

Menu déroulant + déroulement au dessus de l'image

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager