Comment résoudre le problème de Z-index sur IE 6 ?

**razily** · 26/03/2012, 14h39

Bonjour à tous ;

voilà j'ai quelque problème avec IE6 en effet j'ai tenté de faire un menu déroulant et dan sle contenu en bas y a une image :

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
 
	<div class="grid_12" id="menuliste">
 
 
 
 
	 <div class="containeur-menu">
 
 
			<dl>
	<dt><a  href="http://localhost/MonSite/">
												Accueil
</a></dt>
 
 
 
</dl>
</div>
</div>

dans le fichier principal c'est à dire le contenu :

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
 
 <div class="grid_12" id="contenu">
 
 <div class="grid_9 suffix_1  omega" id="imagebar">
 
                <div id="banner">
 
 
 
             <div id="slider">
 
 
            <a href="#"><img src="<?php echo base_url(); ?>image/fondCss/01.jpg" alt="Foto 1" title="Choco-Slider weighs only 7kb."></a>
            <a href="#"><img src="<?php echo base_url(); ?>image/fondCss/02.jpg" alt="Foto 2" title=""></a>
            <a href="#"><img src="<?php echo base_url(); ?>image/fondCss/03.jpg" alt="Foto 3" title="Choco-Slider se encuentra liberado bajo la MIT Licence."></a>
            <a href="#"><img src="<?php echo base_url(); ?>image/fondCss/04.jpg" alt="Foto 4" title=""></a>
            <a href="#"><img src="<?php echo base_url(); ?>image/fondCss/05.jpg" alt="Foto 5" title="Choco-Slider is compatible with all browsers today."></a>
 
 
 
              </div>
 
 
 
                </div>
            </div>
........ etc ... ici la suite...
</div>

sauf que voilà quand je tente de mettre dans le code css z-index IE6 ne reconnait pas et le menu déroulant passe derrière l'image
voici code css menu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* height pourra etre 768 px;1024px */
 
div.container_12{background-color:#FFFFFF;height:1024px;margin-top:10px;margin-bottom: 10px;}
 
 
div#menuliste.grid_12{background-color:#467CBF;height:40px;position:relative;margin-bottom: 10px;z-index: 2;}
 
div.containeur-menu{position:absolute;}
div.containeur-menu dl{height:40px;margin:0;padding:0;display:block;float:left;width:150px;}
 
div.containeur-menu dl dt a{display:block;width:150px;height:40px;line-height:40px;
color:#EADEDE;text-align:center;border-right:dotted 1px #4F0E0E; cursor:pointer;text-decoration: none;font-size: 16px;}

et celui du principal

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
 
/* ce fichier  vise a mettre en forme le contenu du fichier principal.php */
 
/* contenu */
#contenu {
border:1px solid ;
height:340px;
margin-bottom:15px;
z-index: 1;
}
 
 
#banner{
 
 
/*border-width:1px;
border-style:solid;
border-color: #DDDDDD
*/
 
/*
border:solid 1px ;
height:220px;
margin-top:5px;
*/
 
margin-top:2px;
z-index: 1;
}
 
#imagebar
{z-index: 1;}

est ce que quelqu'un a une idée ??

merci

**Candygirl** · 28/03/2012, 13h33

Hello,

La propriété z-index n'est applicable qu'aux éléments positionnés. Cela ne semble pas être le cas de ton #contenu ?

Autrement un lien vers la page en question permettrait de t'aider plus facilement.

**razily** · 30/03/2012, 16h17

Bonjour ;

voilà je tente de positionner mais y a toujours cette petite espace entre le menu et le sous menu je ne sais pas comment l'enlever :

