z-index sous IE

Version imprimable

z-index sous IE

Bonjour j'essaie désespérément mettre devant tout ma barre de menu "menudemarrer" devant tous les composants mais j'y arrive pas il reste toujours en arriere plan. Ca ne marche pas sous IE.

Ci-dessous mon code html et css:

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
<html>
 
<head>
<link rel="stylesheet" type="text/css" href="rs.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/accueil.js" type="text/javascript"></script>
<script src="js/jqueryprogressbar.js" type="text/javascript"></script>
</head>
 
 
<body class="accueil">
 
<div class="desktop" onclick="echapdemarrer();">
	<div id="principal">
	<fieldset class="barchoix"><legend class="ielegend">filtres</legend></fieldset>
	<fieldset class="barchoix"><legend class="ielegend">parametres</legend></fieldset>
	<object id="rapport" type="text/html" data=""></object>
	</div>
	<ul id="menudemarrer">
			<li><a href="">GTS</a></li>
			<li><a href="">SC</a></li>
			<li><a href="">History</a></li>
			<li><a href="">Outstanding</a></li>
	</ul>
</div>
 
<div class="statusbar">
	<button id="btndemarrer" onclick="mndemarrer();">Demarrer</button>
</div>
 
</body>
</html>

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
.accueil{
	margin:0;
	padding:0;
}
.statusbar{
	background-color:#000088;
	height:8%;
	border-top-style:solid;
	border-top-width: thin;
	border-top-color: black;
}
 
.desktop{
	background-color:#0022FF;
	height:90%;
}
 
#principal{
	height:100%;
}
 
 
.barchoix{
	margin: 0 10px;
	height:25%;
	width:45%;
	color:white;
	border:2px solid white;
	display:inline;	
}
 
.ielegend{
	color:white;	
}
#rapport{
	margin:10px;
	height:65%;
	width:95%;
	border:1px solid white;
	z-index:0;
}
 
 
ul#menudemarrer{
	margin:0;
	padding:0;
	height:30%;
	width:150px;
	position:absolute;
	z-index:3000;
	bottom:10%;
	background-color: darkgray;
	list-style-type: none;
	border:1px solid #486B02;
	background:  url("../img/menu_demarrer2.png") no-repeat bottom left #A8A8A8;
}
 
#btndemarrer{
	margin:3px;
	height:30px;
	width:150px;
	border: solid;
	background-color:gray;
	padding:0;
	border-color:white;
	border-width: thin;
	text-align: center;
	color:white;
	font-family: monospace;
}
 
 
ul#menudemarrer a{
	display:block;
	height:25%;
	color: white;
	font-style:oblique;
	font-family:monospace;
	font-size:small;
	text-decoration:none;
	height:auto;
	border-top:1px solid white;
	border-bottom:1px solid gray;
	background: url("../img/menu_demarrer.png") no-repeat 5% 50%;
	text-align: right;
}
 
ul#menudemarrer a:hover,
ul#menudemarrer a:focus
ul#menudemarrer .selected a{
	background-color:000088;
}
 
ul#menudemarrer li {
	display:inline;
}

Merci de votre aide.

21/08/2012, 11h17
Candygirl
Bonjour,

Il est essentiel d'indiquer un doctype tout en haut de tes pages afin que les navigateurs interprètent tes pages au plus près des recommandations html/css.
Code:

1 2 3 4 5 6 7 #rapport{ margin:10px; height:65%; width:95%; border:1px solid white; z-index:0; }
La propriété z-index n'est applicable qu'aux éléments positionnés ce qui semble ne pas être le cas pour #rapport ?

merci.

j'ai essayé de modifier un peu (mais sans le doctype). Mais malgré les positionnements absolus je n'y arrive toujours pas.Ci-dessous mon html et mon css.

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
 
<html>
 
<head>
<link rel="stylesheet" type="text/css" href="rs.css" />
<!-- <script src="js/jquery.js" type="text/javascript"></script>
<script src="js/accueil.js" type="text/javascript"></script>
<script src="js/jqueryprogressbar.js" type="text/javascript"></script> -->
</head>
 
 
<body class="accueil">
 
<div class="desktop">
	<div id="principal">
	<fieldset class="barchoix"><legend class="ielegend">filtres</legend></fieldset>
	<fieldset class="barchoix"><legend class="ielegend">parametres</legend></fieldset>
	 <<object id="rapport" type="text/html"></object>
	</div>
	<ul id="menudemarrer">
			<!-- <li><a href="">GTS</a></li>
			<li><a href="">SC</a></li>
			<li><a href="">History</a></li>
			<li><a href="">Outstanding</a></li> -->
	</ul>
