DIV - CSS : Mise en page

Version imprimable

Bonjour,

comme beaucoup d'autres, j'ai un problème de mise en page avec les DIV (quand même, les Tables c'était carrément plus simple même si plus crade :p)

Sous IE 6, la page s'affiche correctement. Je voudrais qu'il en soit de même sous FireFox.

voici mon code 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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head id="head">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Titre de la page</title>
  <style type="text/css">
			@import url( css/Base.css);
			@import url( css/PageZone.css);
  </style>
	</head>
	<body>
	    <center>
		    <div id="container">
			    <div id="entete">ENTETE</div>
			    <div id="centre">
				    <div id="menu">menu</div>
				    <div id="page">
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    A
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    </div>
			    </div>
			    <div id="pied">pied de page</div>
		    </div>
		</center>
	</body>
</html>

voici mon css qui gère mes div

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
/* --- GÉNÉRAL --- */	
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
 
/* --- BLOC CONTENEUR GLOBAL --- */
#container {
    position: relative;
    width: 80%;
    margin: 0 auto;
    min-height: 99%;
    background-color : yellow;
    border: 1px solid gray; 
}	
 
#entete {
    margin-top: 0;
    height : 60px;
    background-color : #93522F;
    border-bottom: 1px solid gray; 
}
 
#centre {
    background-color : blue !important;
    min-height: 100%;
}	
 
#menu {
    float: left;
    background-color : blue !important;
    width : 20%;
}
 
#page {
    float: right;
    background-color : green !important;
    width : 80%; 
 
}	
 
#pied {
    margin-bottom: 0;
    padding-bottom: 8px;
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 8px;
    border-top: 1px solid gray; 
    background-color:#C0C0C6;
    text-align:center;
}

Sous FireFox, mon pied de page se positionne malheureusement en dessous de mon entete.
Quelqu'un pourrait-il me donner un coup de main ?

Merci d'avance.

Tu as un problème général de définition

Code:

1
2
3
4
5
6
7
8
 
#pied {
    margin-bottom: 0;
    padding-bottom: 8px;
    position: absolute;
    bottom: 0; 
    left: 0;
    etc...

En indiquant ces valeurs, le footer n'est pas bien placé. Mieux vaut placer tes blocks en "relative" ils se placeront en fonction de ton conteneur. J'ai retiré certains éléments :

Code:

1
2
3
4
5
6
7
8
9
10
 
#pied {
    position: relative;
    clear : both; 
    width: 100%;
    height: 28px;
    border-top: 1px solid gray; 
    background-color:#C0C0C6;
    text-align:center;
}

Voici un code complet (j'ai tout mis sur la même page) :

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
 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<style type="text/css">
 
 
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
 
/* --- BLOC CONTENEUR GLOBAL --- */
#container {
    position: relative;
    width: 80%;
    margin: 0 auto;
    min-height: 99%;
    background-color : yellow;
    border: 1px solid gray; 
}	
 
#entete {
	position: relative;
    margin-top: 0;
    height : 60px;
    background-color : #93522F;
    border-bottom: 1px solid gray; 
}
 
#centre {
	position: relative;
    background-color : blue !important;
    min-height: 100%;
}	
 
#menu {
	position: relative;
    float: left;
    background-color : blue !important;
    width : 20%;
}
 
#page {
	position: relative;
    float: right;
    background-color : green !important;
    width : 80%; 
 
}	
 
#pied {
    position: relative;
    clear : both; 
    width: 100%;
    height: 28px;
    border-top: 1px solid gray; 
    background-color:#C0C0C6;
    text-align:center;
}	
 
 
		</style>
	</head>
	<body>
	    <center>
		    <div id="container">
			    <div id="entete">ENTETE</div>
			    <div id="centre">
				    <div id="menu">menu</div>
				    <div id="page">
				    PAGE
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    <br />
				    </div>
			    </div>
			    <div id="pied">pied de page</div>
		    </div>
		</center>
	</body>
</html>

PS. Pouquoi tu as mis dans ton css des !important à ces endroits?

27/09/2007, 11h42
kendras

le !important doit être un résidu que j'ai omis d'enlever.

Merci pour ton coup de main.
mais du cou l'aperçu sous IE n'est plus bon ...

Je pense faire un test pour envoyer la bonne feuille de style selon le navigateur.

Il y aurait-il une autre solution ?

min-height: 99%; n'est pas interprété par ie, il faut donc lui indiquer (par exemple pour faire simple) un height ->
Code:

1 2 3 4 5 6 7 8 9 10 #container { position: relative; width: 80%; margin: 0 auto; min-height: 99%; !important /* taille minimal pour les moteur gecko et IE7 (firefox)*/ height: 99% ; /* taille max pour IE6 */ background-color : yellow; border: 1px solid gray; }
Ca va surement résoudre ton problème mais je suis pas sur j'ai pas ie. Ce que je comprend pas c'est pourquoi ça fonctionnait avant sur ie?