Probleme de Footer...

Probleme de Footer... - HTML/CSS - Programmation

Marsh Posté le 21-04-2009 à 15:01:53    

Yop  :hello: ,  
j'ai le fameux problème du footer, en fait j'aimerais qu'il soit toujours en bas quand le contenu est pauvre. Je m'attendais pas à un truc compliqué pour ça!  :o  
 
Mon html rapidement :

Spoiler :

<div id="global">
   
  <div id="header">  
   <?php include('header.php'); ?>
  </div>
   
  <div id="contenu">
   <?php include('main.php'); ?>
  </div>
   
  <div id="footer">
   <?php include('footer.php'); ?>
  </div>
   
 </div>


 
et mon css :
 

Spoiler :

html,body,#global{height:100%;}
 
div#global {
 width: 800px;
 margin: auto;
 border:1px solid black;
 border-top:none;
 border-bottom:none;
}
 
div#contenu {
 background-color:white;
}
 
div#footer{
 height:50px;
 background-color:yellow;
}


 
J'ai essayé plusieurs tutos du net mais j'arrive jamais à les appliquer correctement puisque j'ai jamais le bon résultat  :??:


Message édité par kakashii le 21-04-2009 à 15:04:10
Reply

Marsh Posté le 21-04-2009 à 15:01:53   

Reply

Marsh Posté le 21-04-2009 à 15:08:39    

Y'a un site spécial ça : CSS Sticky Footer

Reply

Marsh Posté le 21-04-2009 à 15:25:48    

oui j'avais essayé aussi, mon code est pas adapté ???

Reply

Marsh Posté le 21-04-2009 à 15:32:02    

Le footer doit être en dehors du global

Reply

Marsh Posté le 21-04-2009 à 15:39:46    

Ah oui ca va mieux :)
Le seul problème maintenant c'est que le "contenu" n'a pas de fond blanc, c'est transparent

Reply

Marsh Posté le 21-04-2009 à 15:46:31    

Code :
  1. <div id="global">
  3.  <div id="header">
  4.   <?php include('header.php'); ?>
  5.  </div>
  7.  <div id="main" class="clearfix">
  9.   <div id="contenu">
  10.    <?php include('main.php'); ?>
  11.   </div>
  13.  </div>
  15. </div>
  17. <div id="footer">
  18.  <?php include('footer.php'); ?>
  19. </div>


 

Code :
  1. html,body,#global{height:100%;}
  3. body > #global {height: auto; min-height: 100%; }
  5. #main {padding-bottom: 50px; }
  7. .clearfix:after {content: ".";
  8. display: block;
  9. height: 0;
  10. clear: both;
  11. visibility: hidden;}
  13. .clearfix {display: inline-block; }
  15. /* Hides from IE-mac \*/
  17. * html .clearfix { height: 1%;}
  18. .clearfix {display: block;}
  20. /* End hide from IE-mac */
  22. /* BODY */
  23. body {
  24. background-image:url("../images/fond copie.png" );
  25. background-repeat:repeat-x;
  26. background-color : #F0B44B;
  27. font-family: Verdana, serif;
  28. font-size: 11px;
  29. }
  31. /* GLOBAL */
  32. div#global {
  33. width: 800px;
  34. margin: auto;
  35. border:1px solid black;
  36. border-top:none;
  37. border-bottom:none;
  38. }
  40. div#contenu {
  41. margin: auto;
  42. background-color:white;
  43. }
  45. div#footer{
  46. margin:auto;
  47. width:800px;
  48. height:50px;
  49. background-color:yellow;
  50. position: relative;
  51. margin-top: -50px;
  52. clear:both;
  53. }


 
 :ouch:  :ouch:


Message édité par kakashii le 21-04-2009 à 18:57:41
Reply

Marsh Posté le 21-04-2009 à 16:04:11    

Tu as des balises Code qui ne sont pas là pour décorer...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 21-04-2009 à 16:19:45    

excuse moi je comprend pas ton message ?  :jap:

Message cité 1 fois
Reply

Marsh Posté le 21-04-2009 à 18:55:16    

il veut dire que tu dois utiliser la balise code pour afficher ton code plus lisiblement  
 
c'est fait pour


---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 21-04-2009 à 18:57:49    

Voila désolé ;)

Reply

Marsh Posté le 21-04-2009 à 18:57:49   

Reply

Marsh Posté le 21-04-2009 à 19:04:26    

Ta CSS est un peu "pourrie".
J'imagine que tu as copié du code sans rien comprendre, et en plus, sur la page originel, il est bien dit de plus employer cette méthode
http://www.positioniseverything.net/easyclearing.html
Mais bon, pour info, tu peux arrêter de code pour IE5.5 MAC
 
Et sinon, comme clearer, je te conseille overflow:auto;zoom:1 sur le conteneur
 
 
Et sinon, il faut employer les balises code pour poster, pas spoiler !

Reply

Marsh Posté le 21-04-2009 à 19:26:23    

kakashii a écrit :

excuse moi je comprend pas ton message ?  :jap:


Voici le même extrait dans un [ code=css ]

Code :
  1. html,body,#global{height:100%;}
  2.  
  3. div#global {
  4.     width: 800px;
  5.     margin: auto;
  6.     border:1px solid black;
  7.     border-top:none;
  8.     border-bottom:none;
  9. }
  10.  
  11. div#contenu {
  12.     background-color:white;
  13. }
  14.  
  15. div#footer{
  16.     height:50px;
  17.     background-color:yellow;
  18. }


... Tu peux mettre le language dans la balise pour donner qqchose encore mieux :)


Message édité par abais le 21-04-2009 à 19:27:58

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 21-04-2009 à 19:37:33    

Et donc pour avoir le fond blanc

Code :
  1. div#global {
  2.     width: 800px;
  3.     margin: auto;
  4.     border:1px solid black;
  5.     border-top:none;
  6.     border-bottom:none;
  7.     overflow:hidden;
  8.     zoom:1
  9. }

Reply

Marsh Posté le 21-04-2009 à 20:29:35    

Oki je ferais attention la prochaine fois pour les balises ;)
sinon le code au dessus n'a pas l'air de fonctionner  :??:
 
edit :  
 
ah en fait ça dépend, parce que le background-color:white; je l'ai mis dans contenu et non dans global!
Quand je le met dans global, ça met un fond blanc bien sur, sur toute la hauteur!


Message édité par kakashii le 21-04-2009 à 20:36:48
Reply

Marsh Posté le 21-04-2009 à 20:35:34    

Heu, sorry, tu dois mettre le clearer sur #contenu

Reply

Marsh Posté le 21-04-2009 à 20:38:16    

Ca ne marche pas non plus, j'ai édité mon message au dessus :)

Reply

Sujets relatifs:

Leave a Replay

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