"Coller" mon pied de page en bas de la page

Résolu
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -  
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

j'ai un site, et j'ai petit problème depuis pas mal de temps (rien de grave, mais quand même).
Quand il n'y a pas grand chose dans ma page et que le menu est trop grand, ce dernier passe sur le pied de page et se prolonge en dessous ! (http://www.regroupementpourladefensedesanimaux.com/abbatoirs.php - cliquez sur Pour eux et regardez en bas - y a plus grave dans la zone membre qu'a un plus grand menu)

Mon menu est en float, et je crois que c'est la seule façon pour qu'il tienne à gauche du corps :
#menu
{
width:220px;
background-repeat:no-repeat;
border-right:black solid 3px;
background-image:url();
background:#B66A03;
float:left;
padding-bottom:10px;

border-bottom:black solid 3px;
box-shadow:8px 8px 10px black;
border-radius:0px 30px 30px 0px;
}


J'aimerais que le pied de page soit "collé" tout en bas de la page, mais pas en bas de l'écran. Pouvez-vous m'aider ?

Merci !

P.S. En passant, pouvez-vous signer la pétition (lien hors-charte supprimé par la modération)


A voir également:

4 réponses

ludo1325 Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   33
 
Re alors au faite tu n'a pas besoin du clear: both; je vien de regarder ton fichier css parcontre tien j'ai oublié quelque truc dans le code je tes donc refait le tout:

#pied_de_page 
{ 
width: 100%; /* permet d'avoir une longueur de 100% */ 
position:fixed; /* permet de fixer le pied de page */ 
bottom:0; /* dire au pied de page que sa position et tout en bas */ 
height:20px; /* hauteur du pied de page */ 
font-weight:bold; /* caractères gras */ 
text-align:center; /* alignement : centre (center), gauche (left) ou droite (right) */ 
color:#FFFFFF; /* couleur des caractères */ 
margin-right:0px; 
text-align:center; 
background:#A85400; /* couleur de fond du pied de page */ 
background-image:url(); 
border-top:1px solid black; 

border-radius:20px 20px 0px 0px; 
box-shadow:12px 10px 25px 20px black; 
} 


Voila sa devrait fonctionner maintenant :)
2
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
C'est pas trop ce que je voulais au départ...mais finalement je trouve ça très bien comme ça ! :D

Merci beaucoup !
2
ludo1325 Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   33
 
Salut, comment par créer une div autour de ton pieds de page, dans le genre:
<div id="pdp"> TON PIEDS DE PAGE </div>

Ensuite dans ton fichier css va modifier le pieds de page de façon à ce qu'il ce mette en bas de page.

#pdp
{
clear: both;  /* on commence a lui indiquer qu'il ne float plus si tu le mes en dessout des code de ton menu */
width: 100%; /* une largeur de 100% de page selon l'écran du visiteur */
}


Je tien à te préciser mais je pense que tu doit être au courant que ton pieds de page ce trouve en dessous le corps de ta pages etc etc.*

Perso, j'aime bien que mon pied de page reste fixe et que même quand l'utilisateur descend pour voir la suite du site il reste affiché a l'écran et passe dessus le reste. Pour ce faire voici le css au complet que j'utilise si sa peu t'intéresser à toi de l'adapté selon ce que tu veux faire.
.pdp
{
	width: 100%;
	height: 1.5em;
	clear: both;
	position: fixed;
	z-index: 9999;
	bottom:0;
	background: rgba(245, 245, 220, 0.8);
	border-top: 3px solid rgb(200, 173, 127);
	text-align: center;
}


J'espère t'avoir aider, sinon, n'hésite pas.
1
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
Merci d'avoir répondu si vite !
J'ai essayé de mettre clear:both; mais ça marche pas (je ne connais pas cette propriété...).

J'ai déjà mis une div autour de mon pied de page (qui est en bas du corps, et tout...), voici son CSS :
#pied_de_page
{
height:20px; /* hauteur du pied de page */
font-weight:bold; /* caractères gras */
text-align:center; /* alignement : centre (center), gauche (left) ou droite (right) */
color:#FFFFFF; /* couleur des caractères */
margin-right:0px;
text-align:center;
background:#A85400; /* couleur de fond du pied de page */
border-top:1px solid black;
border-radius:20px 20px 0px 0px;
box-shadow:12px 10px 25px 20px black;
}
1