Div en pied de page

Version imprimable

Div en pied de page

Salut, j'ai un ptit souci, je n'arrive pas obligé mon div a prendre la totalité de ma page, et obligé un div a rester en pied de page.

Pourriez-vous m'aider?

voici mon css et mon fichier htm

en gros, je souhaiterai que le div pied de page, reste toujours dans le fond de ma page, et que le div contenu soit de taille variable, mais restant tjr accolé au pied de page afin d'éviter un vide en bas de page lorsque je n'ai pas beaucoup de contenu.

Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
<div id="global">
<div id="entete"></div>
<div id="menu">
	<div id="menuhaut"></div>
	<div id="menubas"></div>
</div>
<div id="contenu">test</div>
<div id="piedpage"></div>
</div>
</body>

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
 
body {
	margin-left:0;
	margin-top:0;
}
 
div#global {
	margin-left: auto;
	margin-right: auto;
	padding-top:10px;
	padding-left:17px;
	width: 816px;
	height:800px;
	background-image:url(../img/background.jpg);
}
 
div#entete {
	width:800px;
	height:251px;
	background-image:url(../img/header.jpg)
}
 
div#piedpage {
	width:800px;
	height:50px;
	background-color:#00CC00;
	clear:both;
}
 
div#menu {
	float:left;
	width:100px;
	height:400px;
	background-color:#ffffff;
}
 
div#menuhaut {
	width:257px;
	height:20px;
	background-image:url(../img/back-menu.jpg);
	background-color:#66cc33;
}
 
div#menubas {
	width: 257px;
	height:50px;
	background-image:url(../img/back-menu_down.jpg);
	background-repeat:no-repeat;
}
 
div#contenu {
	float:left;
	margin-left:157px;
	width:543px;
	height:400px;
	background-color:#ffffff;	
}

26/01/2007, 11h50
Mystic'Angel

Salut!

Je peux peut etre t'aider mais j'aimerais savoir comment sont positionnés tes div?
Car en fait, j'utilise pas les même commandes que toi dans la page CSS pour placer mes div et je ne peux en déduire leur positionnement...
26/01/2007, 12h30
Orgied

heu y a un gros problème avec tes css.

ton div menu est en float left pour une largeur de 100px MAIS il contient des éléments ayant une largeur de 157px DONC ton menu fait 157px de large en fin de compte

en fait plus je lis tes css, plus je remarque que tu as fait des fautes de clalcul pour chacune des largeurs de tes zones.

Salut,

pour menu j'ai bien essayer de lui donner la taille exacte, mais alors mon div contenu se positionne sur menuhaut et menu bas.

Pour etre exact en fait, il y a le logo en tete, le menu sur la gauche, le contenu sur le reste a droite et le pied de page en dessou

merci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <body> <div id="global"> // Ce div permet de centrer l'ensemble sur la page <div id="entete"></div> // Celui ci contient le logo d'entete, il est positionné tout en haut et sur toute la largeur du site <div id="menu"> // menu se trouve sur la gauche et il contient le menu haut et le menu bas <div id="menuhaut"></div> <div id="menubas"></div> </div> <div id="contenu">test</div> // contenu se trouve sur la droite de menu <div id="piedpage"></div> // pied de page se trouve évidement dans le fond de la page </div> </body>

:salut:
c'est pas un truc dans ce style que tu cherches :

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
* {
margin:0;
padding:0;
border:1px solid #000;
}
 
div#global {
margin:0 auto;
padding:10px 0 0 17px;
width: 816px;
height:800px;
background-image:url(../img/background.jpg);
}
 
div#entete {
width:800px;
height:251px;
background-image:url(../img/header.jpg)
}
 
div#piedpage {
width:800px;
height:50px;
background-color:#0c0;
clear:both;
}
 
div#menu {
float:left;
width:257px;
height:400px;
background-color:#fff;
}
 
div#menuhaut {
height:20px;
background-image:url(../img/back-menu.jpg);
background-color:#6c3;
}
 
div#menubas {
height:50px;
background-image:url(../img/back-menu_down.jpg);
background-repeat:no-repeat;
}
 
div#contenu {
float:left;
width:541px;
height:400px;
background-color:#fff;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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" xml:lang="fr-en">
<head>
<style type="text/css">
/*le CSS*/
</style>
</head>
<body>
<div id="global">
   <div id="entete">entete</div>
   <div id="menu">menu
      <div id="menuhaut">menuhaut</div>
      <div id="menubas">menubas</div>
   </div>
   <div id="contenu">contenu</div>
   <div id="piedpage">piedpage</div>
</div>
</body>
</html>

PS : pour supprimer les bordures, supprime border:1px solid #000; en haut du CSS.

29/01/2007, 17h13
kaygee

c'est pratiquement ca, mais le pied de page, ne se trouve pas dans le fond de ma page

QUel est l'attirbut pour l'obliger a rester dans le fond de ma page???

j'ai essayer vertival-align=bottom mais rien
29/01/2007, 17h54
Candygirl

Ce que tu veux faire n'est pas si simple à mettre en oeuvre...

Juste une question avant de préciser ma réponse; pourquoi avoir mis 800px de hauteur à ton #global ? tu ne risques pas d'avoir du contenu plus long que ses 800px ? C'était juste dans le but de placer ton footer en bas ?
29/01/2007, 19h12
kaygee

oui a la base c'était uniquement pour créer mon design.

aurais-tu une idée de la technique a employer, ou un subsitut

merci
29/01/2007, 21h26
Candygirl
Si j'ai bien compris ce que tu souhaites, tu dois commencer par renseigner le height des balises html et body à 100% afin de pouvoir ensuite donner un min-height sur ton #global. Il te faut alors virer ton padding du global si tu veux éviter les scrollbarre et le height:
Code:

1 2 3 4 5 6 7 8 9 html,body {height:100%:} #global { min-height:100%; margin:0 auto; padding-right:17px; width: 816px; background-image:url(../img/background.jpg); }
Ensuite tu positionnes ton footer en absolute depuis le bottom de ton #global: tu dois donc ajouter encore un relative au #global qu'il devienne le référant:
Code:

1 2 3 4 5 6 7 8 9 10 #global { position:relative; } #piedpage { width:800px; height:50px; background-color:#0c0; position:absolute;bottom:0;left:0; }
Comme le global ne contient que des flottants, il faut faire en sorte qu'il descende jusqu'au bas de ces derniers ou le contenu passera derrière le footer lorsqu'il est plus haut que la hauteur de la fenêtre. La manière meilleure de procéder est discutable. Une des plus simples est de rajouter, par exemple, un hr avec un clear (le hr est justifié d'après moi puisqu'on marque la séparation du contenu et du footer généralement commun à toutes les pages):
Code:

1 2 3 <div id="contenu">contenu</div> <hr id="clfooter" /> <div id="piedpage">piedpage</div>
Code:

1 2 3 4 #clfooter { clear:both; visibility:hidden; }
Dernière étape, il faut éviter que le texte ne descende jusqu'au footer, soit laisser un espace vide de la hauteur de ce dernier + l'éventuel espace souhaité. Si c'est une image de taille fixe, aucun problème. Si le footer comporte un texte, il faudra règlé cette hauteur en em afin d'anticiper un agrandissement de police (tout en gardant à l'esprit que le footer finira forcément par finir par chevaucher le contenu lors de nouveau passage à la ligne dû à l'agrandissement de police). Selon l'exemple plus haut il suffit d'attribuer cette hauteur au hr:
Code:

1 2 3 4 5 #clfooter { clear:both; height:3em; visibility:hidden; }
Le seule truc c'est que IE laisse une marge de 7px par défaut sur le hr, sauf erreur, donc tu peux virer ces 14px de plus avec un margin-top négatif rien que pour IE, par exemple. Autrement si tu ne veux pas te prendre la tête avec un hr, tu peux, ajouter un div englobant le menu et le contenu, lui donner un overflow:hidden et un padding-bottom de la hauteur du footer.

En espérant que c'est bien le type de mise en page que tu souhaitais obtenir ;)