Hauteur du contenant en fonction de la page

Version imprimable

Bonjour à tous,

Je suis actuellement en pleine création et un problème important ce pose à moi. Je cherche à faire un site qui soit completement flexible en hauteur et en largeur en fonction de la page.

Le site contient un bandeau haut, un centre et un pied de page. et le centre contient une colonne à gauche et une colonne à droite. Comme le montre le lien ci-dessous:

Essai

Mais lors de ma création, deux problèmes s'opposent à moi et se trouvent non-résolus:

1) Le centre dépasse en bas de page et fait automatiquement apparaitre un scrolling. Comment puis-je régler cette hauteur?

2) Entre les deux colonnes se trouvent le contenu et celui-ci n'apparait pas à l'écran alors qu'il est visible dans le code source.

Voici le code source:

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
 
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>
 
<style>
 
body, html {
        margin: 0px;
        padding: 0px;
        }
 
#bandeau {
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #CCFF00;
        }
        
#centre {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100px;
        }
        
#footer {
        position: absolute;
        width: 100%;
        height: 25px;
        bottom: 0px;
        background-color:#FF9900;
        }
        
#barreGauche {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: #666666;
        }
        
#barreDroite {
        position: absolute;
        width: 100px;
        height: 100%;
        right: 0px;
        background-color: #666666;
        }
        
barreCentre {
        position: absolute;
        margin-left: 100px;
        margin-right: 100px;
        background-color:#CCCCCC;
        }
 
</style>
 
 
<body>
	<div id="bandeau"></div>
	<div id="centre">
		<div id="barreGauche">eryertert</div>
		<div id="barreDroite">ertertertert</div>
		<div id="barreCentre">sdgdfhg fgh </div>		
	</div>
	<div id="footer"></div>
</body>
</html>

Pouvez-vous m'aider rapidement, j'ai besoin d'aide, c'est très urgent.

Merci par avance

Code:

1 2 3 4 5 6 barreCentre { position: absolute; margin-left: 100px; margin-right: 100px; background-color:#CCCCCC; }
Il te manque # pour la déclaration je pense.

30/05/2006, 11h17
Nemesys

En effet ! :P

Et # c'est pour id, et . c'est pour class ! (juste pour info)

en fait, je viens de me rendre compte de cette erreur et je venais la modifier sur le forum quand j'ai vu vos réponses. J'ai mis sur le net la version avec le "#" ajouté. Cela resout en partie le probleme numero 2 mais le 1 reste toujours d'actualité. Voici le nouveau lien et le nouveau code source:

nouveau lien

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
 
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>
 
<style>
 
body, html {
        margin: 0px;
        padding: 0px;
        }
 
#bandeau {
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #CCFF00;
        }
        
#centre {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100px;
        }
        
#footer {
        position: absolute;
        width: 100%;
        height: 25px;
        bottom: 0px;
        background-color:#FF9900;
        }
        
#barreGauche {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: #666666;
        }
        
#barreDroite {
        position: absolute;
        width: 100px;
        height: 100%;
        right: 0px;
        background-color: #666666;
        }
        
#barreCentre {
        position: relative;
        height: inherit;
        margin-left: 100px;
        margin-right: 100px;
        background-color:#CCCCCC;
        }
 
</style>
 
 
<body>
	<div id="bandeau"></div>
	<div id="centre">
		<div id="barreGauche">eryertert</div>
		<div id="barreDroite">ertertertert</div>
		<div id="barreCentre">sdgdfhg fgh </div>		
	</div>
	<div id="footer"></div>
</body>
</html>

30/05/2006, 23h53
spirou

Possible, mais il faut ajouter un bloc container qui contiendra tous les div avec juste une position relative.

Citation:

Envoyé par spirou

Possible, mais il faut ajouter un bloc container qui contiendra tous les div avec juste une position relative.

J'ai essayé et j'ai modifié quelques autres trucs. La page à évoluée mais je encore un probleme:

lien

Les deux colonnes gauche et droites s'adapte à leur contenu mais l'autre ne s'agrandit pas en fonstion, or je veux que les 2 fassent toute la hauteur.

Voici le code source:

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>
 
<style>
 
body, html {
        margin: 0px;
        padding: 0px;
        }
        
#boitierScroll {
        position: absolute;
        width: 100%;
        height: inherit;
        background-color: #FF0000;
        overflow: auto;
        top: 0px;
        bottom: 25px;
        }
 
#bandeau {
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #CCFF00;
        }
        
#centre {
        position: absolute;
        width: 100%;
        height: auto;
        top: 100px;
        background-color: #009999;
        bottom: 0px;
        }
        
#footer {
        position: absolute;
        width: 100%;
        height: 25px;
        bottom: 0px;
        background-color:#FF9900;
        }
        
#barreGauche {
        position: absolute;
        width: 100px;
        height: inherit;
        top: 100px;
        bottom: 0px;
        background-color: #666666;
        }
        
#barreDroite {
        position: absolute;
        width: 100px;
        height: inherit;
        right: 0px;
        top: 100px;
        background-color: #666666;
        }
        
#barreCentre {
        position: relative;
        height: inherit;
        margin-left: 100px;
        margin-right: 100px;
        top: 100px;
        background-color:#CCCCCC;
        }
 
</style>
 
<body>
<div id="boitierScroll">
	<div id="bandeau"></div>
		<div id="barreGauche">eryertert</div>
		<div id="barreDroite">
		  <p>ertertertert</p>
		  <p>gbdgbdfb</p>
		  <p>dfbf</p>
		  <p>fdg</p>
		  <p>dfbg</p>
		  <p>dfbgdfgbh</p>
		  <p>dffbg</p>
		  <p>dfb</p>
		  <p>dfbg</p>
		  <p>dfb</p>
		  <p>dfb</p>
		  <p>dfb</p>
		  <p>dfb</p>
		  <p>ddfbdfb</p>
		  <p>dffb</p>
		  <p>dfbdfb</p>
		  <p>dfb</p>
		  <p>dfbdfb</p>
		  <p>dfb</p>
		  <p>dfbdfbxc</p>
		  <p>dsfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvk,kl,</p>
		</div>
		<div id="barreCentre">sdgdfhg fgh </div>		
</div>
<div id="footer"></div>
</body>
</html>

02/06/2006, 19h59
tarzanjane

Juste pour savoir, personne n'a d'idée?
02/06/2006, 21h34
psychoBob

Déjà si tu veux faire un truc souple et solide à la fois, il faut oublier les pixels et tout passer en % et em.

Imagines ton site sur un écran super large avec un menu à gauche de 100px de largeur...

J'avais fait comme toi pour mon premier site, je viens de le refaire pour lui donner une largeur fixe de 750px compatible 1024 et 800 par 600 je suis super content du résultat.

M'enfin je vais pas te dire ce que tu dois faire, c'est juste un témoignage.