Footer ne se déplace pas

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Footer ne se déplace pas

par flotix » 02 févr. 2008, 18:18

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!

par johnass » 02 févr. 2008, 17:10

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 :lol:

par flotix » 02 févr. 2008, 16:20

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

par johnass » 02 févr. 2008, 15:42

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 . :)
:D

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

par flotix » 02 févr. 2008, 12:53

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

par jojolapine » 02 févr. 2008, 12:43

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]

par flotix » 02 févr. 2008, 12:29

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>

par Berzemus » 02 févr. 2008, 12:28

avant de répondre, j'aimerais poser quelques questions :wink:
Tu peux nous montrer le css de la div#footer ?

Footer ne se déplace pas

par flotix » 02 févr. 2008, 12:10

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