</div>
 
<div class="statusbar">
	<button id="btndemarrer">Demarrer</button>
</div>
 
</body>
</html>

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
.accueil{
	margin:0;
	padding:0;
}
.statusbar{
	position:relative;
	bottom:0;
	background-color:#000088;
	height:8%;
	width:100%;
	border-top-style:solid;
	border-top-width: thin;
	border-top-color: black;
}
 
.desktop{
	position:relative;
	top:0;
	background-color:#0022FF;
	height:92%;
}
 
#principal{
	position:absolute;
	height:100%;
	width:100%;
}
 
ul#menudemarrer{
	position:absolute;
	margin-left:4px;
	padding:0;
	height:30%;
	bottom:0;
	width:150px;
	background-color: darkgray;
	list-style-type: none;
	border:1px solid #486B02;
	background:  url("../img/menu_demarrer2.png") no-repeat bottom left #A8A8A8;
	z-index:3000;
}
 
 
 
.barchoix{
	margin: 0 10px;
	height:100px;
	width:550px;
	color:white;
	border:2px solid white;
	float:left;
}
 
.ielegend{
	color:white;	
}
#rapport{
	position:absolute;
	left:10px;
	top:120px;
	margin:5px;
	height:450px;
	width:1100px;
	border:1px solid white;
	z-index:0;
}
 
 
 
#btndemarrer{
	margin:3px;
	height:30px;
	width:150px;
	border: solid;
	background-color:gray;
	padding:0;
	border-color:white;
	border-width: thin;
	text-align: center;
	color:white;
	font-family: monospace;
}
 
 
ul#menudemarrer a{
	display:block;
	height:25%;
	color: white;
	font-style:oblique;
	font-family:monospace;
	font-size:small;
	text-decoration:none;
	height:auto;
	border-top:1px solid white;
	border-bottom:1px solid gray;
	background: url("../img/menu_demarrer.png") no-repeat 5% 50%;
	text-align: right;
}
 
ul#menudemarrer a:hover,
ul#menudemarrer a:focus
ul#menudemarrer .selected a{
	background-color:000088;
}
 
ul#menudemarrer li {
	display:inline;
}

23/08/2012, 08h14
Bovino

Citation:

Envoyé par mafanta

j'ai essayé de modifier un peu (mais sans le doctype).

Citation:

Envoyé par Candygirl

Il est essentiel d'indiquer un doctype

:roll:

- J'ai un problème, j'essaye de fixer une vis au mur mais je n'y arrive pas.
- Il te faut un tournevis.
- Ah, d'accord, donc j'ai essayé en changeant la vis (mais sans tournevis) et je n'y arrive toujours pas ?

Bonjour

En mettant un doctype, ca change completement mes mises en forme. Quel doctype dois je mettre?

J'ai mis les 3 doctypes ci-dessous:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	
 
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
 
<head>
<link rel="stylesheet" type="text/css" href="rs.css" />
<!-- <script src="js/jquery.js" type="text/javascript"></script>
<script src="js/accueil.js" type="text/javascript"></script>
<script src="js/jqueryprogressbar.js" type="text/javascript"></script> -->
</head>
 
 
<body class="accueil">
 
<div class="desktop">
	<div id="principal">
	<fieldset class="barchoix"><legend class="ielegend">filtres</legend></fieldset>
	<fieldset class="barchoix"><legend class="ielegend">parametres</legend></fieldset>
	 <<object id="rapport" type="text/html"></object>
	</div>
	<ul id="menudemarrer">
			<!-- <li><a href="">GTS</a></li>
			<li><a href="">SC</a></li>
			<li><a href="">History</a></li>
			<li><a href="">Outstanding</a></li> -->
	</ul>
</div>
 
<div class="statusbar">
	<button id="btndemarrer">Demarrer</button>
</div>
 
</body>
</html>

De même en ne laissant que le premier doctype,mon document est completement modifié:

Citation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

D'avance merci.

Bonjour,

J'ai choisi le doctype xhtml1.0 et j'ai validé mon xhtml et mon css sur le site du w3c et c'est maintenant valide. Par contre j'ai toujours des affichages bizarres. Savez-vous ce que je dois faire?
Ci-dessous ma page html et mon css.

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
<!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">
 
<head>
<title>page accueil</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="rs.css" />
</head>
 
 
<body class="accueil">
 
<div class="desktop">
	<div id="principal">
		<fieldset class="barchoix"><legend class="ielegend">filtres</legend></fieldset>
		<fieldset class="barchoix"><legend class="ielegend">parametres</legend></fieldset>
	 	<object id="rapport" type="text/html"></object>
	</div>
	<ul id="menudemarrer">
			<li><a href="">GTS</a></li>
			<li><a href="">SC</a></li>
			<li><a href="">History</a></li>
			<li><a href="">Outstanding</a></li>
	</ul>
