z-index sous IE

**mafanta** · 21/08/2012, 09h32

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 :

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
<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 :

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
.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.

**Candygirl** · 21/08/2012, 12h17

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 :

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

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 ?

**mafanta** · 22/08/2012, 19h53

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 :

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
 
<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 :

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
.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;
}

**Bovino** · 23/08/2012, 09h14

Envoyé par mafanta

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

Envoyé par Candygirl

Il est essentiel d'indiquer un doctype

- 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 ?

**mafanta** · 24/08/2012, 09h27

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 html :

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
<!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é:

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

D'avance merci.

**mafanta** · 26/08/2012, 19h16

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 html :

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
<!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 :

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
.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....

**mafanta** · 27/08/2012, 09h42

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.

**mafanta** · 27/08/2012, 22h21

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 :

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
<!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>

z-index sous IE

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager