z-index avec menu deroulant

**orphen** · 15/04/2008, 13h47

Bonjour a tous voila je rencontre un problème avec mon menu déroulant sur firefox

voici le screen

http://img241.imageshack.us/img241/6...stitre2ss7.jpg

Je me permet de vous poster mon code xhtml

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
 
<!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" />
<title>Document sans nom</title>
<link href="css/squelette.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/menu.js"></script>
</head>
 
<body>
	<div id="centre">
		<div id="head_bo">
			BackOffice TEMPKA
		</div>
		<ul id="nav">
			<li><a href="#1" class="lien_config">Configuration</a></li>
			<li><a href="#2">Accueil</a>
				<ul>
					<li><a href="#" class="sous_liste">MEA</a></li>
					<li><a href="#" class="sous_liste">Engagements</a></li>
					<li><a href="#" class="sous_liste">Marques</a></li>
				</ul>
			</li>
			<li><a href="#2">Catalogue</a>
				<ul>
					<li><a href="#" class="sous_liste">Marques</a></li>
					<li><a href="#" class="sous_liste">Produits</a></li>
					<li><a href="#" class="sous_liste">Animation<br />commerciale</a></li>
					<li><a href="#" class="sous_liste">Coupons</a></li>
					<li><a href="#" class="sous_liste">Assortiment</a></li>
				</ul>
			</li>
			<li><a href="#2">Clients</a>
				<ul>
					<li><a href="#" class="sous_liste">Liste clients</a></li>
					<li><a href="#" class="sous_liste">Profil</a></li>
					<li><a href="#" class="sous_liste">Commandes<br />client</a></li>
					<li><a href="#" class="sous_liste">SAV</a></li>
				</ul>
			</li>
			<li><a href="#2">Commandes</a>
				<ul>
					<li><a href="#" class="sous_liste">Liste des<br />commandes</a></li>
					<li><a href="#" class="sous_liste">Suivi des<br />commandes</a></li>
					<li><a href="#" class="sous_liste">Transporteur</a></li>
				</ul>
			</li>
			<li><a href="#2">Magasins</a>
				<ul>
					<li><a href="#" class="sous_liste">Liste Magasins</a></li>
					<li><a href="#" class="sous_liste">Fiche magasins</a></li>
				</ul>
			</li>
			<li><a href="#2">Tableau de bord</a>
				<ul>
					<li><a href="#" class="sous_liste">ventes par<br />marque</a></li>
				</ul>
			</li>
		</ul>
		<!-- Template fiche commande-->
		<div class="contenu">
			<div id="bloc_menu_fiche">
			<ul id="menu_fiche">
				<li><a href="#">Info Perso</a></li>
				<li><a href="#">Historique</a></li>
				<li><a href="#">Commandes</a></li>
				<li><a href="#">S&eacute;lections</a></li>
				<li><a href="#">Messages</a></li>
			</ul>
			</div>
			<div id="images_fiche"><a href="#"><img src="images/img_fiche_imprimer.jpg" alt="imprimer" /></a><a href="#"><img src="images/img_fiche_droite.jpg" alt="image droite" /></a></div>
			<h4 id="titre_fiche">Historique commande</h4>
			<table width="943" border="0" cellpadding="0" cellspacing="0" id="tableau_titre">
				<tr class="ligne_tableau_titre">
					<td width="104" ><span class="underline">Date</span></td>
					<td width="95"><span class="underline">R&eacute;f&eacute;rence</span></td>
					<td width="102"><span class="underline">Nb produits</span></td>
					<td width="87"><span class="underline">Montant</span></td>
					<td width="127"><span class="underline">Transporteur</span></td>
					<td width="172"><span class="underline">Etat</span></td>
					<td width="125"><span class="underline">Modifier</span></td>
					<td width="124">Annuler</td>
				</tr>
		</table>
 
			<table width="943" border="0" cellpadding="0" cellspacing="0" id="tableau_fiche">
				<tr class="ligne_impaire">
					<td width="104" >dd/mm/yyyy					</td>
					<td width="95" class="underline">xxxxxxx</td>
					<td width="102">2</td>
					<td width="87">600.00&euro;</td>
					<td width="127">Chronopost</td>
					<td width="172">Annul&eacute;e</td>
					<td width="125" class="underline">Modifier</td>
					<td width="124" class="underline">Annuler</td>
				</tr>
				<tr class="ligne_paire">
					<td width="104">dd/mm/yyyy</td>
					<td width="95" class="underline">xxxxxxx</td>
					<td width="102">2</td>
					<td width="87">600.00&euro;</td>
					<td width="127">Colissimo</td>
					<td width="172">En cours </td>
					<td width="125" class="underline">Modifier</td>
					<td width="124" class="underline">Annuler</td>
				</tr>
				<tr class="ligne_impaire">
					<td width="104">dd/mm/yyyy</td>
					<td width="95" class="underline">xxxxxxx</td>
					<td width="102">2</td>
					<td width="87">600.00&euro;</td>
					<td width="127">Chronopost</td>
					<td width="172">Annul&eacute;e</td>
					<td width="125" class="underline">Modifier</td>
					<td width="124" class="underline">Annuler</td>
				</tr>
				<tr class="ligne_paire">
					<td width="104">dd/mm/yyyy</td>
					<td width="95" class="underline">xxxxxxx</td>
					<td width="102">2</td>
					<td width="87">600.00&euro;</td>
					<td width="127">Colissimo</td>
					<td width="172">En cours </td>
					<td width="125" class="underline">Modifier</td>
					<td width="124" class="underline">Annuler</td>
				</tr>
		</table>
		<ul id="liste_suiv_prec">
			<li><a href="#"><img src="images/img_precedent.jpg" alt="precedent" /></a></li>
			<li><a href="#"><img src="images/img_suivant.jpg" alt="image suivant" /></a></li>
			<li class="puce_deployer"><a href="#"><img src="images/img_deployer.jpg" alt="img deployer" /></a></li>
		</ul>
		</div>
		<!-- Fin Template fiche commande -->
 
 
		<div id="footer">
			<img src="images/bo_bas.jpg" alt="bo_bas" class="img_bloc" />
		</div>
	</div>
