Problème d'affichage du menu dessous le contenu

**nicolas2603** · 23/02/2009, 16h23

Bonjour, alors voici mon soucis. Je suis en train de développer un site dont le gabarit est :
- Un entête #entete
- Un menu vertical à gauche #menu
- Un contenu à droite #contenu
- Un pied de page #footer.

Mon menu déroule ses sous-menus au dessus du contenu normalement, c'est-à-dire à l'extrémité droite du menu. Je dis normalement, car ayant inséré des images dans mon #contenu pour tester, je m'aperçois que mes sous-menus apparaissent SOUS les images.

J'ai cru pouvoir régler mon problème en donnant des z-index de la sorte :
#entete {z-index: 2;}
#menu {z-index: 1;}
#contenu {z-index: 0;}

Mais cela ne change rien. Y a-t-il une solution ? Merci d'avance.

**desert** · 23/02/2009, 17h13

Ce n'est pas au menu proprement dit qu'il faut donner le z-index mais aux balises li des sous-menus puisque ce sont eux que tu déroules.
Note aussi que les éléments doivent être positionnés (absolute, relative ou fixed) pour qu'ils puissent recevoir la propriété z-index.

**nicolas2603** · 26/02/2009, 12h05

Bonjour, alors effectivement j'ai mis des z-index: 2; pour chaque sous-menu, et un z-index: 0; pour le contenu, et ça marche ... sous Firefox. Mais sous IE ça continue à apparaître dessous.

Pour précision, j'ai une div "page" dans laquelle sont positionnés le menu en float: left; et le contenu en position: relative;.

Faut-il coder d'une façon particulière ou bien utiliser un script correctif ?

Merci d'avance.

**GihefBey** · 26/02/2009, 14h25

Bonjour,

Je ne peux pas tester avec IE.
Mais, une idée, en passant.

As-tu essayé le contenu en float: right; et le menu avec une marge droite correspondante ; le contenu et le menu apparaissant dans cet ordre dans le code HTML ?

++
Avec le code HTML et CSS de la page, on est moins dans les suppositions, on peut tester un peu plus concrètement.

-

**nicolas2603** · 26/02/2009, 15h32

Je viens d'essayer le float: right; ça ne donne rien car le menu apparaît avant le contenu.

Je vais mettre des extraits de mes codes, mais attention à la prise de chou

