Probleme footer

Loic -
Loic - 10 août 2012 à 16:24

Bonjour,
Je n'arrive pas a mettre le footer en bas:
http://img19.imageshack.us/img19/3227/screenshot002zsd.jpg

#footer{
position:absolute;
clear:both;
float:left;
margin-top:10px;
width:980px;
}
#footer_text{
float:left;
}

<div id="footer">
<div id="footer_text">
FOOTER </div>
</div>

Merci d'avance pour votre aide.

Afficher la suite

3 réponses

Réponse 1 / 3

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

Bonjour vous ete de retour........ =)

pourquoi avoir creer deux div pour votre footer?
Vous mettez position absolute mais vous lui donnez pas de position

essayer ceci :

#footer{   
position:absolute;   
bottom : 0px;  
width:980px;   
border: 2px black solid; 
}   


<div id="footer">   

FOOTER   
</div>

"Un homme azerty en vaut deux"

Loic

J'ai 2 div car sur une autre page j'ai un pied de page différent qui va a un autre endroit.
Pour l'index le problème est règles mais pour les autres pages en fonction de la longueur il ne se met au bon endroit comme avant il se met en bas de la fenêtre et non pas en bas de la page.

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

ok as tu un code d'une autre page ou ça ne va pas

Loic

#footer {
position:absolute;
bottom : 0px;
clear:both;
float:left;
margin-top:10px;
width:980px;
}
#footer_text {
float:left;
}
#top {
float:right;
}

<div id="footer">
<div id="footer_text">
FOOTER</a>
</div>
<div id="top">
<a href="#top">Top</a>
</div>
</div>

Voici le code ils sont bien positionner sur la ligne mais pas en bas de page.

Réponse 2 / 3

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

correction votre code fait quelque ligne et comporte des erreurs.... :/
juste après FOOTER il y a une balise fermante </a> toute seule, vous devriez mettre votre texte dans des balises <p></p> et chez moi, ils apparaissent sur la même ligne et en bas de la page

http://imageshack.com/f/0gcapturedu20120810122313j

Loic

Ah oui il y a la balise </a> car avant il y a <a href=
Oui il est en bas de page car quand la page est courte mais lorsqu'il faut scroller il se met en bas de la fenêtre et non pas en bas de la page.

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

oui mais avec le bout de code de la page que vous m'avez fourni il n'y a pas besoin de "scroller", donnez voir tout votre code et on verra ce que l'on peu faIRE

Loic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>TEXTE</title>
</head>
<body>
<div id="wrapper">
<div id="logo">
<a href="http://www.test.com/"><img longdesc="http://www.test.com/"
class="logo" name="logo" alt="TEXTE" src="../image/logo.gif" /></a>
</div>

<div id="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce arcu felis, feugiat sed molestie sit amet, tempus non ipsum. Nullam ac blandit magna. Nunc ullamcorper tempus felis eu scelerisque. Maecenas vehicula neque diam, nec vehicula enim. Mauris ornare ullamcorper nibh id posuere. Sed neque orci, condimentum sed sodales at, aliquam bibendum justo. Ut at massa quis eros tempus cursus. Pellentesque non nulla sed velit mollis semper luctus et nunc. In sodales arcu posuere mauris accumsan rutrum. Nunc sit amet pellentesque ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius mattis eros vitae commodo. Curabitur sit amet tellus quam, a dictum turpis. Nunc eu dui ut felis eleifend sagittis.

In et massa neque. Nunc rhoncus malesuada tellus nec blandit. Praesent hendrerit tempor felis quis scelerisque. Phasellus mauris mi, aliquet ac malesuada sed, elementum at quam. Nulla a orci lacus, bibendum mattis sem. Sed quis blandit velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse odio ligula, blandit in suscipit non, lobortis quis diam. Nunc porttitor nunc a mi venenatis laoreet. Sed porta erat consequat odio pulvinar eu commodo purus ultricies. Etiam vel nisl massa. In laoreet porta porttitor. Morbi imperdiet porta justo non vulputate. Cras tempor turpis volutpat metus gravida auctor. Mauris egestas elit a erat volutpat a accumsan libero sollicitudin.

Nullam laoreet sapien eget est tempor a facilisis lorem fringilla. Donec tincidunt dapibus ipsum ut congue. Cras eget turpis eget diam cursus interdum ac ut arcu. Aliquam egestas, lorem sed dignissim scelerisque, nulla magna varius libero, eu varius magna ligula vitae leo. Fusce non tortor augue. In hac habitasse platea dictumst. Proin vel volutpat ante. Nam eu ligula erat. Quisque sit amet pharetra libero. Proin nec libero sed elit interdum porttitor. Nam tincidunt volutpat orci, ac venenatis dui bibendum ac. Pellentesque eleifend, ligula a rutrum accumsan, enim eros viverra enim, in pharetra enim ligula et mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Donec sed dui ut risus pharetra ullamcorper. Donec sit amet velit est. Maecenas quis nisl nec turpis bibendum varius ac in nunc. Donec vel porta diam. Curabitur luctus lectus varius magna vulputate cursus. Curabitur mollis pharetra blandit. Aliquam erat volutpat. In luctus risus et dui dictum commodo. Curabitur interdum varius convallis. Sed erat sem, ornare a condimentum a, tempus quis neque. Nulla facilisi.

In ut dolor non est tempus dapibus eget quis neque. Nullam dui mauris, gravida sit amet auctor eu, ultrices id dolor. Aliquam nec arcu quis urna tempor pellentesque non quis tortor. Curabitur elit sem, porttitor adipiscing gravida eu, egestas mollis arcu. Curabitur dapibus pharetra nisl, vel convallis elit lobortis ac. Pellentesque porta gravida dignissim. Pellentesque sem enim, dapibus sit amet tincidunt non, ultrices vitae tellus. Suspendisse scelerisque mattis augue, at adipiscing mi lobortis ac.

Aenean cursus eros ligula, non mollis mi. Morbi molestie justo sed ligula aliquam quis egestas lorem convallis. Cras vulputate vestibulum urna at pharetra. Mauris suscipit nibh nec lectus porttitor consectetur rutrum risus vehicula. Morbi posuere dolor nec felis rutrum id dignissim libero ultricies. Nullam sit amet pharetra felis. Curabitur sit amet iaculis magna. Nunc interdum faucibus lorem, a tincidunt sapien mollis ac. Donec mollis venenatis mauris non feugiat.

Quisque eget erat mauris. Aliquam congue, nisl sit amet suscipit molestie, erat tortor convallis ante, laoreet ultrices nunc lectus sed massa. Nam turpis elit, semper non lacinia sed, porttitor laoreet dolor. Cras tempus venenatis orci ac lobortis. Cras rhoncus mollis urna, sed volutpat mi commodo non. In quis nulla vel mi pharetra placerat sed ac velit. Sed ut nulla eget lectus viverra bibendum. Nam sodales massa at nisl aliquet rhoncus. Donec ullamcorper, sem quis bibendum lobortis, nisi nulla gravida magna, fermentum dapibus tellus ligula et metus. Etiam facilisis, erat sed congue condimentum, purus sapien ultricies ipsum, sit amet faucibus enim lorem sit amet nisi. In justo felis, tempor quis vehicula viverra, condimentum dignissim felis. Maecenas orci elit, porta vitae mattis non, dapibus ac eros. Maecenas laoreet, arcu non condimentum accumsan, sapien leo pretium tortor, eu volutpat nisl elit eget urna.

Curabitur eget ornare ligula. Aenean justo dui, iaculis nec dictum ut, venenatis rhoncus turpis. Mauris hendrerit, ipsum vitae bibendum pulvinar, sapien nunc dapibus sem, vitae gravida felis neque sit amet ligula. Suspendisse potenti. Quisque vestibulum hendrerit eros, at eleifend nulla molestie vitae. Nullam leo velit, venenatis eu molestie eget, pharetra vel ipsum. Sed laoreet lobortis arcu ut vulputate. Phasellus arcu leo, volutpat sit amet eleifend sed, auctor quis dui. Morbi hendrerit bibendum enim quis faucibus. Sed et lorem massa. Duis ac est neque. Nulla vulputate dolor a turpis ullamcorper eget vulputate nisl semper.

In lacus tellus, iaculis sit amet aliquam a, ultricies sed lorem. Donec elementum semper risus, vitae gravida nulla consequat quis. Morbi ligula nibh, convallis id suscipit in, molestie quis urna. Fusce aliquam elit vel nibh ullamcorper at fermentum velit molestie. Donec id quam eget magna ultricies viverra eu eu nisi. Nunc nunc mauris, iaculis a dignissim id, sagittis eget leo. Suspendisse vitae consectetur urna. Praesent in dui quis magna mattis ultricies non in magna. Proin molestie nibh at magna bibendum aliquam. Pellentesque et risus in risus porta semper. Sed interdum odio id mi porta ultrices. Maecenas ac imperdiet dolor.

