Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Problem z wydłużaniem div'a
Forum PHP.pl > Forum > Przedszkole
darth_sidious
18.02.2009, 21:56:39
Witajcie

Borykam sie z nastepujacym problemem. W PS podzielilem sobie ladnie grafike na div'y i wszystko wyszlo ok. Chcialbym jednak teraz, aby jedno z pol bylo dynamiczne i przystosowywalo sie do zawartosci, tzn w razie potrzeby wydluzalo sie. Przesuwac sie wtedy musial by rowniez div, ktory bylby pod blokiem z zawartoscia... I tu pojawil sie problem. Nijak nie potrafie uzyskac tego efektu przesuniecia sie nizszego diva w miare wypelnienia tego polozonego wyzej.

Kod styli:
[HTML] pobierz, plaintext 
  1. body {background-color:#FFFFFF; margin: 0;}
  2.  
  3. #wrapper {
  4. width: 900px;
  5. margin: 0 auto;
  6. }
  7. #Table_03 {
  8. 	position:absolute;
  9. 	width:900px;
  10. 	/*height:562px;*/
  11. }
  12.  
  13. #oferta-01 {
  14. 	position:absolute;
  15. 	left:0px;
  16. 	top:0px;
  17. 	width:72px;
  18. 	height:562px;
  19. 	background-color:#ffffff;
  20. }
  21.  
  22. #oferta-02 {
  23. 	position:absolute;
  24. 	left:72px;
  25. 	top:0px;
  26. 	width:360px;
  27. 	height:108px;
  28. 	background-image: url('images/index_02.gif');
  29. }
  30.  
  31. #oferta-03 {
  32. 	position:absolute;
  33. 	left:432px;
  34. 	top:0px;
  35. 	width:468px;
  36. 	height:57px;
  37. 	background-color:#ffffff;
  38. }
  39.  
  40. #oferta-04 {
  41. 	position:absolute;
  42. 	left:432px;
  43. 	top:57px;
  44. 	width:63px;
  45. 	height:51px;
  46. 	background-color:#ffffff;
  47. }
  48.  
  49. #oferta-05 {
  50. 	position:absolute;
  51. 	left:495px;
  52. 	top:57px;
  53. 	width:146px;
  54. 	height:51px;
  55. }
  56.  
  57. #oferta-06 {
  58. 	position:absolute;
  59. 	left:641px;
  60. 	top:57px;
  61. 	width:4px;
  62. 	height:51px;
  63. 	background-color:#ffffff;
  64. }
  65.  
  66. #oferta-07 {
  67. 	position:absolute;
  68. 	left:645px;
  69. 	top:57px;
  70. 	width:160px;
  71. 	height:51px;
  72. }
  73.  
  74. #oferta-08 {
  75. 	position:absolute;
  76. 	left:805px;
  77. 	top:57px;
  78. 	width:95px;
  79. 	height:90px;
  80. 	background-color:#ffffff;
  81. }
  82.  
  83. #oferta-09 {
  84. 	position:absolute;
  85. 	left:72px;
  86. 	top:108px;
  87. 	width:6px;
  88. 	height:454px;
  89. 	background-color:#ffffff;
  90. }
  91.  
  92. #oferta-10 {
  93. 	position:absolute;
  94. 	left:78px;
  95. 	top:108px;
  96. 	width:721px;
  97. 	height:39px;
  98. 	background-color:#9f9f9f;
  99. }
  100.  
  101. #oferta-11 {
  102. 	position:absolute;
  103. 	left:799px;
  104. 	top:108px;
  105. 	width:6px;
  106. 	height:39px;
  107. 	background-color:#ffffff;
  108. }
  109.  
  110. #oferta-12 {
  111. 	position:absolute;
  112. 	left:78px;
  113. 	top:147px;
  114. 	width:186px;
  115. 	height:415px;
  116. }
  117.  
  118. #oferta-13 {
  119. 	position:absolute;
  120. 	left:264px;
  121. 	top:147px;
  122. 	width:545px;
  123. 	height:59px;
  124. 	background-image: url('images/bg_13.gif');
  125. }
  126.  
  127. #oferta-14 {
  128. 	position:absolute;
  129. 	left:809px;
  130. 	top:147px;
  131. 	width:91px;
  132. 	height:415px;
  133. 	background-color:#ffffff;
  134. }
  135.  
  136. #oferta-15 {
  137. 	position:absolute;
  138. 	left:264px;
  139. 	top:206px;
  140. 	width:535px;
  141. 	/*height:356px;*/
  142. 	background-color:#ffffff;
  143.  	overflow:auto;
  144.         height:auto
  145. }
  146.  
  147. #oferta-16 {
  148. 	position:absolute;
  149. 	left:799px;
  150. 	top:206px;
  151. 	width:10px;
  152. 	height:323px;
  153. 	background-color:#ffffff;
  154. }
  155.  
  156. #oferta-17 {
  157. 	position:absolute;
  158. 	left:799px;
  159. 	top:529px;
  160. 	width:10px;
  161. 	height:33px;
  162. 	background-color:#ffffff;
  163. }
  164.  
  165. #oferta-18 {
  166. 	position:absolute;
  167. 	left:0px;
  168. 	top:562px;
  169. 	width:900px;
  170. 	height:55px;
  171. 	background-color:#0fffff;
  172. }
[HTML] pobierz, plaintext


Kod strony:
[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="wrapper">
  4. <div id="Table_03">
  5. 	<div id="oferta-01"></div>
  6. 	<div id="oferta-02"></div>
  7. 	<div id="oferta-03"></div>
  8. 	<div id="oferta-04"></div>
  9. 	<div id="oferta-05"></div>
  10. 	<div id="oferta-06"></div>
  11. 	<div id="oferta-07"></div>
  12. 	<div id="oferta-08"></div>
  13. 	<div id="oferta-09"></div>
  14. 	<div id="oferta-10"></div>
  15. 	<div id="oferta-11"></div>
  16. 	<div id="oferta-12"></div>
  17. 	<div id="oferta-13"></div>
  18. 	<div id="oferta-14"></div>
  19. 	<div id="oferta-15">
  20. 		TUTAJ MA BYĆ WŁAŚNIE TEN TEKST KTÓRY BĘDZIE RÓŻNEJ DŁUGOŚCI
  21. 	</div>
  22. 	<div id="oferta-16"></div>
  23. 	<div id="oferta-17"></div>
  24. 	<div id="oferta-18">
  25. 		A TO CHCIAŁBYM ABY SIĘ PRZESUWAŁO W DOŁ W MIARE WYDŁUŻANIA DIVA: oferta-15
  26. 	</div>
  27. </div>
  28. </div>
  29.  
  30. </body>
[HTML] pobierz, plaintext



Pozdrawiam
Darth
erix
18.02.2009, 21:58:37
Proszę o poprawę tematu; sam tag nie opisuje problemu. http://rtfm.killfile.pl

Cytat
bylby pod blokiem z zawartoscia... I tu pojawil sie problem. Nijak nie potrafie uzyskac tego efektu przesuniecia sie nizszego diva w miare wypelnienia tego polozonego wyzej.

Muszę Cię zmartwić - jedyne wyjście, to ręczne stworzenie kompletnego CSS-a. Photoshop generuje warstwy pozycjonowane absolutnie, więc najlepiej napisać wszystko od zera.
darth_sidious
18.02.2009, 22:04:15
Temat poprawiony...

OK... O zabieram sie wiec za dlubanie kodu ;-)
Dzieki za szybla odpowiedz.

Pozdrawiam
Darth
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.