(je ne peux pas mettre mon site sur le net encore sinon j'aurai fait le lien dessus)

Voici mon 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
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
<!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" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/design.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/menu.css" media="all" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
 
<body>
<div id="global">
 
  <!-- #bloc d'entête -->
  <div id="entete"> 
    <h1>titre...</h1>
    <h2>...titre</h2>
    <!-- #div d'identification -->
    <form name=aform method=post action="index.php?page=identification">
      <div class="idDiv"><b>ESPACE PRO :</b> <a href="#">Code oublié | Aide</a><br />
        <input type="text" name="id_box" size="20" value="Tapez votre code" onfocus="if (this.value == 'Tapez votre code') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Tapez votre code'; }" style="text-align:center" id="idBox" />
        <input type="submit" name="id_value" value="&nbsp;ok&nbsp;" style="margin-top:5px" id="idButton" />
      </div>
    </form>
   <!-- #div de moteur de recherche -->
    <form action="index.php?page=search" id="search-box">
      <div class="searchDiv"> 
        <input type="hidden" name="cx" value="016961606548190913830:uijtkv9wrkm" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="25" value="&nbsp;Rechercher" onfocus="if (this.value == '&nbsp;Rechercher') { this.value = ''; }" onblur="if (this.value == '') { this.value = '&nbsp;Rechercher'; }" id="searchBox" />
        <input type="submit" name="sa" value="&nbsp;ok&nbsp;" id="searchButton" />
      </div>
    </form>
    <script type="text/javascript" src="http://www.google.fr/coop/cse/brand?form=cse-search-box&lang=fr"></script>
  </div>
 
  <!-- #bloc central -->
  <div id="navigation"> 
    <!-- #menu -->
    <div id="menu"> 
      <ul class="niveauA1">
        <li class="sousNiveau" id="menu_accueil"><a href="#">ACCUEIL</a> 
          <ul class="niveauB">
            <li><a href="#"> 
              <!-- pour forcer la gestion block -->
              </a></li>
          </ul>
        </li>
        <li class="sousNiveau" id="menu_affiche"><a href="#">&Agrave; L'AFFICHE</a> 
          <ul class="niveauB">
            <li><a href="#">Actualités</a></li>
            <li><a href="#">Recette</a></li>
            <li><a href="#">Produit</a></li>
          </ul>
        </li>
        <li class="sousNiveau" id="menu_campagne"><a href="#">BIENVENUE &Agrave; LA CAMPAGNE</a> 
          <ul class="niveauB">
            <li class="sousNiveau"><a href="#">Visiter une ferme</a> 
              <ul class="niveauC">
                <li><a href="#">Hébergement – Restauration</a></li>
                <li><a href="#">Loisir – Accueil pédagogique</a></li>
              </ul>
            </li>
            <li class="sousNiveau"><a href="#">Acheter des produits</a> 
              <ul class="niveauC">
                <li><a href="#">Catalogue par produits</a></li>
                <li><a href="#">Catalogue par mode de vente</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="sousNiveau" id="menu_presse"><a href="#">ESPACE PRESSE</a> 
          <ul class="niveauB">
            <li><a href="#">Communiqués de presse</a></li>
            <li><a href="#">Dossiers de presse</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </li>
        <li class="sousNiveau" id="menu_photo"><a href="#">PHOTOTH&Egrave;QUE</a> 
          <ul class="niveauB">
            <li><a href="#"> 
              <!-- pour forcer la gestion block -->
              </a></li>
          </ul>
        </li>
      </ul>
      <ul class="niveauA2">
        <li class="sousNiveau" id="menu_contact"><a href="#">CONTACT</a> 
          <ul class="niveauB">
            <li><a href="#">Contact1</a></li>
            <li><a href="#">Contact2</a></li>
          </ul>
        </li>
      </ul>
    </div>
 
    <!-- #contenu -->
    <div id="contenu"> 
      <!--  -->
      <img src="img/accueil/produit.png" class="produit" /> <img src="img/accueil/recette.png" class="recette" /> <img src="img/accueil/visiter.png" class="visiter" /> <img src="img/accueil/acheter.png" class="acheter" /> </div>
  </div>
 
  <!-- #bloc de pied de page -->
  <div id="footer">
    <p><br /><b>&copy;</b> Copyright. <a href="#" title="">Mentions 
      légales</a>. CNIL n°.......</p>
  </div>
 
</div>
 
</body>
</html>

Voici le css du design global:

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
body {
	margin: 0;
	padding: 10px 20px;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	font-size: .8em;
	line-height: 1.25;
	color: black;
	background: #CCCCCC;
	}
 
html {font-size: 100%;}
 
#global {
	width: 1180px;
	padding: 0 10px;
	margin: 0 auto;
	background: #CCCCCC url(../img/global.png) repeat-y;
	}
 
/* <-------------------- ENTETE --------------------> */
#entete {
	height: 100px;
	color: #FFF;
	background: #7FCF2E url(../img/header.png) no-repeat;
	position: relative;
	}
 
#entete h1 {
	margin: 0;
	position: absolute;
	top: 5px;
	left: 350px;
	font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	}
 
#entete h2 {
	position: absolute;
	top: 25px;
	left: 650px;
	font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	}
 
 
.idDiv {
	border: 1px solid #026237;
	position: relative;
	top: 110px;
	left: 20px;
	width: 200px;
	height: 40px;
	text-align: center;
	font-size: .8em;
	color: #026237;
	}
 
#idBox {
	border: 1px solid #026237;
	background-color: #2EC739;
	font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	color: white;
	}
 
#idButton {
	border: 1px solid #026237;
	background-color: #026237;
	font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	color: white;
	font-weight: bold;
	}
 
.searchDiv {
	position: absolute;
	top: 105px;
	right: 5px;
	font-size: .9em;
	z-index: 1;
	}
 
#searchBox {
	border: 1px solid #026237;
	background-color: #2EC739;
	font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	color: white;
	}
 
#searchButton {
	border: 1px solid #026237;
	background-color: #026237;
	font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	color: white;
	font-weight: bold;
	}
 
/* <-------------------- NAVIGATION --------------------> */
#navigation {
	/* width: 100%;
	overflow: hidden; */
	}
 
/* <-------------------- CONTENU --------------------> */
#contenu {
	position: relative;
	width: 920px;
	height: 578px;
	margin-left: 245px;
	background: #FFFFFF url(../img/accueil/bckground.png);
	}
 
#contenu > :first-child {margin-top: 10px;}
 
#contenu .produit {
	position: absolute;
	top: 25px;
	left: 50px;
	width: 200px;
	height: 166px;
	background: #FFFFFF url(../img/accueil/produit.png);
	}
 
#contenu .recette {
	position: absolute;
	top: 375px;
	left: 50px;
	width: 200px;
	height: 164px;
	background: #FFFFFF url(../img/accueil/recette.png);
	}
 
