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:
voici egalement 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 <!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élections</a></td> <td><a href="#" class="lien_sous_menu">Messages</a></td> </tr> </table> </div> <!-- Mettre textes ici --> </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 --> </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 --> </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>
et le css de la zone qui bug:
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 /*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; }
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.
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 /******************************************/ /******* 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; }
Merci par avance de votre aide
Partager