Faire descendre le footer en fonction de l'info à afficher

Faire descendre le footer en fonction de l'info à afficher - HTML/CSS - Programmation

Marsh Posté le 15-12-2005 à 15:20:12    

Bonjour,
 
Voilà, je prépare la structure d'un futur site web. Je souhaiterai que le footer "descende" en fonction de la masse d'information à afficher dans la page. Je galère depuis un moment avec les pourcentages, sans arriver non plus à mettre les div du footer au bon endroit !
 
Voici ma page
 
Et voici la css :

Code :
  1. body {
  2. background-color:#000033;
  3. }
  5. .global{
  6. position:relative;
  7. left:0;
  8. top:0;
  9. width:100%;
  10. height:100%;
  11. }
  13. .cont-header {
  14. position:absolute;
  15. left:0px;
  16. top:0px;
  17. width:100%;
  18. height:94px;
  19. background-image:url(images/cont-header.gif);
  20. }
  22. .header {
  23. position:absolute;
  24. left:0px;
  25. top:0px;
  26. width:820px;
  27. height:94px;
  28. background-image:url(images/header.gif);
  29. }
  31. .navi {
  32. position:absolute;
  33. left:0px;
  34. top:94px;
  35. width:820px;
  36. height:66px;
  37. background-image:url(images/navi.gif);
  38. }
  40. .cont-navi {
  41. position:absolute;
  42. left:0px;
  43. top:94px;
  44. width:100%;
  45. height:66px;
  46. background-image:url(images/cont-navi.gif);
  47. }
  49. .frame {
  50. position:absolute;
  51. left:0px;
  52. top:0px;
  53. width:820px;
  54. height:453px;
  55. }
  57. .cont-frame {
  58. position:absolute;
  59. left:0px;
  60. top:160px;
  61. width:100px;
  62. height:100%;
  63. background-color:#99FF00;
  64. }
  66. .frame-g {
  67. position:absolute;
  68. left:0px;
  69. top:0px;
  70. width:126px;
  71. height:100%;
  72. background-color:#33CCCC;
  73. }
  75. .frame-d {
  76. position:absolute;
  77. left:126px;
  78. top:0px;
  79. width:100%;
  80. height:100%;
  81. background-color:#FFFFFF;
  82. }
  84. .footer {
  85. position:relative;
  86. left:0px;
  87. top:0px;
  88. width:820px;
  89. height:38px;
  90. background-image:url(images/footer.gif);
  91. }
  93. .cont-footer {
  94. position:relative;
  95. left:0px;
  96. top:600px;
  97. width:100%;
  98. height:38px;
  99. background-image:url(images/cont-footer.gif);
  100. }


 
Pouvez-vous m'aider ?
 
Merci d'avance !


---------------
Consultant SEO
Reply

Marsh Posté le 15-12-2005 à 15:20:12   

Reply

Marsh Posté le 15-12-2005 à 15:25:07    

salut je fais un site et je vous colle une grosse feuille de style mais pour le code HTML débrouillez vous, devinez le vous-même

Message cité 1 fois
Reply

Marsh Posté le 15-12-2005 à 16:01:46    

gatsu35 a écrit :

salut je fais un site et je vous colle une grosse feuille de style mais pour le code HTML débrouillez vous, devinez le vous-même


 
Euh ben désolé que tu le prennes ainsi.  :??: Ne peux-tu pas afficher la source de la page dont je donne le lien ?
 
Bon, j'ai modifié ma css car c'était plutôt le fouillis entre absolute et relative. Là c'est bon sous IE mais sous Firefox je rencontre un pitit souci. Vous pouvez aller jeter un oeil avec ce navigateur si vous voulez bien me filer un coup de pouce.  ;)  
 
Voilà ma css modifiée :  
 

Citation :

body {
 background-color:#000033;
}
 
.global{
 left:0;
 top:0;
 width:100%;
 height:100%;
}
 
.cont-header {
 left:0px;
 top:0px;
 width:100%;
 height:94px;
 background-image:url(images/cont-header.gif);
}
 
.header {
 left:0px;
 top:0px;
 width:820px;
 height:94px;
 background-image:url(images/header.gif);
}
 
.navi {
 left:0px;
 top:94px;
 width:820px;
 height:66px;
 background-image:url(images/navi.gif);
}
 
.cont-navi {
 left:0px;
 top:94px;
 width:100%;
 height:66px;
 background-image:url(images/cont-navi.gif);
}
 
.frame {
 position:relative;
 left:0px;
 top:0px;
 width:820px;
 height:100%;
}
 
.cont-frame {
 left:0px;
 top:160px;
 width:100%;
 height:100%;
 background-color:#FFFFFF;
}
 
.frame-g {
 position:absolute;
 left:0px;
 top:0px;
 width:126px;
 height:100%;
 background-color:#33CCCC;
}
 
.frame-d {
 position:relative;
 left:126px;
 top:0px;
 width:694px;
 height:100%;
 background-color:#FFF895;
}
 
.footer {
 left:0px;
 top:0px;
 width:820px;
 height:38px;
 background-image:url(images/footer.gif);
}
 
.cont-footer {
 left:0px;
 top:613px;
 width:100%;
 height:38px;
 background-image:url(images/cont-footer.gif);
}


---------------
Consultant SEO
Reply

Marsh Posté le 15-12-2005 à 16:18:13    

lol j'ai po fait gaffe que tu avais filé le lien de la page.
 
erf scuse moi

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed