superposition menu-deroulant css

Version imprimable

Salut a tous voila j'ai un problème de superposition de bloc avec mon menu css (problème uniquement sous Firefox).

Voila le visuel de ce que j'obtient.
http://img362.imageshack.us/img362/4...firefoxyz4.jpg

Voici le code html de la partie qui bug:

Code:

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
 
 
<!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>Template</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script src="js/menu_dynamique.js" type="text/javascript"></script>
</head>
 
<body>
<h3 style="padding:0; margin:20px 0 0 0;">Template recherche :</h3>
<div id="align_site">
	<div id="haut_site">BackOffice TEMPKA</div>
	<div id="milieu_site">
 
			<!-- //////// Bloc Navigation //////// -->
 
			<div id="navigation">
			<div id="cont_menu">
				<!-- //////// Menu //////// -->
				<ul id="menu">
						<!-- //////// Niveau 0 //////// -->
						<li><a href="#" class="niveau0">Configuration</a></li>
					   <!-- //////// Niveau 0 //////// -->
					  <li>
 
								<a href="#" class="niveau0">Accueil</a>
						<!-- //////// Niveau 1 //////// -->
								<ul>
										<li><a href="#" class="niveau1">MEA</a></li>
										<li><a href="#" class="niveau1">Engagements</a></li>
										<li><a href="#" class="niveau1">Marques</a></li>
								<!-- //////// Niveau 1 //////// -->
								</ul>
					</li>
 
					   <!-- //////// Niveau 0 //////// -->
						<li>
								<a href="#" class="niveau0">Catalogue</a>
						  <!-- //////// Niveau 1 //////// -->
								<ul>
										<li><a href="#" class="niveau1">Marques</a></li>
										<li><a href="#" class="niveau1">Produits</a></li>
										<li><a href="#" class="niveau1">Animation Commerciale</a></li>
										<li><a href="#" class="niveau1">Coupons</a></li>
										<li><a href="#" class="niveau1">Assortiment</a></li>
								</ul>
						</li>
					   <!-- //////// Niveau 0 //////// -->
						<li>
								<a href="#" class="niveau0">Clients</a>
						  <!-- //////// Niveau 1 //////// -->
								<ul>
										<li><a href="#" class="niveau1">Liste clients</a></li>
										<li><a href="#" class="niveau1">Profil</a></li>
										<li><a href="#" class="niveau1">Commandes Client</a></li>
										<li><a href="#" class="niveau1">SAV</a></li>
								</ul>
						</li>
					   <!-- //////// Niveau 0 //////// -->
						<li>
								<a href="#" class="niveau0">Commandes</a>
						  <!-- //////// Niveau 1 //////// -->
								<ul>
										<li><a href="#" class="niveau1">Liste des commandes</a></li>
										<li><a href="#" class="niveau1">suivi des commandes</a></li>
										<li><a href="#" class="niveau1">Transporteur</a></li>
								</ul>
						</li>
						<!-- //////// Niveau 0 //////// -->
						 <li>
								<a href="#" class="niveau0">Magasins</a>
						   <!-- //////// Niveau 1 //////// -->
								<ul>
										<li><a href="#" class="niveau1">Liste magasins</a></li>
									   <li><a href="#" class="niveau1">Fiche magasins</a></li>
								</ul>
						</li>
 
						 <li>
								<a href="#" class="niveau0">Tableau de bord</a>
						   <!-- //////// Niveau 1 //////// -->
								<ul>
										<li><a href="#" class="niveau1">Ventes par marque</a></li>
								</ul>
						</li>
 
				</ul>
			  </div>
		</div>
 
			<!-- //////// Fin Bloc Navigation //////// -->
 
<div class="bordure_grise">
		<div class="sous_menu">
				<table class="sous_menu_tableau" >
					<tr>
						<td><a href="#" class="lien_sous_menu">Info Perso</a></td>
						<td><a href="#" class="lien_sous_menu">Historique</a></td>
						<td><a href="#" class="lien_sous_menu">Commandes</a></td>
						<td><a href="#" class="lien_sous_menu">S&eacute;lections</a></td>
						<td><a href="#" class="lien_sous_menu">Messages</a></td>
					</tr>
				</table>
		</div>
	<!--  Mettre textes ici -->&nbsp;
