Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Rozciągnięcie tła
Forum PHP.pl > Forum > Przedszkole
blejdas
Żeby zobrazować temat wink.gif Mam taki oto układ strony:




Czarne to tło które chce rozciągnąć wink.gif Czerwone stopka, na białe to tło zdefiniowane jako BODY w css. Więc czarne jest NA nim wink.gif Teraz kiedy na białym wpiszę tekst, to jak zmusić czarne tło do rozciągnięcia się?

Bałe to wstazka smile.gif obrazek tła czarnego to page_bg. kiedy wrzucam tam
  1. <br>
tło się zrozciąga. Jak to zrobic by działo się to automatycznie?

CSS:
  1. body {
  2. background-image:url(../images/bg.jpg);
  3. background-color: #000;
  4. margin: 0px;
  5. }
  6. a.thickbox:link, a.thickbox:visited {
  7. color: #fff;
  8. text-decoration: none;
  9. }
  10. a.thickbox:hover {
  11. color: #fff;
  12. text-decoration: underline;
  13. }
  14. a.white:link, a.white:visited {
  15. color: #fff;
  16. text-decoration: none;
  17. }
  18. a.white:hover {
  19. color: #fff;
  20. text-decoration: underline;
  21. }
  22. div {
  23. font-family: tahoma;
  24. font-size: 12px;
  25. color: #fff;
  26. }
  27. .zloty {
  28. color: #f4d061;
  29. }
  30. .zielony {
  31. color: #aee000;
  32. }
  33. .czerwony {
  34. color: #ff2d2d;
  35. font-size: 18px;
  36. font-weight: bold;
  37. text-align: center;
  38. }
  39. .niebieski {
  40. color: #00a0d5;
  41. }
  42. #przerwa {
  43. padding-left: 30px;
  44. }
  45. #przerwa2 {
  46. padding-left: 30px;
  47. }
  48. #logo {
  49. background-image: url(../images/logo.jpg);
  50. width: 501px;
  51. height: 153px;
  52. display: block;
  53. padding: 15px;
  54. }
  55. #menu_dzisiaj {
  56. background-image: url(../images/menu_dzisiaj.jpg);
  57. padding-left: 40px;
  58. width: 491px;
  59. height: 214px;
  60. }
  61. #page_bg {
  62. background-image: url(../images/page_bg.jpg);
  63. background-repeat: repeat-y;
  64. width: 531px;
  65. float: left;
  66. }
  67. ol
  68. {
  69. list-style-type: 1;
  70. padding-left: 15px;
  71. }
  72. ol li span {
  73. float: left;
  74. width: 400px;
  75. }
  76. ol li span.span2 {
  77. float: left;
  78. width: 365px;
  79. }
  80. #wstazka {
  81. padding-top: 80px;
  82. padding-left: 25px;
  83. }
  84. #menu {
  85. float: left;
  86. clear: both;
  87. }
  88. #menu_reszta {
  89. background-image:url(../images/menu.png);
  90. width: 164px;
  91. height: 46px;
  92. position: absolute;
  93. clear: both;
  94. }
  95. p {
  96. height: 0px;
  97. line-height: 0px;
  98. }
  99. #terminarz {
  100. background: rgba(0, 0, 0, 0.6);
  101. border-color: #f4d061;
  102. border:1px dashed;
  103. padding-left: 10px;
  104. padding-top: 10px;
  105. }
  106. #top_bg {
  107. padding-top: 15px;
  108. text-align: center;
  109. }
  110. #stopka {
  111. background-image:url(../images/stopka.jpg);
  112. width: 461px;
  113. height: 66px;
  114. padding-left: 70px;
  115. padding-top: 27px;
  116. }
  117. .tekst {
  118. background-image:url(../images/tekst.png);
  119. width: 120px;
  120. height: 17px;
  121. padding-left: 3px;
  122. padding-right: 3px;
  123. font-family: tahoma;
  124. font-size: 9px;
  125. color: #fff;
  126. border: 0px;
  127. }
  128. .zapisz {
  129. background-image:url(../images/zapisz.jpg);
  130. width: 60px;
  131. height: 19px;
  132. padding-left: 3px;
  133. padding-right: 3px;
  134. padding-bottom: 2px;
  135. font-family: tahoma;
  136. font-size: 9px;
  137. color: #fff;
  138. border: 0px;
  139. }
  140. .g-plusone {
  141. color: #fff;
  142. }
  143. #backtotop {
  144. position: fixed;
  145. right: 0px;
  146. bottom: 0px;
  147. }


DIVy:
  1. <div style="float: left;">
  2. <a id="logo">
  3. </a>
  4. <div id="menu_dzisiaj" style="text-shadow: #000 1px 1px 1px;">
  5. <span class="czerwony">              !!PROMOCJA!!</span><br>
  6. <br/>
  7. <div style="padding-left: 10px;">
  8. <?php
  9. while ($promo = mysql_fetch_row($wynikp))
  10. {
  11. echo "$promo[0]";
  12. }
  13. ?>
  14. </div>
  15. </div>
  16.  
  17. <div id="stopka">
  18. Tekst Stopki
  19. </div>
  20. <div id="page_bg"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  21. </div>
  22. </div>
  23. </div>
  24. <div id="wstazka">
  25. <?php
  26. while ($danied = mysql_fetch_row($wynikd))
  27. {
  28. echo "$danied[0]";
  29. }
  30. ?>
  31. </div>
  32. </div>
!*!
Przecież rozciąga się automatycznie. http://jsfiddle.net/wgsjY/ wrzuć to swoje też do tego serwisu i pokaż.

Możesz dać overflow:auto dla elementu rozciąganego, lub br z clear:both;
blejdas
Chyba mnie nie do konca zrozumiałeś smile.gif Czarne ma się rozciągać razem z białym, a teraz gdy tekst jest na tyle długi że nie mieści się w stronie, to czarne się nie rozciąga, a tekst zamiast trzymać się prawej strony, pojawia się POD lewą(czarną) stroną.

Jeżeli na białym tekst robi się dlugi, to czarne tło rozciaga się razem z nim żeby nie pozwolić na przeskoczenie tekstu na dół.

Tak sie robi...


proboje zrobic tak smile.gif

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.