</body>
</html>

ainsi que mes deux code css

les positionnements

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
 
/* Global */
body{ margin:0; padding:110px 0 0 0;}
img{ border:none;}
.img_bloc{ display:block; margin:0; padding:0;}
.img_bloc_left{ display:block; float:left}
#head_bo{ padding:0 0 0 30px;}
#centre{ width:988px; margin:0 auto;}
.contenu{ width:967px; margin:5px auto 0 auto; padding:0; overflow:auto;}
 
 
/*menu*/
#nav{ width: 982px; padding: 0; margin: 0 0 0 2px; list-style: none; overflow:auto; height:1%;}
#nav ul{ padding: 0; margin: 0; list-style:none;}
#nav a, .lien_config{ text-align:center; display: block; padding:5px 0;}
#nav a:hover, .lien_config:hover{ text-align:center; display: block; padding:5px 0}
#nav li{ float: left; width: 110px;  }
#nav li ul{position: absolute; width:110px; left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;} /*Pour IE6*/
.sous_liste{text-align:center; margin:0; padding:;}
.sous_liste:hover{text-align:center; margin:0;  padding:0;}
 
/*fiche commande*/
#menu_fiche{ list-style:none; margin:0; padding:10px 0 0 10px; _height:1%; overflow:auto; }
#menu_fiche li{ margin:0 15px 0 0; padding:0; float:left; width:80px;}
#images_fiche{ text-align:right; margin:0; padding:5px 10px 0 0; clear:both;}
 
#images_fiche img{}
h4{ margin:0; padding:0 0 0 10px;}
 
#tableau_titre{ margin:10px auto 3px auto;}
#tableau_titre td{ padding:10px 0; margin:0;}
#tableau_fiche{margin:0 auto;}
#tableau_fiche td{ padding:5px 0;}
 
#liste_suiv_prec{ list-style:none; margin:0; padding:20px 0 0 450px; height:1%;}
#liste_suiv_prec li{ margin:0 5px 0 0; padding:0; float:left;}
#liste_suiv_prec .puce_deployer{ margin:0; padding:5px 0 0 0}
 
#footer{ clear:both;}

les styles (couleurs etc)

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
 