</div>
 
	<div class="calage_bloc_fiche">
		<div class="fiche_gauche">
			<div class="fiche_gauche_haut"><img src="images/int_fiche_haut.jpg" alt="haut fiche" class="img_bloc" /></div>
			<div class="fiche_gauche_milieu"><!--  Mettre textes ici -->&nbsp;</div>
			<div class="fiche_gauche_bas"><img src="images/int_fiche_bas.jpg" alt="fiche bas" class="img_bloc" /></div>
		</div>
 
		<div class="fiche_droite">
			<div class="fiche_droite_haut"><img src="images/int_fiche_haut.jpg" alt="haut fiche" /></div>
			<div class="fiche_droite_milieu"><!--  Mettre textes ici -->&nbsp;</div>
			<div class="fiche_droite_bas"><img src="images/int_fiche_bas.jpg" alt="fiche bas" /></div>
		</div>
	</div>
	<div id="bas_site"></div>
</div>
</body>
<html>

voici egalement le css du menu:

Code:

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
 
/*Menu*/
 
#navigation{
margin-left:2px;
background:#F2F2F2;
width:981px;
overflow:auto;
height:2%;
}
 
#menu, #menu ul{ /*Le menu*/
		display:inline;
		margin-left:auto;
		margin-right:auto;
        padding : 0px; 
        list-style : none;
		line-height : 28px; /* hauteur pour chaque élément */
}
 
#menu a{  /* Contenu des listes */
        display : block; /* les liens deviennent type block */
        padding : 0;
		margin: 0;*/
}
 
#menu li{  /* Elements des listes */     
        float : left;
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
 
 
#menu li ul{ /* Sous-listes */
		z-index:999;
		margin-top:0px;
        position: absolute; 
        width: 144px; /* Largeur sous-listes */
        left: -999em; 
}
 
#menu li ul ul
{
        margin    : -28px 0 0 115px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
}
 
/* ie ne reconnaissant pas le sélecteur */
html>body #menu li ul ul               
{
        border-left     : 1px solid #737373 ; 
}
 
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
 
.niveau0{
		width:140px;
		background-image:url(../images/general/menu/fond_accueil.jpg);
		text-align:center;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#333;
		font-size:12px;
		text-decoration:none;
}
 
.niveau0:hover{
		width:140px;
		background-image:url(../images/general/menu/fond_accueil.jpg);
		text-align:center;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-weight:bold;
		color:#333;
		font-size:12px;
		text-decoration:none;
}
 
.niveau1{
		width:140px;
		background-color:#CBCAC9;
		text-align:center;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#333;
		font-size:10px;
		text-decoration:none;
		border-bottom:1px solid #6A6A6A;
}
 
.niveau1:hover{
		width:140px;
		background-color:#F2F2F2;
		text-align:center;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#333;
		font-size:10px;
		font-weight:bold;
		text-decoration:none;
		border-left:1px solid #6A6A6A;
		border-right:1px solid #6A6A6A;
}

et le css de la zone qui bug:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
/******************************************/
/*******  Bloc fiche  ********/
/****************************************/
.calage_bloc_fiche{
	width:860px;
	margin:10px auto 0 auto;
	overflow:auto;
}
 
.fiche_gauche{
	float:left;
	width:419px;
}
 
.fiche_droite_milieu, .fiche_gauche_milieu{
	background-image:url(../images/int_fiche_milieu.jpg);
}
 
.fiche_droite{
	float:right;
	width:419px;
}

Ma question est simple comment puis-je régler ce problème il me semble bien que c'est un problème de z-index mais je n'arrive pas a le régler seul.

Merci par avance de votre aide

05/05/2008, 12h16
Er3van

Pourquoi ne pas mettre la div qui bug en absolute avec un z-index plus faible ? Ca réglerai ton pb...
05/05/2008, 13h19
orphen

Cela ne corrige pas mon problème.
Une autre idée?

Merci par avance
05/05/2008, 15h11
Candygirl

Le problème est ton overflow:auto sur .calage_bloc_fiche.
ça ressemble fort à un bug de Firefox (?); je ne sais pas trop comment corriger le problème puisque même en ajoutant un position:relative et z-index inférieur sur .calage_bloc_fiche il se refuse à passer en-dessous.

Tu peux essayer de trouver une autre propriété qui peux convenir dans ton cas pour la création du nouveau contexte de formatage. Par exemple display:table (vu que IE a le layout de toute manière). Ce qui fait disparaître le problème...

