Probleme de footer avec height 100% ...

Probleme de footer avec height 100% ... - HTML/CSS - Programmation

Marsh Posté le 03-03-2011 à 17:50:45    

Bonjour à tous,
 
je rencontre un soucis avec mon pied de page (footer) , il se ballade toujours en milieu de page quand cette dernière est très longue.  
A force de retoucher, changer, tester, je vois plus trop quoi faire ou j'ai du oublier de remettre un truc en place ...
 
Ma page :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title></title>
  6. <link href="one.css" rel="stylesheet" type="text/css" />
  7. </head>
  9. <body>
  10. <div id="identification"><?php include('includes/identification.php'); ?></div>
  11. <div id="bandeau"><?php include('includes/bandeau.php'); ?></div>
  12. <div id="menu"><?php include('includes/menu.php'); ?></div>
  13. <div id="contenu">
  14. <div id="contenufiche">
  15. <?php include('includes/fiche.php'); ?>
  16. </div>
  17. <div id="contenudroite"><?php include('includes/contenu-droite.php'); ?></div>
  18. <div id="footer"><?php include('includes/copyright.php'); ?></div>
  19. </div>
  22. </body>
  23. </html>


 
Le CSS ...
 

Code :
  1. html, body {
  3. background-color: #FFFFFF;
  4. margin-left: 0px;
  5. margin-top: 0px;
  6. margin-right: 0px;
  7. margin-bottom: 0px;
  8. background-image:url(commun/carbon-fiber.jpg);
  9. background-position:top;
  10. height: 100%
  11. }
  12. div {
  13. text-align:center;
  14. }
  15. div#identification {
  16. position:absolute;
  17. width:988px;
  18. height:30px;
  19. margin-left: -495px;
  20. left: 50%;
  21. border : solid #000000 1px;
  22. }
  23. div#bandeau {
  24. position:absolute;
  25. width:988px;
  26. height:120px;
  27. background-color:#FFCC33;
  28. margin-left: -495px;
  29. left: 50%;
  30. border : solid #000000 1px;
  31. top:30px;
  32. }
  33. div#menu {
  34. position:absolute;
  35. width:988px;
  36. height:30px;
  37. margin-left: -495px;
  38. left: 50%;
  39. border : solid #000000 1px;
  40. top:150px;
  41. }
  42. div#contenu {
  43. position:relative;
  44. width:988px;
  45. height:100%;
  46. background-color:#FFFFFF;
  47. margin-left: -495px;
  48. left: 50%;
  49. border : solid #000000 1px;
  50. top:180px;
  52. vertical-align:top;
  53. }
  54. div#contenufiche {
  55. position:relative;
  56. float: left;
  57. width:770px;
  58. height:100%;
  59. background-color:#FFFFFF;
  60. top:0px;
  62. vertical-align:top;
  63. text-align:left;
  64. padding-left:0px;
  65. }
  66. div#contenudroite {
  67. position:relative;
  68. float: left;
  69. width:216px;
  70. height:100%;
  71. background-color:#CCCCCC;
  72. top:0px;
  73. margin-left: 0px;
  75. vertical-align:top;
  76. text-align:left;
  77. padding-left:0px;
  78. border : solid #FF0000 1px;
  79. }
  83. div#footer {
  84. position:absolute;
  85. clear:both;
  86. width:990px;
  87. height:30px;
  88. background-color:#CCCCCC;
  89. border : solid #000000 1px;
  90. bottom: 0px;
  91. }


 
Un schema aidera peut être ...

Reply

Marsh Posté le 03-03-2011 à 17:50:45   

Reply

Marsh Posté le 04-03-2011 à 07:56:44    

Salut.
Hé bien je sais pas trop ce que tu veux.  :heink:  
Tu test, tu test.
 
Je sais pas si ça te convient : (surement pas mais bon  :ange: on sait jamais)

