mise en page de div avec IE

**LEIôPAR** · 28/11/2008, 10h44

Bonjour
Je bute sur un problème de mise ne page... vous vous en doutez !

Pour FireFox, pas de problème, en deux coup de cuillère c'était réglé pile poil comme je veux.
Pour Internet explorer... c'est une autre chanson !
j'ai extrait des styles communs tout ce dont IE(6) ne s'occupe pas et je cherche des alternatives.

Voici mon code actuel :

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
<?xml version="1.0" encoding="ISO-8859-15" ?><!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" xml:lang="fr" lang="fr">
	<head>
		<title>titre</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
 
		<style type="text/css" >
			#haut{
				position: absolute;
				overflow-x: auto;
				overflow-y: hidden;
				left: 150px;
				top: 0pt;
				height: 80px;
				background-color: red;
				text-align: center;
			}
 
			#gauche{
				position: absolute;
				overflow: auto;
				left: 0px;
				top: 200px; background-color:pink;
			}
 
			#droite{
				position: absolute;
				overflow: auto;
				left: 30%;
				top: 80px;
				background-color:blue
			}
		</style>
 
		<!--[if !IE]> <!-->
			<style type="text/css" >
				#haut{
					right: 0px;
				}
 
				#gauche{
					right:30%;
					bottom: 0pt;
				}
 
				#droite{
					right: 0px;
					bottom: 0pt;
				}
			</style>
		<!--> <![endif]-->
 
		<!--[if IE]> <!-->
			<style type="text/css" >
				#haut{
 
				}
 
				#gauche{
					width:30%;
				}
 
				#droite{
					width:70%;
				}
			</style>
		<!--> <![endif]-->
 
	</head>
	<body>
		<div id="haut">
			haut...
		</div>
		<div id="gauche">
			gauche...
		</div>
		<div id="droite">
			droite...
		</div>
	</body>
</html>

voici ce que ca donne :
http://leiopar.free.fr//DISKETTE/bug_ie/mep.html(avec plein de texte)
http://leiopar.free.fr//DISKETTE/bug_ie/mep_vide.html(avec le minimum)

Y a t'il quelqu'un qui ai eu le même genre de problème ?
merci de votre attention.

**c_s_s** · 28/11/2008, 14h02

Bonjour,

A priori, le navigateur fait ce que tu lui indiques dans la feuille de style.

Qu'est-ce que tu es censé obtenir ?

**LEIôPAR** · 28/11/2008, 15h43

Le but est d'obtenir sur IE6 (et 7) le même rendu que sur FireFox :

**devyan** · 01/12/2008, 15h13

Salut,

Quelque chose me chagrine légèrement dans ton exemple...

Tu mélanges allègrement les positions et dimensions en "px" et "%"

Ce qui rend difficile de demander au navigateur de faires les choses lui même...

Du genre "left:30%; width:70%;" soit un total de 100%

**LEIôPAR** · 01/12/2008, 21h51

Difficile ?
Ben... Firefox y arrive bien pourtant !

c'est surtout que IE ne semble pas conaitre pas les termes "bottom" et "right"
ou même "height:100%"

Ne me dites pas que je vais devoir passer par un tableau !

**LEIôPAR** · 01/12/2008, 23h58

bon...
avec une rustine Javascript, j'arrive a faire faire ce que je veux a IE6, mais je ne trouve pas ça très satisfaisant...

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
<!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>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title></title>
<style type="text/css" >
	html,body{overflow-y: hidden ; margin:0;}
</style>
<script type="text/javascript">
function rustineIE1(){
		var larg = (document.documentElement.clientWidth);
		var haut = (document.documentElement.clientHeight);
		document.getElementById('haut').style.width=larg-200;
		document.getElementById('gauche').style.height=haut-200;
		document.getElementById('droite').style.height=haut-80;
	}
window.onresize =function rustineIE2(){rustineIE1()};
window.onload =function rustineIE3(){rustineIE1()};
</script>
</head>
<body>
<div id="haut" style="position: absolute;overflow:auto;left: 200px; top: 0pt; height: 80px;background-color:red;">1</div>
<div id="gauche" style="position: absolute;overflow:auto;left: 0px;width:30%; top: 200px;background-color:pink">2</div>
<div id="droite" style="position: absolute;overflow:auto;left: 30%;width:70%;top: 80px;background-color:blue">3</div>
<br />
</body>
</html>

**LEIôPAR** · 02/12/2008, 20h21

Ce qui, au final, me donne ceci comme code :

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
<?xml version="1.0" encoding="ISO-8859-15" ?><!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" xml:lang="fr" lang="fr">
	<head>
		<title>titre</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
 
		<style type="text/css" >
 
 
 
			#haut{
				position: absolute;
				overflow-x: auto;
				overflow-y: hidden;
				left: 150px;
				top: 0;
				height: 80px;
				background-color: coral;
				text-align: center;
				border-bottom:2px solid seagreen;
			}
 
			#gauche{
				position: absolute;
				overflow: auto;
				left: 0px;
				width:30%;
				top: 200px; background-color:pink;
			}
 
			#droite{
				position: absolute;
				overflow: auto;
				left: 30%;
				background-color:cyan;
				border-left:2px solid seagreen;
			}
 
		</style>
 
 
 
		<!--[if IE]><![if !IE]><![endif]-->
			<style type="text/css" >
				#haut{
					right: 0px;
				}
 
				#gauche{
					bottom: 0pt;
				}
 
				#droite{
					right: 0px;
					top: 82px;
					bottom: 0pt;
					background-color:green;
				}
 
 
			</style>
		<!--[if IE]><![endif]><![endif]-->
 
		<!--[if lte IE 6]>
				<style type="text/css" >
					html,body{overflow: hidden ; margin:0;}
 
					#droite{
						width:70%;
						top: 80px;
						background-color:blue;
					}
				</style>
 
 
			<script type="text/javascript">
				function rustineIE1(){
						var larg = (document.body.clientWidth);
						var haut = (document.body.clientHeight);
						document.getElementById('haut').style.width=larg-150;
						document.getElementById('gauche').style.height=haut-200;
						document.getElementById('droite').style.height=haut-80;
					}
				window.onresize =function rustineIE2(){rustineIE1()};
				window.onload =function rustineIE3(){rustineIE1()};
 
				alert(document.body.clientHeight) ;
			</script>
		<![endif]-->
 
	</head>
	<body>
		<div id="haut">
			haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut&nbsp;haut
			<br/>haut<br/>haut<br/>haut
		</div>
		<div id="gauche">
 
			gauche&nbsp;gauche&nbsp;gauche&nbsp;gauche&nbsp;gauche&nbsp;gauche&nbsp;gauche&nbsp;gauche&nbsp;gauche
			<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche
			<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche
			<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche<br/>gauche
		</div>
 
		<div id="droite">
			droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite&nbsp;droite
			<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite
			<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite
			<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite<br/>droite
		</div>
	</body>
</html>

Je vais m'en contenter mais si quelqu'un a mieux...

Au faite quelqu'un peu t'il tester ca sur IE7 s'il vous plais ? (j'ai peur)
Merci

mise en page de div avec IE

CSS

Discussions similaires

Partager

Partager