Header Content Footer en Css

Header Content Footer en Css - HTML/CSS - Programmation

Marsh Posté le 12-12-2011 à 16:39:58    

Bonjour à tous,
Voilà je suis incapable de faire un truc propre .. j'ai tout essayé ... mais voilà
 
http://img545.imageshack.us/img545/9673/headerfooter.th.jpg
 
Je souhaite donc comme sur le dessin avoir en haut mon Header, ensuite mon contenu (composé d'une partie gauche fixée à 700px et d'une partie droite fixée a 200px en gros) et enfin du footer qui resterait systématiquement en bas.
 
Seulement voilà dès que j'associe un bord droit à ma classe #Main.Left celui ci s'arrête quand il n'y a plus de contenu ... j'aimerais bien voir mon "border right et left" prendre toute la hauteur de l'espace entre le footer et le header ..
 
J'ai tout essayé ...
Header : position relative
Footer : Position relative, bottom 0 (meme fixed ...)
 
Actuellement j'ai :
 

Code :
  1. #header {
  2.     height:100px;
  3.     width:100%;
  4.     margin-top:0;
  5.     position:relative;
  6. }
  8. #main
  9. {
  10.     margin:0 auto;
  11.     width:900px;
  12.     height:100%;
  13.     min-height: 100%;
  14.     clear:both;
  15.     display:block;
  16.     position: relative;
  17. }   
  18. #main .left
  19. {
  20.     width: 698px;
  21.     float:left;
  22.     border-right:1px solid #ccc;
  23.     border-left:1px solid #ccc;
  24.     /* code shadow */
  25.     position:relative;
  26.     height:100%;
  27.     min-height: 100%;
  28.     height:auto;
  29. }
  30. #main .right
  31. {
  32.     float:right;
  33.     min-height:100%;
  34.     height:100%;
  35.     position:relative;
  36.     width:200px;
  37. }
  38. #footer
  39. {
  40.     width:100%;
  41.     border-top:1px solid #777;
  42.     background-color: #ccc;
  43.     position:absolute;
  44.     bottom:0;
  45.     height:80px;
  46.     display:block;
  47. }


 
J'ai même essayé avec un div #container regroupant le header,content et footer mais rien n'y fait ... body à 100% ... container aussi ... ca doit etre tout simple mais je sèche ;)
 
Merci pour votre aide :)
 
Cordialement

Reply

Marsh Posté le 12-12-2011 à 16:39:58   

Reply

Marsh Posté le 03-01-2012 à 08:11:33    

probléme résolue ?

Reply

Marsh Posté le 03-01-2012 à 08:15:13    

Heu non ... Mais j'ai fait autrement en attendant :(

Reply

Marsh Posté le 11-01-2012 à 14:52:31    

Le positionnement en hauteur est toujours problématique (notamment pour la compatibilité).
Mais la tendance est quand même de laisser les bas de page... en bas des pages.
D'autant plus que l'on navigue de plus en plus sur des petits écrans (smartphones, tablettes, etc).


---------------
Je ne donne que des pistes. A chacun de les travailler. creation de sites internet
Reply

Sujets relatifs:

Leave a Replay

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