Tom's Guide > Forum > Programmation > Des div dans une div repeat-y

Des div dans une div repeat-y

Forum Programmation : Des div dans une div repeat-y

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
caliche   04-04-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

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DT DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" 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">
  40. </body>
  41. </html>



Et voici mon code CSS

Code :
  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///////////////*/
  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. }
  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


Message édité par caliche le 04-04-2009 à 21:38:27
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Tybbow   05-04-2009 à 04:53:17
- 0 +

Peux-tu nous donner le lien de ta page, pour que l'on puisse y voir un peu plus clair? Merci!

------------------------------ En Restaurant, le coeur de breizh
 Répondre à Tybbow
caliche   05-04-2009 à 15:00:52
- 0 +

désolée mais ce "travail" n'est en ligne ...

Répondre à caliche
Tybbow   05-04-2009 à 17:12:58
- 0 +

Bah, tu le mets en lignes ^^

Utilise free ou un autre hebergeur gratuit, comme e-monsite!

------------------------------ En Restaurant, le coeur de breizh
 Répondre à Tybbow
still31   05-04-2009 à 17:35:38
- 0 +

Ou au moins un screen, parce qu'à l'aveugle comme ça c'est pas évident

Répondre à still31
caliche   05-04-2009 à 18:14:19
- 0 +

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


Message édité par caliche le 05-04-2009 à 18:30:10
Répondre à caliche
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Des div dans une div repeat-y
Aller à :

Il y a 495 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,489 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens