28172 sujets

CSS et mise en forme, CSS3

Fixer le footer sur le bas de page

Bonjour cher Alsanautes,

J'aimerai fixé mon footer sur mon bas de page, et qu'il y reste collé malgré un dézoom.

Est-il possible de le faire avec un div en bas de page ? ou alors dois-je avoir un div qui englobe tout mon contenu et mettre l'image en position bottom ?

Car là, j'essaye avec un div en fin de page mais ca ne fonctionne pas, j'ai regardé le code d'alsa et je n'ai pas réussi à décelé la méthode qu'il faut appliquer.

Merci d'avance !
Salut,

Essaye de positionner ton div footer en CSS avec un positionnement absolu.

#footer {
    position: absolute;
    botom: 0;
}

Peu importe son placement dans le flux HTML, il en sortira pour se placer en bas de page quoi qu'il se passe.

A plus.
Salut Julien,

Tout d'abord merci de ta réponse, je ne savais pas qu'on pouvait positionner en utilisant bottom: 0;

Mais malheureusement ca ne fonctionne pas, et je dirais même plus que ça a un comportement plus que bizzard, car mon div vient se positionner en milieu de page.

Et quand j'ouvre firebug (addon qui ouvre une mini fenetre en bas de FF) il se déplace carrément pour se mettre au dessus.

J'ai regarder si le footer n'héritais d'aucune propriété qui pouvait influencé et donner se genre de comportement, mais ce n'est pas le cas.

Si tu as une idée, elle est la bienvenue ^^

Merci d'avance.
Merci de ta réponse, mais j'ai du mal formuler ma question car ce n'est pas cet effet que je recherche.

Ce que je voudrai, c'est comme sur Alsa, un footer normalement placé, mais qui, quand on dézoom, reste toujours collé au côté inférieur de la fenêtre;

Je veux dire par là que si la page est très longue il sera collé au coin inférieur, mais si elle est courte il sera quand même collé au bord inférieur, sans pour autemps qu'il suive le scroll, comme c'est le cas avec l'attribut fixed.

Bref j'aimerai un footer comme sur Alsacreations quoi Smiley langue

Merci d'avance.
Dans ce cas, ça m'étonne mais la première méthode que je t'ai donné devrait être la bonne.
Pour mieux t'aider, ce ne serait pas possible d'avoir un lien vers la page en question ?

Sinon, essaye de donner un bout de code HTML et CSS ou tu montres ton footer.

A plus Smiley cligne
Modifié par JuJu57 (18 Sep 2010 - 15:29)
Yop,

Euh étant donné l'état de délabrement de mon site pour le moment, j'opterai pour la portion de code ^^.
Malheureusement, il n'y a pas grand chose à dire au niveau du code, j'ai juste mis ce que tu m'as dis pour le moment. 


<div id="footer">
	<p>
		texte
	</p>
</div>




#footer { 
	background: url(../img/footer.png) no-repeat;
	bottom: 0;
	position: fixed;
	width: 1024px;
	
}


Si ca ne t'avance pas je te donnerai, malgré la honte, mon site en MP ^^

Merci d'avance
Oui à vrai dire je préfèrerai ton site Smiley langue

Ca ne m'aide pas le code en fait.

Et t'as pas a avoir honte, je viens pas pour juger ton site Smiley langue
Modifié par JuJu57 (18 Sep 2010 - 16:50)
Merci beaucoup, je viens de te l'envoyer par message privé

Je reviendrai demain je dois partir chez ma copine

a demain merci d'avance
Trouvé !

Dans ton fichier CSS à la ligne 46 d'après Firebug : 
p {
    margin:0.75em 0;
}

Replace le par : 
p {
    margin:0;
}


Voilà, @+
Sujet clos
Aller à