Code :
  1. html, body {
  2. background-color: #FFFFFF;
  3. margin-left: 0px;
  4. margin-top: 0px;
  5. margin-right: 0px;
  6. margin-bottom: 0px;
  7. background-image:url(commun/carbon-fiber.jpg);
  8. background-position:top;
  9. height: 100%
  10. }
  11. div {
  12. text-align:center;
  13. }
  14. div#identification {
  15. position:absolute;
  16. width:988px;
  17. height:30px;
  18. margin-left: -495px;
  19. left: 50%;
  20. border : solid #000000 1px;
  21. }
  22. div#bandeau {
  23. position:absolute;
  24. width:988px;
  25. height:120px;
  26. background-color:#FFCC33;
  27. margin-left: -495px;
  28. left: 50%;
  29. border : solid #000000 1px;
  30. top:30px;
  31. }
  32. div#menu {
  33. position:absolute;
  34. width:988px;
  35. height:30px;
  36. margin-left: -495px;
  37. left: 50%;
  38. border : solid #000000 1px;
  39. top:150px;
  40. }
  41. div#contenu {
  42. position:relative;
  43. width:988px;
  44. height:100%;
  45. background-color:#FFFFFF;
  46. margin-left: -495px;
  47. left: 50%;
  48. border : solid #000000 1px;
  49. top:180px;
  50. vertical-align:top;
  51. }
  52. div#contenufiche {
  53. position:relative;
  54. float: left;
  55. width:770px;
  56. height:100%;
  57. background-color:#FFFFFF;
  58. top:0px;
  59. vertical-align:top;
  60. text-align:left;
  61. padding-left:0px;
  62. }
  63. div#contenudroite {
  64. position:relative;
  65. float: left;
  66. width:216px;
  67. height:99.69%;
  68. background-color:#CCCCCC;
  69. top:0px;
  70. margin-left: 0px;
  71. vertical-align:top;
  72. text-align:left;
  73. padding-left:0px;
  74. border : solid #FF0000 1px;
  75. }
  76. div#footer {
  77. position:absolute;
  78. clear:both;
  79. width:768px;
  80. height:30px;
  81. background-color:#CCCCCC;
  82. border : solid #000000 1px;
  83. bottom: 0px;
  84. }

Reply

Marsh Posté le 04-03-2011 à 09:32:39    


Hello, merci pour ta réponse, je vais regarder ci cela fonctionne comme je le souhaite.  
 
Voila ce que je comptais faire :
 
http://img200.imageshack.us/img200/6514/cssschema.jpg
 
Mais le footer bizarrement passe par dessus le contenu de la fiche quand celui ci devient trop long (Affichage d'une requete de centaine de fiche).
 
J'ai encore bouger mon code je simplifie...

Reply

Marsh Posté le 04-03-2011 à 10:06:24    

Hello cetplus,
 
ça s'améliore, mais c'est toujours pas ça ...  :pt1cable: Sur toutes les pages, c'est ok, sauf celle ou une liste assez longue s'affiche, je comprends pas...
 
J'en suis la :
 
Page :

Code :
  1. <div id="contenu">
  2. <div id="identification"><?php include('includes/identification.php'); ?></div>
  3. <div id="bandeau"><?php include('includes/bandeau.php'); ?></div>
  4. <div id="menu"><?php include('includes/menu.php'); ?></div>
  5. <div id="contenufiche">
  6. <?php include('includes/fiche.php'); ?>
  7. </div>
  8. <div id="contenudroite"><?php include('includes/contenu-droite.php'); ?></div>
  9. <div id="footer"><?php include('includes/copyright.php'); ?></div>
  10. </div>


 
Et le CSS :
 

Code :
  1. html, body {
  3. background-color: #FFFFFF;
  4. margin-left: 0px;
  5. margin-top: 0px;
  6. margin-right: 0px;
  7. margin-bottom: 0px;
  8. background-image:url(commun/carbon-fiber.jpg);
  9. background-position:top;
  10. height: 100%
  11. }
  12. div {
  13. text-align:center;
  14. }
  15. div#contenu {
  16. position:absolute;
  17. width:988px;
  18. height:100%;
  19. background-color:#FFFFFF;
  20. margin-left: -495px;
  21. left: 50%;
  22. border : solid #000000 1px;
  23. vertical-align:top;
  24. }
  25. div#identification {
  26. position:relative;
  27. width:988px;
  28. height:30px;
  29. border : solid #000000 1px;
  30. }
  31. div#bandeau {
  32. position:relative;
  33. width:988px;
  34. height:120px;
  35. background-color:#FFCC33;
  36. border : solid #000000 1px;
  37. }
  38. div#menu {
  39. position:relative;
  40. width:988px;
  41. height:30px;
  42. border : solid #000000 1px;
  43. }
  45. div#contenufiche {
  46. position:relative;
  47. float: left;
  48. width:770px;
  49. height:100%;
  50. background-color:#FFFFFF;
  52. vertical-align:top;
  53. text-align:left;
  54. padding-left:0px;
  55. }
  56. div#contenudroite {
  57. position:relative;
  58. float: left;
  59. width:216px;
  60. height:99.69%;
  61. background-color:#CCCCCC;
  62. top:0px;
  63. margin-left: 0px;
  65. vertical-align:top;
  66. text-align:left;
  67. padding-left:0px;
  68. border : solid #FF0000 1px;
  69. }
  72. div#footer {
  73. position:absolute;
  74. clear:both;
  75. width:768px;
  76. height:30px;
  77. background-color:#CCCCCC;
  78. border : solid #000000 1px;
  79. bottom: 0px;
  80. }


Message édité par fscalda le 04-03-2011 à 10:07:17
Reply

Marsh Posté le 04-03-2011 à 10:30:17    

Bon, je commence à comprendre, la position de mon footer est non dépendante  de mon  div#contenufiche  et de div#contenudroite, mais seulement de div#contenudroite.
 
Donc, si mon contenu de droite est plus ou moins vide...ça donne ça :
 
http://img28.imageshack.us/img28/5333/cssschema2.jpg


Message édité par fscalda le 04-03-2011 à 10:30:50
Reply

Marsh Posté le 10-03-2011 à 17:37:23    

si ton site est statique, en bricolant tu pourrais y arriver en mettant tes div contenu fiche et contenu droite dans un meme div "contenu" par exemple donc la hauteur correspond a la hauteur la plus grande entre fiche et droite et tu place en dessous (dans l'ordre c'est important) dans ton fichier html la div footer avec en css position:relative et top:0.

Reply

Marsh Posté le 11-03-2011 à 11:16:44    

Merci crasse2, le contenu fiche est dynamique, mais bon, tu m'as donné une super piste, je teste et je fais un retour  [:aztechxx]

Reply

Marsh Posté le 11-03-2011 à 11:27:24    

Un clear:left sur le #footer devrait suffire non ?
Tes blocs contenu sont flottant, donc en dehors du flux.
Ce sont les bases du css
http://www.coursweb.ch/css/float.html

Reply

Marsh Posté le 11-03-2011 à 16:34:30    

Clear : left ne fonctionne pas ... je vais tout reprendre tranquillement depuis le début...

Reply

Marsh Posté le 11-03-2011 à 16:54:07    

C'est certain, pour le moment c'est n'importe quoi (sorry)
Voilà ton layout

Code :
  1. * {margin:0;    padding:0;}
  2.     body {
  3.         background:#fff url(commun/carbon-fiber.jpg) top;
  4.     }
  5.     div {
  6.         text-align: center;
  7.     }
  8.     #contenu {
  9.         width: 988px;
  10.         margin: 0 auto;
  11.     }
  12.     #identification {
  13.         background: red;
  14.     }
  15.     #bandeau {
  16.         background-color: #FFCC33;
  17.     }
  18.     #menu {
  19.         background: teal;
  20.         height: 30px;
  21.         border :1px solid #000;
  22.     }
  23.     #wrapper_content {
  24.         overflow: hidden;
  25.         zoom: 1;
  26.     }
  27.     div#contenufiche {
  28.         float: left;
  29.         width: 770px;
  30.         background-color: #FFFFFF;
  31.     }
  32.     div#contenudroite {
  33.         float: right;
  34.         width: 216px;
  35.         background-color: #CCCCCC;
  36.     }
  37.     div#footer {
  38.         background-color: orange;
  39.     }


Code :
  1. <div id="contenu">
  2.  <div id="identification">identification</div>
  3.  <div id="bandeau">bandeau</div>
  4.  <div id="menu">menu</div>
  5.  <div id="wrapper_content">
  6.   <div id="contenufiche">
  7.    contenu fiche
  8.   </div>
  9.   <div id="contenudroite">conteu droite</div>
  10.  </div>
  11.  <div id="footer">footer</div>
  12. </div>

Reply

Marsh Posté le 11-03-2011 à 16:54:07   

Reply

Marsh Posté le 11-03-2011 à 17:59:58    

Vi, c'est clair qu'il à fallu que je nettoie grandement  :pt1cable:  car comme tu l'as très bien mentionné, je dirais que j'ai fait de la m*  :whistle: mais bon, j'ai trouvé à force de chercher.  
 
L'url de la mort http://ryanfait.com/sticky-footer/
 

Reply

Sujets relatifs:

Leave a Replay

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