28172 sujets

CSS et mise en forme, CSS3

Un footer qui doit se placer à la suite du contenu + ou - long

Bonjour,

J'ai un souci avec le footer de mon site.
J'ai suivi le tutoriel alsacreations pour créer un site en html et css et normalement le footer est sensé suivre le contenu, selon sa longueur. Or ici il reste au même endroit malgré le fait que j'ajoute du texte dans le contenu.

mon code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head></head>
	
	<body>
	<div id="conteneur">		
		
        <div id="header"></div>
        
		<div id="contenu"></div>
        
		<div id="footer"></div>
        
	</div>
 
	</body>
</html>


Et mon code css :

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}


#conteneur
{
	width: 1024px ;
	height:768px;
	margin: 0 auto ;
	text-align: left ;
}


#header
{
	width:980px;
	height:170px;
	background:url("../Images/bandeau-haut.jpg") no-repeat;
	position:relative;
	z-index:1;
}

#contenu
{
	width:980px;
	height:528px;
	float:left;
	margin-top:0;
}

#footer
{
	width:980px;
	height:70px;
	line-height:30px ;
	text-align:right ;
	background:url("../Images/footer.jpg") no-repeat;
	margin-top:0;
	z-index:2;
}



Je ne vous ai mis que les principales propriétés car je pense que ça vient de là.

Est-ce un problème au niveau de la hiérarchie des éléments div ?


Merci pour vos réponses.
Bonjour,

Cela provient du float:left; dans #contenu.

soit tu l'enlève.
Soit tu mets un clear:left sur le #footer.

Tout dépend ce que tu veux faire. Mais je te conseille quand même la première solution.

plus d'info ici
Merci beaucoup masseuro.

Cela veut-il dire que je dois mettre dans #contenu la propriété position:relative; ?
Ou je ne mets rien ?
J'ai essayé avec ce que tu m'as dit masseuro mais ça ne fonctionne pas.

Aurais-tu une autre idée ?
mama5 a écrit :
Je me suis inspirée d'un autre post http://forum.alsacreations.com/topic-4-43166-1-Le-contenu-glisse-sous-le-footer.html pour pouvoir remédier au footer qui reste dessus le contenu et ne descend pas au fur et à mesure que celui s'allonge.

J'ai mis height:100%; à #contenu mais maintenant le footer se place encore plus haut sur la page et donc toujours au-dessus du contenu...

Si quelqu'un aurait une idée ça serait chouette Smiley ravi

Merci encore,


Bonjour,

Le plus simple serait de nous donner le lien vers la page en ligne
Smiley cligne
Je continue à chercher, en modifiant les propriétés height des balises principales (cf. ci-dessus) et à voir pour les marges, ajouter des paddings mais rien n'y fait.

C'est dingue pourtant le footer, comme il est défini, devrait aller en-dessous du contenu sans problème (enfin je pense, j'ai peut-être un erreur dans mon code que je ne vois plus...).
Pas le temps de regarder précisement, mais vite vu:

-valider la page html qui comporte des erreurs;
-corriger en particulier:
<style type="text/css"> (</style>

-revoir le mode de positionnement css à base d'abus de position:absolute;
-ne pas mettre d'images de contenu en background ccs mais dans le code html.
C'est vrai que les éléments placés dans les parties footer, contenu et header sont en position absolute.


là j'ai mis tout les éléments en position relative et le footer reste toujours à la même place.

pour le code css que tu m'as précisé, quand je ferme la parenthèse, cette dernière prend les propriétés de texte et apparaît en haut de la page.

bon je crois que je vais refaire le site...

merci pour ton aide !
Bon en fait j'ai trouvé une solution alternative (mon problème n'est toujours pas résolu).

C'est du bricolage : dans le code html, je donne un padding-top au footer afin qu'il se place en-dessous du contenu.
Le problème : pour IE6 et 7, le footer se place où il faut mais pour FF et IE8, ça crée des marges importantes entre le footer et le contenu sur certaines pages...
Sujet clos
Aller à