Footer devra être toujours en bas...

Version imprimable

Salut ;)

En codant ma page web, je n'arrive pas à 'obliger' mon footer d'être affiché toujours en bas de la page :

Code php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>www.fabien-issartel.fr</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design par défaut" href="includes/themes/pardefaut/fi_pardefaut.css" />
	</head>
 
	<body>
		<div id="cadre_principale">
			<?php include("includes/fich_ext/partie_header.php"); ?>
			<?php include("includes/fich_ext/partie_colonne_gauche_generale.php"); ?>
			<?php include("includes/fich_ext/partie_milieu.php"); ?>
			<?php include("includes/fich_ext/partie_footer.php"); ?>
		</div>
	</body>
</html>

Je pense que tout est ok !

Mon 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
 
body
	{
	background-image:url(images/fond.gif);
	}
 
#cadre_principale
	{
	width: 700px;
	margin: auto;
	border: 1px solid #000000;
	background-color: #FFFFFF;
	}
 
#header
	{
 
	}
 
#colonne_gauche_generale
	{
	float: left;
	background-color: green;
	}
 
#partie_milieu
	{
	background-color: red;
	}
 
#footer
	{
 
	}

Et voilà ce qu'il m'affiche :

http://img459.imageshack.us/img459/4...otermal4tr.jpg

Comment règler ?

Bonjour,

Solution #1
Tu pourrais placer les parties "colonne_gauche_generale" et "partie_milieu" dans un div qui sera la section centrale entre header et footer.

Pour te donner une idée du schéma :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 ... <body> <div id="cadre_principale"> <?php include("includes/fich_ext/partie_header.php"); ?> <div id="partie_centrale"> <?php include("includes/fich_ext/partie_colonne_gauche_generale.php"); ?> <?php include("includes/fich_ext/partie_milieu.php"); ?> </div> <?php include("includes/fich_ext/partie_footer.php"); ?> </div> </body> ...
Solution #2 (si je ne me trompe pas)
Code:

1 2 3 4 #footer { clear: both; }
pour annuler le flottement.

En effet, ce sera mieux ;)

Je suis maintenant avec :

Pour la .php

Code:

1
2
3
4
5
6
7
8
9
10
<body>
		<div id="cadre_principale">
			<?php include("includes/fich_ext/partie_header.php"); ?>
		<div id="corps_developpement">
			<?php include("includes/fich_ext/partie_colonne_gauche_generale.php"); ?>
			<?php include("includes/fich_ext/partie_milieu.php"); ?>
		</div>
			<?php include("includes/fich_ext/partie_footer.php"); ?>
		</div>
	</body>

Et pour le .css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#corps_developpement
	{
 
	}
 
#colonne_gauche_generale
	{
	float: left;
	background-color: green;
	}
 
#partie_milieu
	{
	background-color: red;
	}

Une idée pour mettre (forcer au mieux) le footer à se placer en bas de la page ?

20/12/2005, 04h45
SangKou

Et voilà c'est parfait :)

Tout à fait avec un clear: both; !

Je te remercie beaucoup :)

J'ai utilisé la solution 1 & 2 !

clear: both; = annuler le flottement, c'est à dire ? :oops:
20/12/2005, 04h47
balu

C'est pour annuler l'effet de float.

Explication plus précise :

Citation:

L'attribut clear sert à forcer les côtés vides. Si tu mets clear:both sur un div, ce div n'aura rien, ni à sa droite, ni à sa gauche. Donc il le mettra en dessous de ce qui précède. Les divs qui suivent seront forcément après celui-ci, i.e. soit en dessous soit après (sauf utilisation du float).

En fait, la solution #2 seule suffisait. ;)
20/12/2005, 04h54
SangKou

Citation:

Envoyé par balu

En fait, la solution #2 seule suffisait. ;)

En effet, j'ai donc supprimé la solution 1 parce que je pense qu'elle est inutile...

Sauf si tu as une bonne raison à me convaicre pour l'utiliser :)

Merci beaucoup à toi Balu :)
20/12/2005, 04h58
balu

La solution #2 évite d'ajouter un div supplémentaire. C'est toujours mieux d'éviter d'utiliser trop de div. J'aurais mis cette solution si j'y avais pensé avant la solution #1. ;)
20/12/2005, 05h00
SangKou

C'est bien vrai de devoir éviter d'avoir trop de DIV, cela encombera la page :)

Allé à la prochaine (sur un autre topic)

Encore merci
20/12/2005, 05h11
SangKou

Au fait, comment éviter un retour à la ligne de trop entre

Menu et Sous Menu ?

Et en outre comment supprimer le truc en * ?