Div et CSS.... : Problèmes de longueurs

Div et CSS.... : Problèmes de longueurs - HTML/CSS - Programmation

Marsh Posté le 15-06-2008 à 14:34:51    

Bonjour à vous, je viens de commencer a me plonger dans le css pour les balises div et en effet je dois vous avouer que ce système me plait beaucoup. J'ai réussi a faire marcher 90% du design, cependant, j'ai sur la droite et sur la gauche deux petites images qui doivent s'étirer pour suivre la longueur du site (bg_barregauche & bg_barredroite, que vous verrez dans le code). Mon probleme est que je ne vois meme pas ces images et donc j'ai un gros "trou" dans mon design.
En gros, j'ai ma div pour mon header, deux div intermédiaires et celle du footer. Dans les div intermédiaires, j'ai d'autres div de taille fixe, et j'aimerai que la dernière, que j'ai réglée avec un "height:100%;" ou "height:auto;" s'affiche pour ne plus avoir de trou dans mon design. (exemple du probleme en images : http://urbangarden.fr/perso/souci.JPG).
 
En espérant que quelqu'un identifie mon souci au premier coup d'oeil, je vous poste également mon code.
Bonne journée et merci d'avance a quiconque me donnera un coup de main :)
 
INDEX.PHP

Code :
  1. <head>
  2. <title>Urban Garden vous souhaite une bonne visite</title>
  3. <link rel="stylesheet" type="text/css" href="style_div.css">
  4. </head>
  5. <body>
  6. <div id="bandeau"><img src="img/bandeau.png" width="932" height="219"></div>
  7. <div id="contenu">
  8. <div id="zonegauche">
  9.  <div id="menuhaut"></div>
  10.  <div id="menumur"></div>
  11.  <div id="menumurpic"></div>
  12.  <div id="menutab"></div>
  13.  <div id="menutabpic"></div>
  14.  <div id="bg_barregauche"></div>
  15. </div>
  16. <div id="zonedroithaut">
  17.  <div id="bout_acceuil"><img src="img/bout_accueil.png" width="125" height="41"></div>
  18.  <div id="bout_real"><img src="img/bout_real.png" width="100" height="41"></div>
  19.  <div id="bout_bienetre"><img src="img/bout_bienetre.png" width="100" height="41"></div>
  20.  <div id="bout_contact"><img src="img/bout_contact.png" width="115" height="41"></div>
  21.  <div id="bout_end"></div>
  22. </div>
  23. <div id="zonedroit">
  24.   <div id="text">
  25.    <div id="pic"></div> 
  26.        <?php include('www/acceuil.php'); ?> 
  27.   </div>
  28.  <div id="barredroite"></div>
  29.  <div id="bg_barredroite"></div>
  30. </div>
  31. <div id="piedpage"></div>
  32. </div>
  33. </body>
  34. </html>


 
STYLE_DIV.CSS

Code :
  1. body {
  2. margin-left: 0px;
  3. margin-top: 0px;
  4. margin-right: 0px;
  5. margin-bottom: 0px;
  6. background-image: url("img/bg.png" );
  7. }
  8. div {
  9. margin-left: auto;
  10. margin-right: auto;
  11. text-align:left;
  12. }
  13. div#bandeau {
  14. width:932px;
  15. height:219px;
  16. background-image: url("img/bg2.png" );
  17. }
  18. div#contenu { /* Div contenant toute la patie inf. du site */
  19. width:932px;
  20. height:auto;
  21. background-image: url("img/bg2.png" );
  22. }
  23. div#piedpage {
  24. width:932px;
  25. height:43px;
  26. background-image: url("img/piedpage.png" );
  27. clear:both;
  28. margin-bottom:0;
  29. }
  30. div#menuhaut {
  31. margin-left: 0;
  32. width:216px;
  33. height:136px;
  34. background-image: url("img/menuhaut.png" );
  35. }
  36. div#menumur {
  37. margin-left: 0;
  38. width:216px;
  39. height:55px;
  40. background-image: url("img/menumur.png" );
  41. }
  42. div#menumurpic {
  43. margin-left: 0;
  44. width:216px;
  45. height:200px;
  46. background-image: url("img/menumurpic.png" );
  47. }
  48. div#menutab {
  49. margin-left: 0;
  50. width:216px;
  51. height:50px;
  52. background-image: url("img/menutab.png" );
  53. }
  54. div#menutabpic {
  55. margin-left: 0;
  56. width:216px;
  57. height:200px;
  58. background-image: url("img/menutabpic.png" );
  59. }
  60. div#bg_barregauche {
  61. margin-left: 0;
  62. width:24px;
  63. height:auto;
  64. background-image: url("img/bg_barregauche.png" );
  65. }
  66. div#zonegauche {
  67. float:left;
  68. width:216px;
  69. height:100%;
  70. }
  71. div#zonedroithaut {
  72. float:right;
  73. width:716px;
  74. height:41px;
  75. }
  76. div#zonedroit {
  77. float:right;
  78. width:716px;
  79. }
  80. div#bout_acceuil {
  81. float:left;
  82. width:125px;
  83. height:41px;
  84. }
  85. div#bout_real {
  86. float:left;
  87. width:100px;
  88. height:41px;
  89. }
  90. div#bout_bienetre {
  91. float:left;
  92. width:100px;
  93. height:41px;
  94. }
  95. div#bout_contact {
  96. float:left;
  97. width:115px;
  98. height:41px;
  99. }
  100. div#bout_end {
  101. float:left;
  102. width:276px;
  103. height:41px;
  104. background-image: url("img/bout_end.png" );
  105. }
  106. div#picdte {
  107. float:right;
  108. width:276px;
  109. height:261px;
  110. background-image: url("img/picdte.png" );
  111. }
  112. div#barredroite {
  113. float:right;
  114. width:51px;
  115. height:350px;
  116. background-image: url("img/barredroite.png" );
  117. }
  118. div#bg_barredroite {
  119. margin-top:350px;
  120. margin-right:0;
  121. width:51px;
  122. height:auto;
  123. background-image: url("img/bg_barredroite.png" );
  124. }
  125. div#text {
  126. float:left;
  127. margin-left:10px;
  128. width:654px;
  129. height:auto;
  130. background-color:#282828;
  131. border-left:1px solid #97C000;
  132. border-bottom:1px solid #97C000;
  133. }
  134. div#pic {
  135. float:right;
  136. width:225px;
  137. height:220px;
  138. background-image:url("img/pic.png" );
  139. }


Message édité par Clys le 15-06-2008 à 14:49:15
Reply

Marsh Posté le 15-06-2008 à 14:34:51   

Reply

Marsh Posté le 16-06-2008 à 02:44:34    

oh putain la mise en page ca va etre galere :D
le probleme c ets que le nom de tes images ne me dit rien
 
pour commencer, pas besoin de creer des #barredroiteenlonglargetravers
c est du gachis de place dans ton html
tu te rends bien compte que si tu dois mettre des div vides c ets qu il y a un probleme
ca donne trop de contraintes a ta structure et tu perds d un coup tout l interet des css
 
voila comment j aurais fait:
tu retires la largeur fixe de #bandeau #contenu et #piedpage
tu la fous sur ton body
c est aussi le body qui doit avoir en background le fond hachuré
la barre qui manque a gauche doit etre le background de #contenu
et celle qui manque a droite doit etre le background de ta zone de texte
 
en faisant comme ca les deux s etireront comme il faut a chaque fois
y aura des retouches a faire pour mieux coincider avec ton design mais l essentiel est la et tu pourras soulever ici les problemes qui ne manqueront pas d apparaitre :D
 
quelques remarques additionnelles en vrac:
comme je te l ai deja les divs vides c est mal
par exemple ton menu risque de te poser de graves problemes de referencement
il faut que tu y mettes dedans le texte decrit par tes boutons sinon les crawlers ne pourront pas indexer ton site
pareil pour #barredroite et #bg_barredroite
tu devrais deja avoir assez de divs dans ta structure pour realiser ce dont tu as besoin
 
pour le reste on verra plus tard


---------------
« 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