Pourquoi mon footer s'affiche avant la fin de la page ?

**geeka** · 30/06/2015, 17h06

Bonsoir,

J'aimerais que mon <footer> ne s'affiche qu'à la fin de l'affichage de toute la page, mais ici il s'affiche toujours et il gène l'affichage complet de la page :

Nom : footer pb.png
Affichages : 2812
Taille : 114,8 Ko

Nom : footer pb.png
Affichages : 2812
Taille : 114,8 Ko

Comment faire pour le mettre tout en bas de la page ?

Code CSS du footer :

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
footer{
	position:fixed;
	bottom:0;
	left:0;
	height:40px;
	background: #CC3D3D;
	box-shadow: -1px 0 10px #555; /*ombre*/
	width:100%;
	color: white;
	text-align:center;
	z-index:2; /*formulaire se met sous le footer */
}
 
 
}

Merci

**www.diazis.com** · 30/06/2015, 19h50

Bonjour,
Le principe du footer est celui que tu décris.
Si tu le veux en bas de la page enlève le position: fixed.
Après je ne sais pas comment il est codé côté html. La réponse permettra de savoir si il faut le mettre en absolute, relative... et s'il faut changer le positionnement.

**NoSmoking** · 30/06/2015, 20h16

Bonjour,
tu peux allé regarder cette discussion Page "pleine" sur les navigateurs.

**geeka** · 01/07/2015, 09h34

Merci pour vos réponses.
Côté HTML :

Code :

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

<footer> © 2015 Croix-Rouge Française </footer>

Il est écrit une seule fois dans un fichier commun.

@NoSmoking:
Y a un problème avec ce code c'est qu'il se met tout en haut de la page au dessus du contenu du body de la page.

**www.diazis.com** · 01/07/2015, 10h51

Cette info n'est pas suffisante, il faut voir comment cet element footer ce positionne avec les autres éléments de la page.
S'il est à la fin de ton fichier html (avant </body>), tu peux essayer

Code :

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

1
2
3
4
5
6
7
8
footer{
	height:40px;
	background: #CC3D3D;
	box-shadow: -1px 0 10px #555; /*ombre*/
	width:100%;
	color: white;
	text-align:center;
}

Mais il y a peut être d'autres élément en absolute au niveau du body et dans ce cas tu peux faire, en plus, au niveau html :

Code :

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

1
2
3
4
5
6
<body>
  <div>
     ...toute le contenu actuel de body sans le footer
  </div>
  <footer> © 2015 Croix-Rouge Française </footer>
</body>

Pas super propre, mais ca peut dépanner...

**geeka** · 01/07/2015, 13h02

@www.diazis.com: Merci pour ta réponse.
En essayant ton code, mon footer s'est mis en haut de la page

Voici comment le <footer> est positionné :

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
<?php
session_start();
/*Connexion BDD*/
include("connexion.php");                       
?>
<!DOCTYPE html> 
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-mega-menu.css">
 
		<link rel="stylesheet" href="css/footer.css">
 
	</head>
	<body class="bg-red">
		<div class="body">		
			<!-- MENU -->
 
 
		</div>	
               <footer> © 2015 Croix-Rouge Française</footer>		
</body>
</html>

Pourquoi mon footer s'affiche avant la fin de la page ?

HTML

Vue hybride

Discussions similaires

Partager

Partager