Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Automatyczne rozciąganie strony
Forum PHP.pl > Forum > Przedszkole
meehow18
10.01.2010, 20:07:48
Witam,
chciałbym zapytać jak zrobić aby strona się rozszerzała od ilości tekstu.
Mam na stronie
Dla każdego banerka zrobiłem 2 divy obrazek i niżej div odpowiedzialny za border i text.
I nie chce ustawiać na sztywno wysokości, ponieważ nie każda podstrona będzie miała taką samą ilość tekstu.

Pomoże mi ktoś?
kosmowariat
10.01.2010, 20:20:00
nie ustawiaj wogóle wysokości, divy rozciągną się same
Blame
10.01.2010, 20:20:56
Jeśli chodzi ci o wysokość to cyku kliku i prosze: http://www.google.pl/search?source=ig&...mp;aq=f&oq=

Edit:@kosmowariat
Świetne rozwiązanie, szczególnie że każdy div będzie innej wysokości. czarodziej.gif
meehow18
10.01.2010, 20:37:10
Właśnie szukałem w Google

Jak wsadzę dużo tekstu w statisc to zakryje mi pozycje Advertisement i ta pozycja nie zostanie przesunięta w dół ;/


[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Dokument bez tytułu</title>
  6. <link rel="stylesheet" type="text/css" href="css.css" media="screen" />
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="logo"></div>
  12. <div id="conntent"></div>
  13.  
  14. <div id="menu"></div>
  15. <div id="menu1"></div>
  16.  
  17. <div id="news"><br><br><Br></div>
  18. <div id="news1"></div>
  19. <div id="statisc"><br><br><br><br><br><br><br><br><br><br></div>
  20. <div id="statisc1"></div>
  21. <div id="reklama"></div>
  22. <div id="reklama1"></div>
  23.  
  24.  
  25. </body>
  26. </html>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body {
  5. width: 1400px;
  6. height: auto;
  7. margin:0;
  8. background:url(images/rr_01.png) repeat;
  9. }
  10.  
  11. #logo {
  12. 	width:701px;
  13. 	height: 176px;
  14. 	left: 346px;
  15. 	top:0;
  16. 	background:url(images/logo.png) no-repeat;
  17. 	position: absolute;
  18. }
  19.  
  20. #conntent{
  21. 	margin:0 auto;
  22. 	border:#bfbfbf 1px solid;
  23. 	width:1314px;
  24. 	height:auto;
  25. 	left:78px;
  26. 	right:85px;
  27.  
  28. 	top:176px;
  29. 	position: absolute;
  30. 	background:#fff5d6;
  31.  
  32. }
  33. #menu {
  34. 	border:#bfbfbf 1px solid;
  35. 	width:242px;
  36. 	left:105px;
  37. 	top:235px;
  38. 	position: absolute;
  39. 	background:#fff5d6;
  40. 	height: 52px;
  41. 	float:left;
  42.  
  43. }
  44. #menu1 {
  45. 	width:242px;
  46. 	height:45px;
  47. 	border:#ded2a9 1px solid;
  48. 	background:url(images/menu.png) no-repeat;
  49. 	position: absolute;
  50. 	left:105px;
  51. 	top:188px;
  52. }
  53.  
  54. #news {
  55. 	border:#bfbfbf 1px solid;
  56. 	width:546px;
  57. 	left:413px;
  58. 	top:235px;
  59. 	position: absolute;
  60. 	background:#fff5d6;
  61.  
  62. 	float:left;
  63.  
  64. }
  65. #news1 {
  66. 	width:546px;
  67. 	height:45px;
  68. 	border:#ded2a9 1px solid;
  69. 	background:url(images/news.png) no-repeat;
  70. 	position: absolute;
  71. 	left:413px;
  72. 	top:188px;
  73. }
  74.  
  75. #statisc {
  76. 	border:#bfbfbf 1px solid;
  77. 	width:286px;
  78. 	left:999px;
  79. 	top:235px;
  80. 	position: absolute;
  81. 	background:#fff5d6;
  82.  
  83. 	float:left;
  84.  
  85. }
  86. #statisc1 {
  87. 	width:286px;
  88. 	height:45px;
  89. 	border:#ded2a9 1px solid;
  90. 	background:url(images/statisc.png) no-repeat;
  91. 	position: absolute;
  92. 	left:999px;
  93. 	top:188px;
  94. }
  95.  
  96.  
  97.  
  98. #reklama {
  99. 	border:#bfbfbf 1px solid;
  100. 	width:286px;
  101. 	left:999px;
  102. 	top:391px;
  103. 	position: absolute;
  104. 	background:#fff5d6;
  105.  
  106. 	float:left;
  107.  
  108. }
  109. #reklama1 {
  110. 	width:286px;
  111. 	height:45px;
  112. 	border:#ded2a9 1px solid;
  113. 	background:url(images/reklama.png) no-repeat;
  114. 	position: absolute;
  115. 	left:999px;
  116. 	top:346px;
  117. }
  118.  
[CSS] pobierz, plaintext
Blame
10.01.2010, 21:25:15
Najpierw ustawiasz blokowi stałą wysokość a potem się dziwisz, że tekst ci wyjeżdża. Powiem ci tak: ustaw tym blokom, które się powiększają height na 100%. A żeby pozostałe kolumny(chodzi i o główne trzy: lewą, prawą i środkową) dopasowywały się do tej najwyższej możesz zastosować jeden z kilku przykładów zamieszczonych tutaj: http://vivee.info/2008/01/10/kolumny-rowne...-za-pomoca-css/ . Pooglądaj sobie dema, popatrz co i jak.
Albert1984
10.01.2010, 23:17:54
Wszędzie dałeś 
[HTML] pobierz, plaintext 
  1. position: absolute;
[HTML] pobierz, plaintext
i ustawiłeś na sztywno miejsce w stosunku do bloku obejmującego,
to się nie dziw, że div najeżdza ci na kolejny div. Poczytaj trochę o stylach, np polecam kurs
http://www.kurshtml.boo.pl/css/index.html.
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.