[Résolu][CSS] Souci avec un contenu variable

Souci avec un contenu variable [Résolu][CSS] - HTML/CSS - Programmation

Marsh Posté le 30-05-2005 à 14:09:19    

Bonjour,
Je cherche à mettre en place une page avec:
-un header fixe
-un menu à gauche fixe
-un contenu à droite du menu qui a une scrollabr si le contenu est trop important
Jusque là rien de compliqué, et pourtant, je n'y arrive pas  :sweat:  
 
J'ai fait un mix du modèle 13 et du 14 d'un tutoriel sur CSS afin que vous cerniez peut-être mieux mon souci et pour voir si ça marchait, j'obtiens:
 
cette page test dont le contenu ne s'affiche pas...
 
J'ai le header, le menu fixe,  le contenu avec la scrollbar comme je le souhaite mais aucun texte en contenu alors que la source elle n'est pas vide (clic droit+"afficher la source" sur la page test)
 
Il est où le bug ?  :??:
 
Merci de votre aide
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <title>Deux zones avec scroll en CSS</title>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. /* CSS issu des tutoriels css.alsacreations.com */
  8. html, body {
  9. height: 100%;
  10. width: 100%;
  11. overflow: auto;
  12. }
  13. body {
  14. font-family:Verdana, Arial, Helvetica, sans-serif;
  15. font-size: 0.8em;
  16. margin: 0;
  17. padding: 0;
  18. }
  19. #contenu {
  20. height: 80%;
  21. margin-left: 200px;
  22. margin: 0;
  23. padding: 0;
  24. overflow: auto;
  25. background-color:#9999CC;
  26. }
  27. #header {
  28. background-color: #99CCCC;
  29. width: 100%;
  30. height: 20%;
  31. }
  32. #menu {
  33. position: absolute;
  34. left:0;
  35. background-color: #99CCCC;
  36. width: 200px;
  37. height: 80%;
  38. }
  39. </style>
  40. </head>
  42. <body>
  44. <div id="header">ici le Header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>
  46. </div>
  48. <div id="menu">ici le Menu<br /> <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>
  51. </div>
  53. <div id="contenu">
  54. contenu<br />
  55. contenu<br />
  56. contenu<br />
  57. contenu<br />
  58. contenu<br />
  60. contenu<br />
  61. contenu<br />
  62. contenu<br />
  63. contenu<br />
  64. contenu<br />
  65. contenu<br />
  67. contenu<br />
  68. contenu<br />
  69. contenu<br />
  70. contenu<br />
  71. contenu<br />
  72. contenu<br />
  73. contenu<br />
  74. contenu<br />
  75. contenu<br />
  76. contenu<br />
  77. contenu<br />
  78. contenu<br />
  79. contenu<br />
  80. contenu<br />
  81. contenu<br />
  82. contenu<br />
  83. contenu<br />
  84. contenu<br />
  85. contenu<br />
  86. contenu<br />
  87. contenu<br />
  88. contenu<br />
  89. contenu<br />
  90. contenu<br />
  91. contenu<br />
  92. contenu<br />
  93. contenu<br />
  94. contenu<br />
  95. contenu<br />
  96. contenu<br />
  97. contenu<br />
  98. contenu<br />
  99. contenu<br />
  100. contenu<br />
  101. contenu<br />
  102. contenu<br />
  103. contenu<br />
  104. contenu<br />
  105. contenu<br />
  106. contenu<br />
  107. contenu<br />
  108. contenu<br />
  109. contenu<br />
  110. contenu<br />
  111. contenu<br />
  112. </div>
  114. </body>
  115. </html>


Message édité par Bobybx le 30-05-2005 à 16:08:10
Reply

Marsh Posté le 30-05-2005 à 14:09:19   

Reply

Marsh Posté le 30-05-2005 à 14:10:44    

Parce que sur le contenu, t'as un width de 100% + une marge à gauche de 200px -> catastrophe. Vire le width, garde juste la marge

Reply

Marsh Posté le 30-05-2005 à 14:21:14    

Je l'ai viré, et pourtant, ça ne marche toujours pas...

Reply

Marsh Posté le 30-05-2005 à 15:34:09    

On peut voir que sous le menu c'est la couleur du contenu, c'est normal ça?
Je suis largué là :(

Reply

Marsh Posté le 30-05-2005 à 16:08:28    

Reply

Sujets relatifs:

Leave a Replay

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