Footer devra être toujours en bas...

**SangKou** · 20/12/2005, 04h15

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 :

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

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

Comment règler ?

**balu** · 20/12/2005, 04h33

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 :

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

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 :

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

1
2
3
4
#footer
{
   clear: both;  
}

pour annuler le flottement.

**SangKou** · 20/12/2005, 04h43

En effet, ce sera mieux

Je suis maintenant avec :

Pour la .php

Code :

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

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 :

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

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 ?

**SangKou** · 20/12/2005, 04h45

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 ?

**balu** · 20/12/2005, 04h47

C'est pour annuler l'effet de float.

Explication plus précise :

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.

**SangKou** · 20/12/2005, 04h54

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

**balu** · 20/12/2005, 04h58

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.