Forum d'entraide PHPFrance

Bonjour,

Suite à divers recherches sur des forums et des tutoriaux je n'arrive toujours pas à regler mon problème de footer.

Pour résumé :

Je dispose d'un div de contenu extensible et d'un autre div contennant le footer. Qui doit rester collé en bas de page si le contenu est extensible.
Voilà l'exemple du problème : Accéder

Merci d'avance pour vos réponses

avant de répondre, j'aimerais poser quelques questions

Tu peux nous montrer le css de la div#footer ?

Ba il est dispo en affichant la source. <_<

mais bon je suis symmpa =)

Le footer correspond au numero 13

Code : Tout sélectionner

<style type="text/css">
<!--

body{
background:url(images/background.png);
}

#Tableau_01 {
	margin: 0 auto;
	position:relative;
	left:0px;
	top:0px;
	width:1100px;
	height:900px;
}

#japan-mod-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:1100px;
	height:99px;
}

#japan-mod-02_ {
	position:absolute;
	left:0px;
	top:99px;
	width:398px;
	height:65px;
}

#japan-mod-03_ {
	position:absolute;
	left:398px;
	top:99px;
	width:209px;
	height:65px;
}

#japan-mod-04_ {
	position:absolute;
	left:607px;
	top:99px;
	width:310px;
	height:65px;
}

#japan-mod-05_ {
	position:absolute;
	left:917px;
	top:99px;
	width:116px;
	height:155px;
}

#japan-mod-06_ {
	position:absolute;
	left:1033px;
	top:99px;
	width:67px;
	height:155px;
}

#japan-mod-07_ {
	position:absolute;
	left:0px;
	top:164px;
	width:917px;
	height:90px;
}

#japan-mod-08_ {
	position:absolute;
	left:0px;
	top:254px;
	width:424px;
	height:67px;
}

#japan-mod-09_ {
	position:absolute;
	left:424px;
	top:254px;
	width:248px;
	height:67px;
}

#japan-mod-10_ {
	position:absolute;
	left:672px;
	top:254px;
	width:428px;
	height:67px;
}

#japan-mod-11_ {
	position:absolute;
	left:0px;
	top:321px;
	width:1100px;
	height:52px;
}


#japan-mod-12_ {
	background:url(images/japan-mod_12.png);
	position: relative;
	top:373px;
	width:1100px;
	
}

#japan-mod-13_ {
	background:url(images/japan-mod_13.png);
	position: absolute;
    bottom:0px;
	width:1100px;
	height:89px;
	
}

-->
</style>

une première modification déjà:

Code : Tout sélectionner

#japan-mod-12_ {
	background:url(images/japan-mod_12.png);
	position: relative;
	top:373px;
	width:1000px;
	padding-left: 100px;
}

Comme ça le texte sera dans ton cadre graphique...
Ensuite pour ton soucis, il faut que tu "encadre" tes deux derniers "cadres" dans un conteneur extensible, et ensuite tu pourras mettre une position: relativ et ça devrait se régler...

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

Humm là je viens d'essayer le footer malgré les deux en un reste en plein milieu du contenu....

Code : Tout sélectionner

#japan-mod-12_ {
   background:url(images/japan-mod_12.png);
   position: relative;
   top:373px;
   width:1000px;
   padding-left: 100px;
}

#japan-mod-13_ {
	background:url(images/japan-mod_13.png);
	position: absolute;
	width:1100px;
	height:89px;
	
}

Je n'est appliquer aucun style sur le div qui l'entoure

ton div en bottom: 0 se place par rapport a ton height dans ton tableau height: 900px;
apparemment le cumul du height de tes images doit faire plus!

tu vas avoir des gros problemes de mise en page apres en construisant avec des positions absolute
a moins que tu saches reellement ce que tu fais .

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

Le plus simple serait de mon montrer un exemple de dexu cadre avec le premier extensible et le deuxieme qui reste en dessous....

peut etre ainsi
un ex de css pour voir ce que ca donne

Code : Tout sélectionner

<style type="text/css">
*{margin: 0;padding: 0;}
#containeur {
	width: 800px;
	background-color: #eee;
}
#top {
	height:100px;
}
#wrapper {
	width: 800px;
	border: 1px solid red;
	background-color: #eee;
}
#contenudusite {
	margin: 0 10px;;
	width: 780px;
	background-color: #fff;
	height: 100px;
}
#footer {
	background-color: #eee;
	height: 100px;
}
</style>
<div id="containeur">
<div id=top>top</div>
     <div id="wrapper">
           <div id="contenudusite">contenu</div>
     </div>
<div id="footer">footer</div>
</div>

en gros
tu n utilises les positions absolute que dans le div top pour decouper ton image

faire un wrapper
tu redecoupes japan_12 sur 1px de height et tu le repeat en background sur y
il fera le width: 1110px;

les cotes de ton image 12 font environ 18px*2
donc dans id="contenudusite"
width: 1110 - 36 = 1074
margin: 0 auto; ou margin: 0 18px;////s ajuster au wrapper
height: 400px //juste pour l exemple si contenu est vide
ainsi quand ton contenu augmentera, le wrapper augmenetra avec lui d autant.

pas de position absolute pour le footer
surement d autres conditions a faire et qlqtrucs a coriger

sinon
tes png qui ont de la transparence comme japan 12, <ie7 ne gere pas
tu aurais pu peut etre cadrer ton site pour les resolutions inferieurs ??!! au moins 1024

voila j espere que ca sera utile

le truc cest que tout me div sont bel et bien dans un autre si j'enleve le position:absolute; ben le footer se retrouve tout en haut <__<

Sinon ben là j'ai tout essayer à celui qui voudrait essayer...

EDIT :

très bonne colaboration de johnass, qui à su résoudre mon problème! encore merci à lui!

Forum d'entraide PHPFrance

Footer ne se déplace pas

Footer ne se déplace pas