Problème hauteur CSS

Problème hauteur CSS - HTML/CSS - Programmation

Marsh Posté le 31-12-2009 à 14:20:42    

Bonjour,
Je viens vers vous car je comprends mon problème ...
En effet, mon style "global" ne prend pas toute la hauteur de ma page ... mais seulement une centaines de pixels ... moi pas comprendre :( alors que sur un exemple que j'avais pris sur un autre site (cf cours Elephorm) j'ai tout pareil pourtant ... et ca marche avec eux ...
 
Ci-dessous un exemple illustré de mon problème :  
http://camelot-web.com/siteweb.jpg
 
Ci-dessous le code html et plus bas le css associé ...
 
HTML

Code :
  1. <body>
  2. <div id="global">
  3.    
  4.     <div id="entete">
  5.        
  6.         <p>EN TETE</p>
  7.        
  8.     </div><!-- #EN-TÊTE -->
  9.        
  10.     <div id="gauche">
  11.    
  12.         <p>MENU</p>
  13.        
  14.     </div><!-- #GAUCHE -->
  15.        
  16.     <div id="contenu">
  17.        
  18.         <div id="col1">
  19.            
  20.             <div class="cadre">
  21.                
  22.                 <p>IMAGE</p>
  23.                
  24.             </div><!-- #CADRE -->
  25.            
  26.             <div class="dossier">
  27.                
  28.                 <p>DOSSIERS</p>
  29.                
  30.             </div><!-- #DOSSIER -->
  31.            
  32.         </div><!-- #COL1 -->
  33.        
  34.         <div id="col2">
  35.            
  36.             <p>EDITO</p>
  37.            
  38.         </div><!-- #COL2 -->
  39.        
  40.     </div><!-- #CONTENU -->
  41.        
  42. </div><!-- #GLOBAL -->   
  43. </body>


CSS

Code :
  1. /* --- STRUCTURE GLOBALE --- */
  3. body {
  4. background-color: #FFFFFF;
  5. margin : 0;
  6. font-size: 80%;
  7. font-family: Arial, Helvetica, sans-serif;
  8. color: black;
  9. }
  10. #global {
  11. background-color:#FFFFFF;
  12. }
  13. a {
  14. color: #445879;
  15. }
  16. a:hover, a:focus {
  17. color: #000000;
  18. }
  20. /* --- EN-TETE --- */
  22. #entete {
  23. height : 110px;
  24. padding : 0 0 0 5px;
  25. background : url(img/bg-entete.png) gray;
  26. border-bottom : 1px solid #445879;
  27. border-top : 1px solid #445879;
  28. margin : 0;
  29. }
  31. #entete p {
  32. float : right;
  33. padding: 0 0 10px 0;
  34. margin:0;
  35. }
  37. /* --- MENU DE NAVIGATION --- */
  39. #gauche {
  40. width : 190px;
  41. margin : 5px;
  42. float: left;
  43. }
  45. /* --- BLOC DE CONTENU --- */
  47. /* Conteneur */
  49. #contenu {
  50. position: relative;
  51. margin : 5px 5px 5px 200px;
  52. padding : 4px;
  53. background-color : #ebecee;
  54. height : 1%;
  55. color: black;
  56. }
  57. #contenu h2 {
  58. font-family : Century Gothic;
  59. font-size : 1.3em;
  60. font-weight : normal;
  61. margin:0 0 10px 0;
  62. border-bottom : 1px dashed #445879;
  63. }
  65. #contenu p {
  66. margin:0;
  67. }
  69. #col1 {
  70. float : left;
  71. width : 400px;
  72. background-color : #FF00CC;
  73. }
  75. #col2 {
  76. float : right;
  77. width : 300px;
  78. background-color : #FFEE00;
  79. }


 
Merci de votre aide ... désole pas facile a expliquer j'espère que ce sera assez clair !

Reply

Marsh Posté le 31-12-2009 à 14:20:42   

Reply

Marsh Posté le 31-12-2009 à 14:26:07    

Tes cols sont en float : left ou right, elles ne sont donc pas dans le meme flux que leur conteneur contenu qui n'est pas flotant. En consequences, ton conteneur (contenu) n'est pas taille en fonction de la taille des cols mais de son contenu propre.

Reply

Marsh Posté le 31-12-2009 à 14:45:28    

Ok merci pour ton aide, mais ce que je n'explique pas c'est que dans le tutorial ci-dessous je vois que le conteneur n'a pas de float ...
 
HTML

Code :
  1. <div id="global">
  2.   <div id="contenu">
  3.     <div id="accueil-col1"> </div><!-- #accueil-col1 -->
  4.     <div id="accueil-col2"> </div><!-- #accueil-col2 -->
  5.   </div><!-- #contenu -->
  6. </div><!-- #global -->


 
CSS

Code :
  1. body {
  2. margin: 0;
  3. padding: 10px;
  4. font-size: 80%;
  5. font-family: Arial, Helvetica, sans-serif;
  6. color: white;
  7. background: #2D424F url(img/fond-page.png) repeat center top;
  8. }
  9. #global {
  10. width: 766px;
  11. margin-left: auto;
  12. margin-right: auto;
  13. }
  14. #contenu {
  15. position: relative;
  16. top: -6px;
  17. margin-left: 150px;
  18. color: black;
  19. }
  20. #accueil-col1 {
  21. float: left;
  22. width: 380px;
  23. }
  24. #accueil-col2 {
  25. float: right;
  26. width: 140px;
  27. padding: 20px 10px;
  28. background: #EFF3E0;
  29. }


 
Moi pas comprendre encore ;)

Reply

Marsh Posté le 31-12-2009 à 15:00:02    

Ben, il est mal fait ce montage, essaye le code suivant :

Code :
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. margin: 0;
  6. padding: 10px;
  7. font-size: 80%;
  8. font-family: Arial, Helvetica, sans-serif;
  9. color: white;
  10. background: #2D424F url(img/fond-page.png) repeat center top;
  11. }
  12. #global {
  13. width: 766px;
  14. margin-left: auto;
  15. margin-right: auto;
  16. background-color: yellow;
  17. border : solid 10px red;
  18. }
  19. #contenu {
  20. position: relative;
  21. top: -6px;
  22. margin-left: 150px;
  23. color: black;
  24. background-color: fushia;
  25. border : solid 10px green;
  26. }
  27. #accueil-col1 {
  28. float: left;
  29. width: 380px;
  30. background-color: pink;
  31. }
  32. #accueil-col2 {
  33. float: right;
  34. width: 140px;
  35. padding: 20px 10px;
  36. background: #EFF3E0;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div id="global">
  42.   <div id="contenu">
  43.     <div id="accueil-col1"> <p>Contenu qui tue accueil de la mort, ca dechire grave dans la banlieue</p></div><!-- #accueil-col1 -->
  44.     <div id="accueil-col2"> <p>Ca c'est la deuxieme colonne dont je ne suis pas peu fier !</p></div><!-- #accueil-col2 -->
  45.   </div><!-- #contenu -->
  46. </div><!-- #global -->
  47. </body>
  48. </html>


et tu constatera que beaucoup de choses ne sont ni taillees ni positionnees comme tu le crois. Dans ton cas, comme tu ajoute des divs dans un flux normal a tes flotants, ca ne m'etonne pas que ca donne des resultats complexes. A ta place, j'eviterai les flottants et positionnerai la taille de mes colonnes en mettant des marges fixes

Reply

Sujets relatifs:

Leave a Replay

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