#contenu .visiter {
	position: absolute;
	top: 400px;
	left: 300px;
	width: 218px;
	height: 164px;
	background: #FFFFFF url(../img/accueil/visiter.png);
	}
 
#contenu .acheter {
	position: absolute;
	top: 375px;
	left: 600px;
	width: 218px;
	height: 164px;
	background: #FFFFFF url(../img/accueil/acheter.png);
	}
 
/* <-------------------- PIED DE PAGE --------------------> */
#footer {
	height: 30px;
	width: 100%;
	background: #7FCF2E url(../img/footer.png) repeat-x;
	color: #FFF;
	}

Et le css 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
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
#menu {
	float: left;
	width: 240px;
	height: 590px;
	background: url(../img/menuGP.png) no-repeat;
	}
 
#menu ul {
	position: relative;
	left: 25px;
	top: 75px;
	padding: 0;
	margin: 0;
	border: 0;
	}
 
#menu li a {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}
 
#menu ul li {
	position: absolute;
	list-style: none;
	}
 
#menu ul a {display: block;}
#menu ul.niveauA2 a {color: #026237;}
#menu ul.niveauA2 a:hover {color: #2EC739;}
#menu ul.niveauA2 ul a {color: #FFFFFF;}
#menu ul.niveauA2 ul a:hover {color: #026237;}
 
#menu ul ul {
	position: absolute;
	top: 0;
	background-color: #B4E14D;
	border: 2px outset #DDF4EC;
	display: none; 
	}
 
#menu ul ul a:hover,#menu ul ul a:active,#menu ul ul a:focus{
	background-color: #2EC739;
	color: #026237;
	border: 1px inset;
	padding: 0 3px;
	}
 
#menu ul ul li {
	position: relative;
	border: 1px solid #B4E14D; /* Pour empêcher le décalage */
	}
 
#menu ul ul li.sousNiveau {background-color: #9BCF23;}
 
#menu ul ul li a {
	color: #FFFFFF;
	font-weight: normal;
	}
 
#menu ul ul ul {
	position: absolute;
	display: none;
	}
 
#menu ul li.sousNiveau:hover ul.niveauB, #menu ul.niveauB li.sousNiveau:hover ul.niveauC {display: block;}
 
#menu ul ul.niveauB li.sousNiveau a {font-weight: bold;}
#menu ul ul.niveauB ul.niveauC li a {font-weight: normal;}
 
#menu_accueil a:hover, #menu_campagne a:hover, #menu_agriculture a:hover, #menu_chambre a:hover {color: #2EC739;}
#menu_affiche a:hover, #menu_presse a:hover, #menu_emploi a:hover, #menu_photo a:hover, #menu_contact a:hover {color: #026237;}
 
#menu_accueil {
	width: 184px;
	position : absolute;
	top: 27px;
	left: 30px;
	}
 
#menu_accueil ul {
	width: 0;
	left: 181px;
	}
 
#menu_affiche {
	width: 197px;
	position : absolute;
	top: 69px;
	left: 17px;
	}
 
#menu_affiche ul {
	width: 90px;
	left: 194px;
	z-index: 2;
	}
 
#menu_campagne {
	width: 211px;
	position : absolute;
	top: 136px;
	left: 3px;
	}
 
#menu_campagne ul {
	width: 180px;
	left: 208px;
	z-index: 2;
	}
 
#menu_campagne ul ul {
	width: 220px;
	left: 177px;
	}
 
#menu_presse {
	width: 212px;
	position : absolute;
	top: 185px;
	left: 2px;
	}
 
#menu_presse ul {
	width: 180px;
	left: 209px;
	z-index: 2;
	}
 
#menu_emploi {
	width: 202px;
	position : absolute;
	top: 302px;
	left: 12px;
	}
 
#menu_emploi ul {
	width: 160px;
	left: 199px;
	z-index: 2;
	}
 
 
#menu_photo {
	width: 184px;
	position: absolute;
	top: 405px;
	left: 30px;
	}
 
#menu_photo ul {
	width: 0;
	left: 181px;
	}
 
#menu_contact {
	width: 70px;
	position : absolute;
	top: 477px;
	left: 80px;
	}
 
#menu_contact ul {
	width: 410px;
	left: 67px;
	z-index: 2;
	}

... bon courage, et merci d'avance.

**GihefBey** · 26/02/2009, 23h48

Envoyé par GihefBey

le contenu en float: right; et le menu avec une marge droite correspondante ; le contenu et le menu apparaissant dans cet ordre dans le code HTML ?

Le menu doit alors être placé après le contenu dans le code HTML.
Chez moi ça marche.

Ou en évitant le positionnement en absolute pour les images ?

À tester, à adapter.

-