[Débutant HTML/CSS]Besoin d'aide pour débug et compréhension code

Besoin d'aide pour débug et compréhension code [Débutant HTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 29-08-2012 à 23:15:45    

Bonjour à tous,
 
Je rencontre un léger problème de compréhension de mon code. Le résultat semble donner ce que je souhaite mais la dernière partie de ma page d'accueil, cad le pied de page ne se trouve pas dans le bloc page. J'ai mis un fond pour le voir. J'ai bien le fond qui correspond au bloc page si je vire la partie <article id="divers_gauche"> en <article> simple mais du coup je n'arrive plus à avoir mes blocs les uns à côté des autres, ils sont ligne par ligne. Je capte surement mal un truc et il doit me manquer les bons réflexes.
 
Je rajoute, si je colle la commande de fond dans #divers_gauche, #divers_centre, #divers_droite, je me tretrouve de nouveau avec mes blocs à la ligne.  
Peut-être un problème de classe, d'id, de div, il ne me semble pas avoir intervertit des éléments dans le html ?
 
 
Merci d'avance
 
code HTML

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  5.         <link rel="stylesheet" href="style.css" />
  6.         <title>GeneRally HotLap Competition</title>
  7.     </head>
  9.     <body>
  10.         <div id="bloc_page">
  11.             <header>
  12.                 <div id="titre_principal">
  13.                     <img src="fonds/logo_GR.jpg" alt="Logo de Generally" id="logo" />
  14.                     <h1>GeneRally HotLap Competition</h1>
  15.                 </div>
  16.             </header>
  17.            
  18.             <div id="banniere_image">
  19.                 <div id="banniere_description">
  20.                     Organisation, règlements et résultats de compétitions de GeneRally
  21.                 </div>
  22.             </div>   
  24.   <div id="menu_nav">
  25.   <li><a href="#">Accueil</a></li>
  26.   <li><a href="#">Règles</a></li>
  27.   <li><a href="#">Type de course</a></li>
  28.   <li><a href="#">Compétitions</a>
  29.   <ul>
  30.   <li><a href="#">Compétition 01</a></li>
  31.   <li><a href="#">Compétition 02</a></li>
  32.   </ul>
  33.   </li>
  34.   <li><a href="#">Palmares</a></li>
  35.   <li><a href="#">Meilleurs temps</a></li>
  36.   </div>
  38.   <div id="section_1">
  39.     <article>
  40.      <h1>Circuit</h1>
  41.      <p align="justified">Lorem ipsum dolor sit amet...
  42.      Vivamus sed libero nec mauris pulvinar facilisis ut non sem...
  43.      Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
  44.     </article>
  45.   </div>
  47.   <div id="section_2">
  48.     <article>
  49.      <h1>Temps</h1>
  50.      <p>Lorem ipsum dolor sit amet...</p>
  51.      <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
  52.      <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
  53.     </article>
  54.   </div>
  56.   <div id="section_3">
  57.     <article>
  58.      <h1>Vidéo</h1>
  59.      <p>Lorem ipsum dolor sit amet...</p>
  60.      <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
  61.      <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
  62.     </article>
  63.   </div>
  65.   <div id="pied_page">
  66.     <article id="divers_gauche">
  67.      <h1>divers gauche</h1>
  68.      <p>Lorem ipsum dolor sit amet...</p>
  69.      <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
  70.      <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
  71.     </article>
  72.     <article id="divers_centre">
  73.      <h1>divers milieu</h1>
  74.      <p>Lorem ipsum dolor sit amet...</p>
  75.      <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
  76.      <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
  77.     </article>
  78.     <article id="divers_droite">
  79.      <h1>divers droite</h1>
  80.      <p>Lorem ipsum dolor sit amet...</p>
  81.      <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
  82.      <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
  83.     </article>
  84.   </div>
  86.         </div> <!-- fin du bloc page -->
  87.     </body>
  88. </html>


code CSS