/* Global */
#head_bo{ background-image:url(../images/bo_haut.jpg)}
#centre{ background-image:url(../images/bo_fond.jpg); overflow:auto;}
.contenu{ border:1px solid #A6A6A6;}
.underline{ text-decoration:underline;}
 
/*menu*/
 
#nav{ background-color:#F2F2F2; }
#nav a, .lien_config { text-decoration:none; color:#333333; font: 12px Verdana, Arial, Helvetica, sans-serif;}
#nav a:hover, .lien_config:hover { text-decoration:underline; color:#333333; font: 12px Verdana, Arial, Helvetica, sans-serif;}
#nav li ul{border-bottom:1px solid #6A6A6A;}
.sous_liste{background-color:#CBCAC9; border-top:1px solid #6A6A6A;}
.sous_liste:hover{background-color:#F2F2F2; border-top:1px solid #6A6A6A; border-left:1px solid #6A6A6A; border-right:1px solid #6A6A6A;}
 
/*fiche commande*/
#menu_fiche{ background-color:#F2F2F2;}
#menu_fiche li a{ text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; color:#6A6665; }
#menu_fiche li a:hover{ text-decoration:underline; font:bold 12px Verdana, Arial, Helvetica, sans-serif; color:#6A6665;}
h4{ font:Verdana, Arial, Helvetica, sans-serif; color:#6A6665;}
#tableau_titre .ligne_tableau_titre{ background-color:#F2F2F2;}
#tableau_titre td{ border:1px solid #fff; text-align:center; color:#000; font:bold 12px Verdana, Arial, Helvetica, sans-serif;}
#tableau_fiche .ligne_impaire{ background-color:#F2D0D1}
#tableau_fiche .ligne_paire{ background-color:#F9E9E9 }
#tableau_fiche td{ border:1px solid #fff; text-align:center; font:12px Verdana, Arial, Helvetica, sans-serif; color:#6A6665;}

Le problème est que mon menu déroulant semble passer sous la div contenu.

j'ai essayer d'attribuer des z-index sans résultat pourriez vous m'indiquer comment corriger ce problème très embêtant.

Si il faut des z-index ou les places svp.

Merci par avance

**mLk92** · 15/04/2008, 13h52

A mon avis tu devrais placé un z-index à ton conteneur et au contenu des liste déroulées (la partie grises), et mettre le même z-index que ton conteneur au ul contenant la partie grise

**pierre24** · 15/04/2008, 14h24

oui ! ajouter un z-index : 1 uniquement sur le conteneur de la liste déroulante !!!

**orphen** · 15/04/2008, 14h43

j'ai essayer Pierre ca ne fonctionne pas.

Pourriez vous m'indique le nom des style ou je devrai les mettre ces z index d'après vous

merci

**pierre24** · 15/04/2008, 16h01

tu pourrai englober tous tes sous menus ( dont la class = sous_liste) dans un div quelconque X positionné en absolute par rapport au haut de la page et au coté gauche , et avec un z-index : 1

par exemple

Code :

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

1
2
3
4
5
6
7
8
9
 
<li><a href="#2">Accueil</a>
<div class="struc_SsMenu">
   <ul>
      <li><a href="#" class="sous_liste">MEA</a></li>
      <li><a href="#"class="sous_liste">Engagements</a></li>
      <li><a href="#" class="sous_liste">Marques</a></li>
   </ul>
</div>

et un CSS :

Code :

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

1
2
3
4
5
6
7
8
 
 
.struc_SsMenu{
   position : absolute;
   top: ...;
   left: ...;
   z-index:1;
}

Voila, je pense que ca devrait marcher !

**Erwan31** · 15/04/2008, 16h10

@pierre24
je vais faire mon enquiquineur de service mais à quoi sert le div englobant l'ul?

**pierre24** · 15/04/2008, 16h12

LOL j'ai pris ca ss me poser la question ! Il adaptera surement !

Mais je l'attendais quand meme ! ^^

**mLk92** · 15/04/2008, 17h44

Un ul c'est déja quasiment un div englobant des li, alors faire un conteneur de conteneur ... lol

Met simplement un z-index sur le ul d'un sous menu pour que ce ul soit au dessus du ul du menu entier et du conteneur en dessous

**Erwan31** · 15/04/2008, 20h11

Envoyé par mLk92

Un ul c'est déja quasiment un div englobant des li, alors faire un conteneur de conteneur ... lol

En fait ça peut parfois servir pour ajouter de la présentation quand un seul
bloc recepteur des styles n'est pas suffisant mais c'est assez rarement le cas.

z-index avec menu deroulant

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager