Se connecter / S'enregistrer
Votre question

Des div dans une div repeat-y

Tags :
  • Dtd
  • Programmation
Dernière réponse : dans Programmation
4 Avril 2009 21:36:41

Voilà j'ai fait toute une mise en page composée de plusieurs images qui sont elles-mêmes composée de 3 parties.
Donc j'ai une div dans laquelle je met mes 3 partie d'image dont celle qui se repeat-y.
Ensuite dans cette div repeat-y je veux mettre une div qui reprendra elle même 2 div, une qui se placera simplement et l'autre qui sera à son tour composée de 3 images. Ces 2 dernière div feront donc grandir la première qui repeat-y.

Pour mieux visualiser le "problème":

Voilà mon code html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "<a href="http://www.w3.org/TR/xhtml1/DT" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DT</a> DTD/xhtml1-strict.dtd">
  3. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr">
  4. <head>
  5. <title>Test</title>
  6. <meta http-equiv="content-type" content="text/html";
  7. charset=iso-8859-1" />
  8. <link rel="stylesheet" media="screen" type="text/css" title="css.css" href="css.css" />
  9. </head>
  10. <html>
  11. <body> <div id="fond">
  12. <div id="fond_haut"></div>
  13. <div id="fond_centre">
  14. <div id="conteneur_haut"></div>
  15. <div id="conteneur_centre">
  16. <div id="news">
  17. <div id="news_haut"></div>
  18. <div id="news_centre">
  19. <div class="text_news">
  20. bla bla bla bla bla bla bla bla bla bla <br/>
  21. bla bla bla bla bla bla bla bla bla bla <br/>
  22. bla bla bla bla
  23. </div>
  24. </div>
  25. <div id="news_bas"></div>
  26. </div>
  27. <div class="text_conteneur">
  28. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
  29. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
  30. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
  31. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
  32. </div>
  33. </div>
  34. <div id="conteneur_bas"></div>
  35. </div>
  36. <div id="fond_bas"></div>
  37. </div>
  38. <div id="pied">
  39.  
  40. </body>
  41. </html>


Et voici mon code CSS

  1. /*//////////////body////////////////*/
  2. body{
  3. background-color:#4e3822;
  4. font-size:20px;
  5. }
  6. #fond{/*border:3px solid green;*/
  7. position:absolute;
  8. width:1028px;
  9. left:50%;
  10. margin-left:-512px;
  11. }
  12. #fond_haut{/*border:1px solid red;*/
  13. background:url("images/fond_haut.png");
  14. width:1024px;
  15. height:272px;
  16. }
  17. #fond_centre{/*border:1px solid black;*/
  18. background:url("images/fond_centre.png") repeat-y;
  19. width:1024px;
  20. }
  21. #fond_bas{/*border:1px solid yellow;*/
  22. background:url("images/fond_bas.png");
  23. width:1024px;
  24. height:38px;
  25. }
  26. /******************************************/
  27. /*///////////conteneur///////////////*/
  28.  
  29. #conteneur_haut{
  30. background:url("images/conteneur_haut.png");
  31. margin:auto;
  32. width:947px;
  33. height:56px;
  34. }
  35. #conteneur_centre{border:1px solid yellow;
  36. background:url("images/conteneur_centre.png")repeat-y; C'est cette div qui coince "jaune
  37. margin:auto;
  38. width:917px;
  39. }
  40. .text_conteneur{border:1px solid green; C'est cette div qui coince "verte"
  41. color:#d1ae6b;
  42. width:460px;
  43. }
  44. #conteneur_bas{
  45. background:url("images/conteneur_bas.png");
  46. margin:auto;
  47. width:916px;
  48. height:20px;
  49. }
  50. .separation_conteneur{
  51. background:url("images/separation_conteneur.png");
  52. width:543px;
  53. height:49px;
  54. }
  55. /*****************************************/
  56. /*///////////news///////////////////////*/
  57. #news{border:1px solid red;
  58. position:absolute; C'est cette div qui coince "rouge"
  59. margin-top:360px;
  60. width:355px;
  61. }
  62. #news_haut{
  63. background:url("images/bloc_haut.png");
  64. width:335px;
  65. height:68px;
  66. }
  67. .titre_news{
  68. font-size:21px;
  69. width: 249px;
  70. color:#382717;
  71. font-weight:bold;
  72. text-align:center;
  73. }
  74. #news_centre{border:1px solid blue;
  75. background:url("images/bloc_centre.png")repeat-y;
  76. margin-left:45px;
  77. width:259px;
  78. }
  79.  
  80. .text_news{
  81. width: 237px;
  82. color:#382717;
  83. padding:0 0 0 10px;
  84. }
  85. #news_bas{
  86. background:url("images/bloc_bas.png");
  87. margin-left:18px;
  88. width:335px;
  89. height:70px;
  90. }
  91. /*******************************************/
  92. /*////////////pied///////////////////////*/
  93. #pied
  94. /******************************************/



En fait dans ma div "jaune" qui est ma div repeat-y doit rentrer ma div "verte" à gauche et ma div "rouge" à droite
Mon problème est de pouvoir les mettre l'une à coté de l'autre et que je dois pouvoir faire descendre mon repeat-y aussi bien avec la div "verte" qu'avec la div "rouge"

j'ai testé des positions absolute, fixed, relative avec ou sans float gauche ou droit, des margin negatif etc...enfin bref pas moyen de faire ce que je veux :-(
en temps normale pas de soucis.....mais là .....galère ! peut-être à cause des div à div avec repeat-y, ou des fermetures de div pas bien placées, je ne sais pas mais pffff c'est lourd

Autres pages sur : div div repeat

5 Avril 2009 04:53:17

Peux-tu nous donner le lien de ta page, pour que l'on puisse y voir un peu plus clair? Merci!
5 Avril 2009 15:00:52

désolée mais ce "travail" n'est en ligne ...
Contenus similaires
Pas de réponse à votre question ? Demandez !
5 Avril 2009 17:12:58

Bah, tu le mets en lignes ^^

Utilise free ou un autre hebergeur gratuit, comme e-monsite!
5 Avril 2009 17:35:38

Ou au moins un screen, parce qu'à l'aveugle comme ça c'est pas évident
5 Avril 2009 18:14:19

Je ne vois pas comment mettre un screen, apparement on ne peut poster que des lien url internet :( 
Je vais voir si je peux mettre en ligne mais e-monsite c'est pas ce que je chercher, il faut tout créer de chez eux apparement...et ici le but c'est de créer moi même :)  mais si je trouve quelque chose où je peut mettre mes images et mes doc html et css pour mettre en ligne je vous tiens au courant :-)
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS