DIV - CSS : Mise en page

**kendras** · 27/09/2007, 10h14

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 :

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

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

**onirisme** · 27/09/2007, 11h13

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

Code :

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

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 :

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

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 :

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

**kendras** · 27/09/2007, 11h42

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 ?

**onirisme** · 27/09/2007, 13h41

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

Code :

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

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?

DIV - CSS : Mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager