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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème hauteur CSS

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème hauteur CSS

n°1954247
Odissine
Posté le 31-12-2009 à 14:20:42  profilanswer
 

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 !

mood
Publicité
Posté le 31-12-2009 à 14:20:42  profilanswer
 

n°1954249
fred777888​999
Posté le 31-12-2009 à 14:26:07  profilanswer
 

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.

n°1954253
Odissine
Posté le 31-12-2009 à 14:45:28  profilanswer
 

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 ;)

n°1954256
fred777888​999
Posté le 31-12-2009 à 15:00:02  profilanswer
 

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


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

  Problème hauteur CSS

 

Sujets relatifs
Doxygen (problème avec des noms de variable/de classe)Problème avec news pour site web
Probleme de compatibilite entre IE et FirefoxProbleme vidéo inséré sous Firefox
[C] probleme sprintf et pointeur :SProbleme url dans les sous dossiers
probleme avec fonction[CSS] Problème hauteur d'un bloc dans IE
[CSS] probleme hauteur de cadreCSS - Probleme de hauteur pour un div englobant
Plus de sujets relatifs à : Problème hauteur CSS

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