position fixed sur ie

**kohsaka** · 26/09/2008, 16h34

bonjour à tous,

j'essaye de réaliser un menu qui reste toujours affiché a l'écran.
pour cela j'utilise la propriété "position: fixed;" qui marche très bien sous Firefox, mais qui malheureusement ne fonctionne pas sur ie6 (sur ie7 c'est pas parfait mais pas problématique).

en faisant uen recherche j'ai trouvé ceci : position fixed sans JS mais ça ne fonctionne pas.

c'est le div id="test" que j'essaye de garder affiché sur la page de préférence dans le rectangle bleu

mon code html :

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
 
<!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" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" /> 
	<title>Colors Design</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="background"></div>
	<div id="container">
		<div id="header"></div>
		<div id="main">
			<div id="menu">
				<div id="test"></div>
			</div>
			<div id="content"></div>
			<br class="clear" />
		</div>
	</div>
	<div id="footer">
		<div id="centerfooter">
			<p class="leftmention">all rights reserved</p>
			<p class="rightmention">Home | Contact me</p>
		</div>
	</div>
</body>
</html>

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
 
body {
    margin: 0; /* pour éviter les marges */
    text-align: center; /* pour corriger le bug de centrage IE */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #FFFFFF;
	background-color: #333333;
}
 
div#container {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -159px;
}
 
#background {
	position: static;
	left: 0;
	margin: 0;
	width: 100%;
	height: 160px;
	background: #FF9900;
}
 
#header {
	height: 160px;
	background: #FF9900;
}
 
#main {
	background-color: #403B3B;
	margin-bottom: 10px;
}
 
#menu {
	width: 150px;
	height: 1600px;
	float: left;
	background-color: #33CCFF;
}
 
#test {
	position:fixed;
	width: 150px;
	height: 400px;
	top: 50%;
	margin-top: -200px;
	background-color: #FF0000;
}
 
#content {
	float: right;
}
 
#footer {
	background: #000;
}
 
#centerfooter {
	width: 900px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	line-height: 60px;
}
 
.clear {
	clear: both;
}
 
.leftmention {
	float: left;
	margin-left: 10px;
}
 
.rightmention {
	float: right;
	margin-right: 10px;
}

merci pour votre aide.

**12monkeys** · 26/09/2008, 19h36

Bonjour

Ceci fonctionne chez moi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!--[if lte IE 6]>
<style type="text/css">
.fixed_ie6 {
width:1000px;
 position: absolute;
 top:expression(documentElement.scrollTop+body.scrollTop);
 }
body { 
 background: url(null) fixed ; /* évite le sautillement */
 }
</style>
<![endif]-->

code à mettre entre les balises <head>

Puis ceci dans le corps :

Code html :

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

1
2
3
  <div class="fixed_ie6">
contenu
  </div>

**kohsaka** · 26/09/2008, 22h10

bon ça ne marchait pas au départ, puis je me suis dit que c'était peut être parce que je donnais 2 type de position différentes a un même div, donc voila la solution, qui marche parfaitement :

Code :

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

1
2
3
4
5
6
 
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css_ie6.css" />
<![endif]-->
...
<div id="test">menu</div>

contenu de css_ie6.css

Code :

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

1
2
3
4
5
6
7
8
 
#test {
	position: absolute;
	margin-top: 200px;
	margin-left: -75px;
	width: 150px;
	top: expression(documentElement.scrollTop+body.scrollTop);
}

voila.
merci de ton aide :)

position fixed sur ie

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager