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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1746746
Clys
Posté le 15-06-2008 à 14:34:51  profilanswer
 

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
mood
Publicité
Posté le 15-06-2008 à 14:34:51  profilanswer
 

n°1746857
mIRROR
Chevreuillobolchévik
Posté le 16-06-2008 à 02:44:34  profilanswer
 

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

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

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

 

Sujets relatifs
Problêmes de jointure entre 3 tables[CSS] sortir du flux pour positionner un div en haut de la page
debordement sur un DIVProbleme CSS entre FF et IE
Problème de position de <DIV>Probleme de changement de fond d'écrans avec CSS
Compatibilité CSS Firefox-IECherche quelqun calé en PHP CSS etc...
[SDL] problèmes chargement d'imagesCSS + Joomla = problème d'espacement
Plus de sujets relatifs à : Div et CSS.... : Problèmes de longueurs

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.064 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR