Div toujours en bas

Version imprimable

Div toujours en bas

Bonjour

J'ai un soucis , j'aimerais caller une div au pied de la page , c'est à dire qu'elle se trouve en haut au début mais que tout la page soit au dessus.

voici mon code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body> <div class="centre"> DIV HAUT </div> <div class="center"> BLA BLA BLA BLA BLA </div> test <div id="footer"> FOOTER </div> </body> </html>
Code CSS :
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 #footer { background: #339933; /* VERT FONCE - FOND BLOC */ width: 100%; /* LARGEUR BLOC */ height: 11px; /* HAUTEUR BLOC */ text-align:center; /* TEXTE CENTRE */ font: normal 10px Verdana, sans-serif, Arial; /* POLICE & STYLE D'ECRITURE */ color:#FFFFFF; /*COULEUR D'ECRITURE BLANC */ } .centre{ height: 110px; width: 1060px; text-align: center; margin-left:30px; font-size : 50px; line-height : 200%; text-decoration:underline; background-image:url(navig_haut.jpg); color:#FF8050; } .center{ position:absolute; margin-top : 150px; margin-left:200px; margin-right:630px; padding-top:10px; padding-left:10px; background-color:pink; }
Dans le code , meme si je met une balise <hr> à la place de l'appel de div (footer) , le conenu de ma page principal (div center) se placer sous la ligne du <hr> ou du footer.

PS : A noter que quand il y a du texte avant le <hr> ou le footer , cela fonctionnes bien , et dès que j'ajoutes l'appel de la div , il se glisse en dessous.

Merci de votre aide.

12/02/2009, 19h58
Kenshin86

Après tout cela , c'est un cas simple puisque lors que je retires le position:absolute de ma div "center" , cela vient bien se placer.

Mais à l'origine , je bidouilles parce que je veut avoir 2 div une à coté de l'autre et avoir le pied de page en bas.

et la lors que je retires les position:absolute sur les 2 blocs , il ne sont plus alignés un à coté de l'autre....
12/02/2009, 20h28
Macmillenium

Bonsoir,

Une petite recherche sur les forums ;)

J'avais également essayé cela.

Voici mon code
1) CSS :

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
.centre{
height: 110px;
width: 1060px;
text-align: center;
margin-left:30px;
font-size : 50px;
line-height : 200%;
text-decoration:underline;
background-image:url(navig_haut.jpg);
color:#FF8050;
}
 
.center1{
position:absolute;
margin-top : 150px;
margin-left:200px;
margin-right:630px;
padding-top:10px;
padding-left:10px;
background-color:pink;
 
}
 
 
.center2{
position:absolute;
margin-top : 150px;
margin-left:630px;
margin-right:200px;
padding-top:10px;
padding-left:10px;
background-color:grey;
 
}
 
 
 
#footer
	{
		background: #339933; /* VERT FONCE - FOND BLOC  */ 
		width: 100%; /* LARGEUR BLOC */	
		height: 11px; /* HAUTEUR BLOC */
		text-align:center;  /* TEXTE CENTRE */ 
		font: normal 10px Verdana, sans-serif, Arial;  /* POLICE & STYLE D'ECRITURE */ 
		color:#FFFFFF;  /*COULEUR D'ECRITURE BLANC  */ 
		position:absolute;
		bottom:0;
	}

2) 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
<html>
        <body>
 
 
 
				<div class="centre">  DIV HAUT  </div> 
 
 
 
				<div class="center1">
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
 
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
 
				</div>  
 
 
				<div class="center2"> 
				BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 				
 
				</div> 
 
 
 
			<div id="footer">  DIV BAS </div> 
		</body>
 
		</html>

Le problème hélas c'est que mes DIV "center1" et "center2" débordent sur mon pied de page lorsque le texte est plus long alors qu'il devrait "pousser" le footer sans cesse vers le bas.

lorsque je retires l'option position:absolute pour ces 2 div , impossible de les aligner un à coté de l'autre :(

J'ai pas rencontré de soucis lors de mon pied de page lorsque j'avais un seul "bloc" , je fesais toujours comme ta solution :

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
<!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" dir="ltr" lang="fr">
<head>
 
<style type="text/css">
html, body { height:100%; padding:0; margin:0; }
.footer { height:25px; width:100%; position:absolute; bottom:0; background:red; }
#global { position:relative; min-height:100%; background:green; }
</style>
<!--[if IE 6]> 
<style type="text/css">
#global { height:100%; }
</style>
<![endif]-->
 
</head>
 
<body>
<div id="global">
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>
<p>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</p>
 
 
<div class="footer"></div> 
 
</div>
 
</body>
</html>

et je n'avais aucun soucis !

La j'en rencontre avec le fait que je ne peut caller le footer QUE sous un bloc , or la j'en ai deux.

J'ai essayé de créer un seul bloc (et qu'à l'intérieur contiendrait mes 2 blocs distincts) ou viendrait se caller le pied de page et je n'ai pas réussi hélas non plus.

Et bien il te reste qu'à positionner tes divs center1 et center2 en float left à l'intérieur de la div global ...

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
 
<!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" dir="ltr" lang="fr">
<head>
 
<style type="text/css">
html, body { height:100%; padding:0; margin:0; }
.footer { height:25px; width:100%; position:absolute; bottom:0; background:red; }
#global { position:relative; overflow:hidden; min-height:100%; background:green; }
.center1, .center2 { float:left; width:50%; background:gray }
</style>
<!--[if IE 6]> 
<style type="text/css">
#global { height:100%; }
</style>
<![endif]-->
 
</head>
 
<body>
<div id="global">
	<div class="center1">
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	</div>
 
	<div class="center2">
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	<p>bla bla bla bla</p>
	</div>
 
<div class="footer"></div> 
 
</div>
 
</body>
</html>

12/02/2009, 23h00
Kenshin86

Oui ça correspond à ce que je voulais faire.

Mais par contre un tout petit soucis , tu as remarqué que lors d'une longue saisie du texte (que ce soit dans center1 ou center2) , le footer empiète un peu dessus ?
13/02/2009, 09h02
desert

Tu peux rajouter

Code:

margin-bottom: 25px; /* 25px = hauteur du footer */

aux classes center1 et center2.
13/02/2009, 10h35
Macmillenium

Citation:

Envoyé par Kenshin86

tu as remarqué que lors d'une longue saisie du texte (que ce soit dans center1 ou center2) , le footer empiète un peu dessus ?

Ajoute un padding-bottom (pas de margin qui ne fonctionne pas dans ce cas) égale à la hauteur de ton footer sur #global
13/02/2009, 16h38
Kenshin86

Ok , cela fonctionnes très bien.

Merci Macmillenium ,

Par contre une question , pourquoi mettre le padding-bottom à la meme taille que la hauteur du footer ?

Les margin de desert ne sont pas obligatoire ?
13/02/2009, 16h52
Macmillenium

Citation:

Envoyé par Kenshin86

Par contre une question , pourquoi mettre le padding-bottom à la meme taille que la hauteur du footer ?

Le footer est positionné en absolute il n'a aucun impact sur les autres éléments dans le flux et il passe au dessus/dessous.
Le but du padding-bottom est de conserver une place pour le footer.

Citation:

Les margin de desert ne sont pas obligatoire ?

Les marges externes (margin) ne fonctionnent pas dans le cas du positionnement absolute pour la raison cité plus haut.