mon code se resume comme suit :

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
 
 
<div class="container_12">
 
 
 
 
            <div class="grid_3 suffix_9">
                <div id="entete">
 
                    <img src="<?php  echo base_url();?>image/fondCss/zozor_logo.png" alt="logo" />
                </div>
 
            </div>
                <div class="clear"></div>
 
 
 
 
						<div class="grid_12" id="menuliste">
 
 
 
 
								 <div class="containeur-menu">
 
 
			<dl>
						  <dt><a  href="http://localhost/MonSite/">
												Accueil
								</a></dt>
 
 
 
				</dl>
 
		<dl>
						  <dt> <a  href="<?php echo site_url('client/gestionHomme/'); ?>" title="Homme">Lehilahy</a> </dt>
								<dd>
												<ul>
					<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/homme/baskets/">Baskets</a></li>
					<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/homme/boots/">Boots</a></li>
					<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/homme/basses/">Basses</a></li>
					<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/homme/sports/">Sports</a></li>
												</ul>
 
								</dd>
 
 
		</dl>
 
		<dl>
						  <dt><a  href="<?php echo site_url('client/gestionFemme/'); ?>" title="Femme">Vehivavy</a></dt>
								<dd>
												<ul>
																								<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/femme/ballerines/">Ballerines</a></li>
																									<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/femme/baskets/">Baskets</a></li>
																										<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/femme/boots/">Bottes & Boots</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/femme/escarpins/">Escarpins</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/femme/sports/">Sports</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/femme/basses/">Basses</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/femme/montantes/">Montantes</a></li>
												</ul>
 
								</dd>
 
 
		</dl>
 
 
		<dl>
						  <dt><a  href="<?php echo site_url('client/gestionEnfant/'); ?>" title="Enfant">Ankizy</a></dt>
								<dd>
												<ul>
																								<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/enfant/ballerines/">Ballerines</a></li>
																									<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/enfant/baskets/">Baskets</a></li>
																										<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/enfant/boots/">Bottes & Boots</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/enfant/escarpins/">Escarpins</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/enfant/sports/">Sports</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/enfant/basses/">Basses</a></li>
																											<li><a href="http://localhost/MonSite/index.php/client/getChaussureGenreStyle/enfant/montantes/">Montantes</a></li>
												</ul>
 
								</dd>
 
 
		</dl>
 
 
		<dl>
												<dt><a  href="<?php echo site_url('annonce'); ?>">Annonce</a></dt>
												<dd>
																								<ul>
																																				<li><a href="<?php echo site_url('annonce'); ?>">hametraka</a></li>
																								</ul>
 
																										<ul>
																																				<li><a href="<?php echo site_url('annonce/afficherAnnonce'); ?>">hijery</a></li>
																								</ul>
												</dd>
		</dl>
 
 
 
		<dl>
												<dt> <a href="#">gestion</a> </dt>
												<dd>
																								<ul>
																								<li><?php   echo anchor('client/gestionContact', 'Contact'); ?></li>
																										<li><?php echo anchor('site/formulaire_chaussure', 'formulaire '); ?></li>
                                                                                                        <li><?php echo anchor('site/supprimer', 'supprimer '); ?></li>
                                                                                                        <li><?php echo anchor('site/updateinfos', 'MAJ infos '); ?></li>
                                                                                                          <li><?php echo anchor('site/updateinfosAutre', 'MAJ 2 coul '); ?></li>
 
																								</ul>
												</dd>
 
 
 
 
 
		</dl>
 
 
 
 
 
 
 
 
 
 
 
					   </div>
 
 
 
                        </div>
 
             <div class="clear"></div>

code css :

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
 
 
/* ce fichier sert a la mise en forme de entete */
 
 
 
 
 
 
 
/* ce fichier sert a la mise en forme de entete */
 
 
 
body{
 
 /*  background-color:  #DDE7FF;*/
	 /*background-color: #62942A;*/
 background-color:  #89B556;
}
 
 
/* le logo et entete */
 
#entete {
 
 
height: 72px;
float: left ;
 
margin:0;
 
padding: 0;
 
}
 
 
 
/*------------------------------------fin logo -***********/
 
/* partie menu */
 
 
/* height pourra etre 768 px;1024px */
 
/*div.container_12{background-color:#FFFFFF;height:1024px;margin-top:10px;margin-bottom: 10px;}*/
 
div.container_12{background-color:#FFFFFF;height:1024px;margin-bottom: 10px;position:relative;}
 
 
 
 
div#menuliste.grid_12{background-color:#467CBF;height:40px;position:relative;margin-bottom: 10px;z-index: 2;}
 
div.containeur-menu{position:absolute;}
div.containeur-menu dl{height:40px;margin:0;padding:0;display:block;float:left;width:150px;}
 
div.containeur-menu dl dt{height: 40px;display: block;color:#FFF;}
 
div.containeur-menu dl dt a{display:block;width:150px;height:40px;line-height:40px;
color:#EADEDE;text-align:center;border-right:dotted 1px #4F0E0E; cursor:pointer;text-decoration: none;font-size: 16px;}
 
div.containeur-menu dl dt a:hover{background-color:#7A991A;}
 
div.containeur-menu dl dd{display:block;margin:0;padding:0;background-color:#73A4C6;width:150px;}
 
div.containeur-menu dl dd ul{margin:0;padding:0;text-align:center;list-style:none;}
 
div.containeur-menu dl dd ul li{display:block;margin:0;padding:0;}
 
div.containeur-menu dl dd ul li a{width:150px; color:#EADEDE;
text-decoration:none;height:30px;line-height:30px;border-top:dotted 1px #4F0E0E;
border-bottom:dotted 1px #467CBF; display:block;}
 
div.containeur-menu dl dd ul li a:hover {background-color:#7A991A;color:#FFF;}
 
div.containeur-menu dl:hover dd{display:block;}
 
div.containeur-menu dl dd{display:none;}
 
 
 
 
 
 
/***********************************fin entete *********/

j'ai tenté de mettre comme suit mais le problème reste :

Code :

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

1
2
3
4
 
div#menuliste.grid_12{background-color:#467CBF;height:40px;position:relative;margin-bottom: 10px;z-index: 2;}
 
div.containeur-menu{position:absolute;}

vous pouvez le voir l'image : (pièce jointe )

Comment résoudre le problème de Z-index sur IE 6 ?

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager