Newbee - template fluide à 100% avec des DIV

Newbee - template fluide à 100% avec des DIV - HTML/CSS - Programmation

Marsh Posté le 06-08-2008 à 12:09:50    

Bonjour
 
Je voudrais faire un 'layout' avec un header qui prend 100% de la largeur et 70px de haut.
Dessous, deux colonnes l'une à côté de l'autre. L'une faisant 210px de large et l'autre, prenant le reste.
Ces deux dernière colonnes devraient prendre la hauteur restante disponible.
 
Cependant, lorsque je code ceci, ça ne marche pas. Si je met height: 100% dans mes styles de mes deux conteneurs du bas, il me prend bien 100%, mais en sus des 70px du header, ce qui occasion des 'scrollbars' sur le côté. De plus, lorsque le contenu dépasse les 100%, la couleur de fond ne suit pas  :cry:  
 
Es-ce que vous pouvez m'aider ??
 
voici un aperçu :  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  6. <style>
  7. html, body {
  8. margin: 0;
  9. padding: 0;
  10. background-color: #fff;
  11. height: 100%;
  12. }
  14. #wrapper {
  15. background-color : #c0c0c0;
  16. height : 100%;
  17. width : 100%;
  18. }
  20. #header {
  21. background-color : #fff;
  22. height: 70px;
  23. }
  25. #menu {
  26. position: absolute; top: 70px; left: 0px; bottom: 0px;
  27. background-color : #e5e5e5;
  28. width : 210px;
  29. float: left;
  30. }
  32. #content {
  33. position: absolute; top: 70px; left: 210px; bottom: 0px right: 0px;
  34. background-color : #c0c0c0;
  35. float: left;
  36. }
  38. </style>
  39. </head>
  40. <body>
  41. <div id="wrapper">
  42. <div id="header">
  43.  header
  44. </div>
  46. <div id="menu">
  47.  menu
  48. </div>
  50. <div id="content">
  51.  content 2
  52. </div>
  54. </div>
  55. </body>
  56. </html>


 
Merci de votre aide

Reply

Marsh Posté le 06-08-2008 à 12:09:50   

Reply

Marsh Posté le 06-08-2008 à 16:20:25    

Un élément placé en float sort du flux de lecture et n'est pas pris en compte par l'élément parent dans le cas ou celui-ci n'auraient pas de dimension explicite.
Il convient donc de placer ce que l'on appelle un spacer, simple balise <div> contenant un espace insécable qui aura pour propriété clear:both en CSS.

Message cité 1 fois
Reply

Marsh Posté le 07-08-2008 à 05:18:01    

solution pas tres semantique (div vide)
il vaut mieux appliquer un contexte de formatage sur le conteneur  
il y a plusieurs solutions:
http://www.blog-and-blues.org/arti [...] _formatage
le mieux reste d utiliser overflow pour FF
pour ie il faut mettre le flag hasLayout a true et la facon la plus transparente d y arriver est zoom:1


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 07-08-2008 à 09:44:17    

gebruik a écrit :

Un élément placé en float sort du flux de lecture et n'est pas pris en compte par l'élément parent dans le cas ou celui-ci n'auraient pas de dimension explicite.
Il convient donc de placer ce que l'on appelle un spacer, simple balise <div> contenant un espace insécable qui aura pour propriété clear:both en CSS.


 
Autant mettre un <hr /> alors...

Reply

Marsh Posté le 07-08-2008 à 10:13:47    

non autant foutre un contexte de formatage [:dawak]


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Sujets relatifs:

Leave a Replay

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