Je suis aussi intéressée si quelqu'un en sait plus sur le sujet ;)
05/05/2008, 15h41
orphen

Je ne comprend pas trop ce que tu veux dire par :

""Tu peux essayer de trouver une autre propriété qui peux convenir dans ton cas pour la création du nouveau contexte de formatage. Par exemple display:table (vu que IE a le layout de toute manière). Ce qui fait disparaître le problème...""

Peux tu me donner plus de détails stp

Merci en tout cas de m'aider.
05/05/2008, 15h58
Candygirl
Citation:

Envoyé par orphen

Je ne comprend pas trop ce que tu veux dire par :

""Tu peux essayer de trouver une autre propriété qui peux convenir dans ton cas pour la création du nouveau contexte de formatage. Par exemple display:table (vu que IE a le layout de toute manière). Ce qui fait disparaitre le problème...""

Pourquoi as-tu attribué la propriété et la valeur overflow:auto; à ton .calage_bloc_fiche ?
Si c'est pour rien, autant la virer puisqu'elle est la source du problème ;)

Je pense que tu l'as utilisée parce que tu as, à l'intérieur, deux flottants et que tu voulais que le conteneur descende bien jusqu'au bas des flottants (vire-là et tu verras bien ce qui se produit). Bref, tu n'as pas besoin d'un overflow mais d'une propriété qui établit un nouveau contexte de formatage afin que le contenu des flottants soient pris en compte par le parent. L'idée est donc d'utiliser une autre propriété qui produit le même effet sans produire le problème, comme un display:table
Code:

1 2 3 4 5 .calage_bloc_fiche{ width:860px; margin:10px auto 0 auto; display:table; }
IE ne comprend pas le display:table mais le simple faite de lui avoir attribuer un width suffit à établir un nouveau contexte de formatage sur IE (inférieure à la 8 qui est censée comprendre le display:table).

Mais il est clair que l'ajout de cette propriété n'est pas anodine et peut avoir un impacte, tout comme l'overflow, d'ailleurs.

Autrement il y a l'option d'attribuer le clear sur la pseudo-classe :after (à la place de l'overflow ou du display table):
Code:

1 2 3 4 5 6 7 .calage_bloc_fiche:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
Pas compris non-plus par ie6-7 mais on s'en fiche vu le width.

En dernier recours, le div vide qu'on ajoute, dans le html, juste pour clearer après les flottants, à l'intérieur du .calage_bloc_fiche .

Vivement que css3 nous apporte une vraie solution au problème...

Mais peut-être quelqu'un connaît-il un moyen règler le problème en gardant l'overflow ? Moi pas et je n'ai pas le temps de chercher même si ça m'intéresserait ;)
05/05/2008, 17h26
orphen

merci pour cette explication clair.

Alors en fait je suis un peu maniaque dans ma facon de coder.

je vérifie chaque bloc avec des border ou couleur de fond et corrige les problème de compatibilité entre les navigateurs.

Lorsque je mets des flottant j'ai pris pour habitude de mettre des overflow auto afin de corriger les problème de background qui peuvent être lier au flottant.

Merci en tout cas
05/05/2008, 22h54
Candygirl
Après étude de ton cas, fort intéressant d'ailleurs (je te fais grâce des détails ;)), il s'avère que c'est le mix entre tes 2 overflow qui conduisent à la situation critique. Je te propose plutôt de remplacer le premier par un float et laisser le deuxième avec l'overflow (le comportement du display:table pouvant poser problème suivant ton contenu futur). En résumé:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #navigation{ margin-left:2px; background:#F2F2F2; width:981px; float:left; } .calage_bloc_fiche{ width:860px; margin:10px auto 0 auto; overflow:auto; }
Et tu dois clearer après du coup:

Code:

<div class="bordure_grise" style="clear:both;">

Ce qui règle, par ailleurs, le problème de la scroll-bare qui apparaissait lorsqu'on affichait le dernier menu déroulant.
06/05/2008, 10h15
orphen

Merci beaucoup pour ton aide.

Je suis content que mon problème t'ai intéressé.

Par contre si tu as le temps pourrais tu m'expliquer ta démarche pour arriver a cette conclusion.

(en MP ou sur le forum comme tu veux).

Merci beaucoup de ton aide en tout cas.