</div>
 
<div class="statusbar">
	<button id="btndemarrer">Demarrer</button>
</div>
 
</body>
</html>

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
.accueil{
	margin:0;
	padding:0;
}
.statusbar{
	position:relative;
	bottom:0;
	background-color:#000088;
	height:8%;
	width:100%;
	border-top-style:solid;
	border-top-width: thin;
	border-top-color: black;
}
 
.desktop{
	position:relative;
	top:0;
	background-color:#0022FF;
	height:92%;
}
 
#principal{
	position:absolute;
	height:100%;
	width:100%;
}
 
ul#menudemarrer{
	position:absolute;
	margin-left:4px;
	padding:0;
	height:30%;
	bottom:0;
	width:150px;
	background-color: darkgray;
	list-style-type: none;
	border:1px solid #486B02;
	background:  url("../img/menu_demarrer2.png") no-repeat bottom left #A8A8A8;
	z-index:3000;
}
 
 
 
.barchoix{
	margin: 0 10px;
	height:100px;
	width:550px;
	color:white;
	border:2px solid white;
	float:left;
}
 
.ielegend{
	color:white;	
}
#rapport{
	position:absolute;
	left:10px;
	top:120px;
	margin:5px;
	height:450px;
	width:1100px;
	border:1px solid white;
	z-index:0;
}
 
 
 
#btndemarrer{
	margin:3px;
	height:30px;
	width:150px;
	border: solid;
	background-color:gray;
	padding:0;
	border-color:white;
	border-width: thin;
	text-align: center;
	color:white;
	font-family: monospace;
}
 
 
ul#menudemarrer a{
	display:block;
	height:25%;
	color: white;
	font-style:oblique;
	font-family:monospace;
	font-size:small;
	text-decoration:none;
	height:auto;
	border-top:1px solid white;
	border-bottom:1px solid gray;
	background: url("../img/menu_demarrer.png") no-repeat 5% 50%;
	text-align: right;
}
 
ul#menudemarrer a:hover,
ul#menudemarrer a:focus
ul#menudemarrer .selected a{
	background-color:#000088;
}
 
ul#menudemarrer li {
	display:inline;
}

Merci pour votre aide....

26/08/2012, 22h13
Candygirl
:ccool: pour le doctype et la validation.

Citation:

Envoyé par mafanta

Savez-vous ce que je dois faire?

Non, sans connaître le résultat escompté cela va être difficile ;)

Il y a des incohérences dans ton css:

- Tu attribues à .desktop et .statusbar une hauteur en % alors que celle du parent est indéterminée (puisque fonction de son contenu). Cette hauteur est donc tout simplement ignorée par le navigateur.

- Tu positionnes #principal et ul#menudemarrer en absolute avec une hauteur de 100% de son plus proche ancêtre positionné, soit desktop. Vu que dektop n'a aucun contenu autre que tes 2 absolute, il n'a pas de hauteur et il en est donc de même pour #principal et ul#menudemarrer...

J'imagine qu'ajouter un
Code:

1 2 3 html, body { height:100%; }
à ton code devrait permettre de se rapprocher du résultat escompté.
27/08/2012, 08h42
mafanta

Merci Candygirl!!
Effectivement ca remet les choses en ordre. Sauf que sous IE, j'ai toujours l'élément menudemarrer qui est sous l'élément rapport alors que son z-index est plus élevé. Merci pour ton aide.

C'est bizarre! J'ai l'impression que quand je remplace object par un div (pour l'élément rapport) ca marche. Le probleme est que ca ne m'arrange pas trop d'avoir un div à la place de object car je compte y placer toute une page jsp.

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
<!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">
 
<head>
<title>page accueil</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="rs.css" />
</head>
 
 
<body class="accueil">
 
<div class="desktop">
	<div id="principal">
		<fieldset class="barchoix"><legend class="ielegend">filtres</legend></fieldset>
		<fieldset class="barchoix"><legend class="ielegend">parametres</legend></fieldset>
	 	<!-- <object id="rapport" type="text/html"></object> -->
		<div id="rapport"></div>
	</div>
	<ul id="menudemarrer">
			<li><a href="">GTS</a></li>
			<li><a href="">SC</a></li>
			<li><a href="">History</a></li>
			<li><a href="">Outstanding</a></li>
	</ul>
</div>
 
<div class="statusbar">
	<button id="btndemarrer">Demarrer</button>
</div>
 
</body>
</html>