Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
818 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme de Footer...

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Probleme de Footer...

n°1875859
kakashii
Posté le 21-04-2009 à 15:01:53  profilanswer
 

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
mood
Publicité
Posté le 21-04-2009 à 15:01:53  profilanswer
 

n°1875866
FlorentG
Unité de Masse
Posté le 21-04-2009 à 15:08:39  profilanswer
 

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

n°1875880
kakashii
Posté le 21-04-2009 à 15:25:48  profilanswer
 

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

n°1875884
FlorentG
Unité de Masse
Posté le 21-04-2009 à 15:32:02  profilanswer
 

Le footer doit être en dehors du global

n°1875891
kakashii
Posté le 21-04-2009 à 15:39:46  profilanswer
 

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

n°1875893
kakashii
Posté le 21-04-2009 à 15:46:31  profilanswer
 

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
n°1875900
abais
Posté le 21-04-2009 à 16:04:11  profilanswer
 

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.
n°1875907
kakashii
Posté le 21-04-2009 à 16:19:45  profilanswer
 

excuse moi je comprend pas ton message ?  :jap:

Message cité 1 fois
n°1875978
tompouss
Petit chat
Posté le 21-04-2009 à 18:55:16  profilanswer
 

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
n°1875980
kakashii
Posté le 21-04-2009 à 18:57:49  profilanswer
 

Voila désolé ;)

mood
Publicité
Posté le 21-04-2009 à 18:57:49  profilanswer
 

n°1875981
David Bori​ng
Posté le 21-04-2009 à 19:04:26  profilanswer
 

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 !

n°1875985
abais
Posté le 21-04-2009 à 19:26:23  profilanswer
 

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.
n°1875988
David Bori​ng
Posté le 21-04-2009 à 19:37:33  profilanswer
 

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. }

n°1876005
kakashii
Posté le 21-04-2009 à 20:29:35  profilanswer
 

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
n°1876007
David Bori​ng
Posté le 21-04-2009 à 20:35:34  profilanswer
 

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

n°1876010
kakashii
Posté le 21-04-2009 à 20:38:16  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme de Footer...

 

Sujets relatifs
Problème de (gros...) debutantProblème de gestion de stock sous excel 2007
[Problème] Instanciation de Servlet au démarrage de TomcatProbleme FMod, enchainement sans coupure
Problème avec les variables globales, bug PHP !?probleme de regex et preg_replace
[CSS] Problème de footer sous un div avec du contenu fixe/variableProblème placement footer
XHTML : probleme de footerProbleme avec ie, affichage de footer
Plus de sujets relatifs à : Probleme de Footer...

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.067 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR