Se connecter avec
S'enregistrer | Connectez-vous

Des div dans une div repeat-y

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte

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 :-)
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde