Div toujours en bas

**Kenshin86** · 12/02/2009, 19h49

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 :

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

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 :

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
#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.

**Kenshin86** · 12/02/2009, 19h58

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

**Macmillenium** · 12/02/2009, 20h28

Bonsoir,

Une petite recherche sur les forums

**Kenshin86** · 12/02/2009, 21h02

J'avais également essayé cela.

Voici mon code
1) CSS :

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

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

**Kenshin86** · 12/02/2009, 21h05

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 :

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
<!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.

**Macmillenium** · 12/02/2009, 21h32

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

Code html :

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

Div toujours en bas

CSS

Vue hybride

Discussions similaires

Partager

Partager