Code :
  1. /* Eléments principaux de la page */
  2. body
  3. {
  4.     background: url('fonds/');
  5.     font-family: verdana, Arial, sans-serif;
  6.     color: #d4b440;
  7. }
  8. #bloc_page
  9. {
  10.     width: 1024px;
  11.     margin: auto;
  12. border-width: thin;
  13. border-style: solid;
  14. border-color: orange;
  16. background-color: #FFCC66;
  17. }
  19. /* Header */
  20. header
  21. {
  22.     /*background: url('images/separateur.png') repeat-x bottom;*/
  23. }
  24. #titre_principal
  25. {
  26.     display: inline-block;
  27. border-width: thin;
  28. border-style: solid;
  29. border-color: orange;
  30. }
  32. #logo,h1
  33. {
  34.     display: inline-block;
  35.     margin-bottom: 0px;
  36. }
  38. /* Bannière */
  39. #banniere_image
  40. {
  41.     margin-top: 15px;
  42.     height: 200px;
  43.     border-radius: 10px;
  44.     background: url('fonds/banniere.jpg') no-repeat;
  45.     position: relative;
  46.     box-shadow: 0px 4px 4px #1c1a19;
  47.     margin-bottom: 25px;
  48. }
  49. #banniere_description
  50. {
  51.     position: absolute;
  52.     bottom: 0;
  53.     border-radius: 0px 0px 5px 5px;
  54.     width: 100%;
  55.     height: 33px;
  56.     padding-top: 15px;
  57.     padding-left: 0px;
  58.     background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
  59.     background-color: rgba(24,24,24,0.8);
  60.     color: #d4b440;
  61.     font-size: 0.8em;
  62. }
  63. #menu_nav,li
  64. {
  65. display: inline-block;
  66.     margin-left: 10px;
  67. border-width: thin;
  68. border-style: solid;
  69. border-color: orange;
  70. }
  71. #section_1
  72. {
  73. width: 1024px;
  75. border-width: thin;
  76. border-style: solid;
  77. border-color: orange;
  79. }
  80. #section_2
  81. {
  82. width: 1024px;
  84. border-width: thin;
  85. border-style: solid;
  86. border-color: orange;
  87. }
  88. #section_3
  89. {
  90. width: 1024px;
  92. border-width: thin;
  93. border-style: solid;
  94. border-color: orange;
  95. }
  96. article
  97. {
  98. border-width: thin;
  99. border-style: solid;
  100. border-color: orange;
  101. }
  102. #pied_page
  103. {
  104. width: 1024px;
  106. border-width: thin;
  107. border-style: solid;
  108. border-color: orange;*/
  109. }
  110. #divers_gauche, #divers_centre, #divers_droite
  111. {
  112. border-width: thin;
  113. border-style: solid;
  114. border-color: green;
  116. width: 33%;
  118. position: relative;
  119. float:left
  120. }


Message édité par nico42000 le 29-08-2012 à 23:42:33
Reply

Marsh Posté le 29-08-2012 à 23:15:45   

Reply

Marsh Posté le 30-08-2012 à 00:34:46    

http://jsfiddle.net/5bn6U/
 
Des que tu "float" des éléments, il ne sont plus dans le flux, donc leur conteneur qui contient la couleur de fond ne les "contenait" plus.
 
prend un div avec un background:blue, et mets des divs à l'interieur et float:left sur ces divs en question. tu verras que ton div conteneur fait 0px car tes divs sortent du flux, il faut utiliser un clear:fix pour corriger ce détail


---------------
Blablaté par Harko
Reply

Marsh Posté le 31-08-2012 à 00:04:17    

Merci pour ta réponse, petit à petit, ca va finir par rentrer. C'est quand même un peu obscure cette affaire, je vais me pencher la-dessus. Y-a-t-il un autre moyen de faire ça, sans passer par du float ?
 
Sinon c'est marrant, j'ai eu utiliser jsfiddle, mais je me retrouvais avec des gros message d'erreur, mon ancien code devait déconner bien que le nav me l'affichait à peu près correctement. Ca sera plus rapide que notepad++, naviguer entre les onglets feuille css et html. Et pas encore attaquer le php ^^
 
En tout cas, ca fait bien plaisir de trouver de l'aide.

Reply

Sujets relatifs:

Leave a Replay

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