Etiam non risus dui, vel ornare tellus. Nullam vel ultrices orci. In sagittis dictum tristique. Curabitur mollis, ante ut ultrices iaculis, risus felis congue magna, a porta diam dolor quis erat. Mauris lacinia ligula eu mi suscipit dignissim eu sit amet ligula. Donec ultrices fringilla tempor. Sed vehicula molestie turpis eu convallis.

Integer vel est eros, in dignissim mi. Etiam ultricies interdum felis sit amet adipiscing. In vehicula luctus massa, quis lacinia ligula congue at. Suspendisse ullamcorper arcu in diam ornare porttitor. Fusce dictum pulvinar lorem viverra pretium. Mauris lobortis blandit erat id porttitor. Phasellus gravida, eros non tempor ultricies, nisi lectus condimentum nisl, non volutpat massa quam sit amet nulla. Nunc pulvinar tellus eu ligula hendrerit sagittis. Mauris viverra mauris in velit porttitor in tristique velit dictum. Sed et velit mi, in sollicitudin sapien. Maecenas in felis eget est aliquam interdum. Donec sit amet nunc elit, sit amet convallis justo. Vestibulum accumsan sagittis erat a mollis. Nam egestas posuere accumsan.

Phasellus suscipit rhoncus elit. Sed ac lorem mi. Integer et elit lorem, ut varius leo. Proin egestas dui at massa aliquet dapibus. Curabitur congue, nulla quis gravida interdum, tortor urna molestie ante, vitae pharetra tortor quam ut lacus. Pellentesque sed nunc dolor. Sed fringilla justo sit amet massa vestibulum tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu commodo libero.

Praesent euismod leo non nulla convallis tincidunt. Pellentesque sollicitudin iaculis lectus, sit amet hendrerit erat euismod quis. Aliquam rhoncus dui sed augue mattis fringilla. Nam orci quam, imperdiet vel aliquam sit amet, scelerisque non nunc. Ut non nibh a urna gravida facilisis in in justo. Aliquam malesuada luctus augue vel fermentum. Duis libero mauris, consectetur eget imperdiet facilisis, commodo ac magna. Phasellus condimentum vulputate ipsum, eu pulvinar elit sollicitudin a. Curabitur eget mi eget sapien interdum venenatis.

In porttitor pellentesque justo, ut accumsan metus faucibus nec. Nulla rutrum lacus sit amet risus euismod accumsan. Pellentesque sed venenatis ipsum. Quisque eget sapien ac nisi semper dapibus. Donec vehicula mi a erat tincidunt dapibus. Curabitur volutpat risus at sem pharetra porttitor. Etiam at nisi sapien. Morbi ultricies sagittis enim nec facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sed ligula tortor. Ut mi augue, fermentum eget ornare id, feugiat eget sem. Curabitur dolor est, cursus non iaculis nec, hendrerit sed dolor. Donec sit amet turpis ac leo euismod elementum. Phasellus facilisis faucibus dui ut dapibus. Nulla facilisi. </div>

<div id="footer">
<div id="footer_text">
<a href="http://www.test.com"
target="_blank">© footer</a> </div>
</div>
</div>
</div>
</body>
</html>

Voila

Réponse 3 / 3

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

Voila le css que j'ai rajouter pour scroller

#center
	{
		border: 2px black solid;
		width: 900px;
		margin: auto;
	}
	#footer
	{
		border: 5px red solid;
	}

et voila la capture d'ecran
http://imageshack.com/f/c9capturedu20120810151112j

le footer est bien en bas de la page

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

si vous voulez le separer de la du texte utiliser

position: relative; 
top: 200px;

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

http://imageshack.com/f/3wcapturedu20120810151722p

Loic

Effectivement la il est tout en bas mais comment faire pour qu'il prend en compte la taille de la page automatiquement en gros qu'il y est juste une ligne d'espace entre le contenu et le footer.

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

mettez une balise <br />

Loic

Oui ça je sais mais j'aimerais que quelque soit la longueur de la page le pied de page se met automatiquement en bas de la page avec juste un espace entre le contenu et le pied de page.

Discussions similaires

Problème footer Wordpress

HTML2PDF - Footer en bas de page

probleme sur foot-land.com

Forum Webmastering

Trouvez des réponses à vos questions sur la création de sites web, le référencement et les meilleures pratiques pour gérer un site. Échangez avec d'autres webmasters passionnés pour améliorer vos compétences en ligne et optimiser vos projets de site web.