Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS] Rozciągnięcie tła contentu
Forum PHP.pl > Forum > Przedszkole
arek33
21.07.2009, 12:04:15
Moja strona wizualnie wygląda tak:



Jak rozciągnąć granatowe tło na całą stronę w osi Y tak, aby było niezależne od długości tekstu ?

Plik CSS:
[HTML] pobierz, plaintext 
  1. html, body { margin-top: 0; margin-bottom: 0; font-family: verdana, arial; color: #fff; background: #333; font-size: 12px; }
  2. img { border: 0px; }
  3. a img{ border: 0px; }
  4. a:link, a:visited, a:hover, a:active { color: white; }
  5.  
  6. p { text-align: justify; padding-left: 20px; padding-right: 20px; }
  7.  
  8. #content { margin: 0px; width: 900px; background: #030c11; }
  9.  
  10.  
  11. .tj { text-align: justify; }
  12. .tc { text-align: center; }
  13.  
  14. .f10 { font-size: 10px; }
  15. .f11 { font-size: 11px; }
  16. .f12 { font-size: 12px; }
  17. .f13 { font-size: 13px; }
  18. .f14 { font-size: 14px; }
  19.  
  20. .pt30 { padding-top: 30px; }
  21. .pt20 { padding-top: 20px; }
  22. .pb30 { padding-bottom: 30px; }
  23. .pl10 { padding-left: 10px; }
  24. .pr10 { padding-right: 10px; }
  25. .pl20 { padding-left: 20px; }
  26. .pr20 { padding-right: 20px; }
  27. .pb0 { padding-bottom: 0px; }
  28. .pb10 { padding-bottom: 10px; }
  29. .pb3 { padding-bottom: 3px; }
  30.  
  31. .w450 { width: 450px; }
[HTML] pobierz, plaintext


Próbowałem już w klasie #content ustawiać height na 100%, auto, itp. ale nie pomagało. Ma ktoś może jakiś pomysł ?
muniekw
21.07.2009, 12:26:21
Użyj
Kod
min-height: jakaś_wartość;
wookieb
21.07.2009, 12:35:03
Kod
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}

#twoj_div_ktorego_chcesz_rozciagnac
{
height: 100%;
}
arek33
21.07.2009, 12:38:38
@muniekw: takie coś mnie nie urządza, bo ludzie, którzy wchodzą na stronę mają różne rozdzielczości monitorów. Jak ustawie u siebie wartość 1000px to będzie ok, a u innych uaktywni się niepotrzebnie pasek przewijania góra-dół.

@wookieb:
Cytat(arek33 @ 21.07.2009, 13:04:15 ) *
Próbowałem już w klasie #content ustawiać height na 100%, auto, itp. ale nie pomagało.
wookieb
21.07.2009, 12:39:48
Podam ci kod prezentujący koniecznosc twojego postępowania w tej sytuacji
Kod
while(!sprobuj_wstawic_to_o_czym_mowie())
{
przeczytaj_jeszcze_raz();
}

pytaj_na_forum();


I tak do czasu kiedy otrzymasz EXECUTION TIMEOUT (czyt. nie masz już na to cierpliwości)

Cytat
klasie #content

Elemencie o ID content
muniekw
21.07.2009, 12:53:51
@wookieb ma rację snitch.gif Jak ustawisz sobie w sekcji html, body height na 100% i później przypiszesz dla danego div-a jakąś wartość to zadziała winksmiley.jpg
arek33
21.07.2009, 13:56:56
Robiłem tak już. Ustawiałem height 100% w html, body oraz #content, ale niewiele to zmienia. Dodaje jakieś 10px pod ostatnia linijką tekstu. Poniżej obrazek - można porównać do wcześniejszego, który wkleiłem.

wookieb
21.07.2009, 14:06:40
A o padding i margin to kto bedzie pamiętał?
Przecież ci jasno napisałem SPRAWDZ! a dopiero potem gadaj.
Nie po to podałem padding i margin zebys wstawił tylko height: 100%;

Jak poprawisz to DAJ LINK DO STRONY to zobaczymy jak to wygląda.
arek33
21.07.2009, 14:19:54
Tak też zrobiłem. margin, padding mają wartość 0px. #content { height: 100%; }

Plik CSS:
[HTML] pobierz, plaintext 
  1. html, body { margin: 0px; padding: 0px; font-family: verdana, arial; color: #fff; background: #333; font-size: 12px; }
  2. img { border: 0px; }
  3. a img{ border: 0px; }
  4. a:link, a:visited, a:hover, a:active { color: white; }
  5.  
  6. p { text-align: justify; padding-left: 20px; padding-right: 20px; }
  7.  
  8. #content { margin: 0px; width: 900px; height: 100%; background: #030c11; }
  9.  
  10.  
  11. .tj { text-align: justify; }
  12. .tc { text-align: center; }
  13.  
  14. .f10 { font-size: 10px; }
  15. .f11 { font-size: 11px; }
  16. .f12 { font-size: 12px; }
  17. .f13 { font-size: 13px; }
  18. .f14 { font-size: 14px; }
  19.  
  20. .pt30 { padding-top: 30px; }
  21. .pt20 { padding-top: 20px; }
  22. .pb30 { padding-bottom: 30px; }
  23. .pl10 { padding-left: 10px; }
  24. .pr10 { padding-right: 10px; }
  25. .pl20 { padding-left: 20px; }
  26. .pr20 { padding-right: 20px; }
  27. .pb0 { padding-bottom: 0px; }
  28. .pb10 { padding-bottom: 10px; }
  29. .pb3 { padding-bottom: 3px; }
  30.  
  31. .w450 { width: 450px; }
[HTML] pobierz, plaintext


plik INDEX.PHP:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
  5. <link rel="stylesheet" href="style.css" type="text/css"/>
  6. </head> 
  7.  
  8. <body> 
  9.  
  10. <div id="body" align="center">
  11.  
  12. <div id="content">
  13.  
  14. <img src="naglowek.jpg" class="pt20">
  15.  
  16. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  17.  
  18. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  19.  
  20. </div>
  21.  
  22. </div>
  23.  
  24. </body>
  25. </html>
[HTML] pobierz, plaintext
Pawel_W
21.07.2009, 14:22:16
człowieku, przecież to na pierwszy rzut oka widać, że div content jest w divie body, dlatego dla diva body też musi być height 100%
wookieb
21.07.2009, 14:27:21
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; font-family: verdana, arial; color: #ffffff; background-color: #333; font-size: 12px; text-align: center; }


#all{ margin: 0 auto; width: 900px; background: #030c11; height: 100%; padding: 0px; text-align: left;}
#content
{
    padding: 10px;
}
p
{
    margin: 0;
    padding: 4px 0;
}
</style>
</head>

<body>

<div id="all">
    
    <div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>



</body>
</html>

Dodałem drugi div zeby teraz ładnie było.

I przepraszam, za moj błąd, nie zauważyłem, że content jest w innym divie.
arek33
21.07.2009, 14:40:37
Cytat(Pawel_W @ 21.07.2009, 15:22:16 ) *
człowieku, przecież to na pierwszy rzut oka widać, że div content jest w divie body, dlatego dla diva body też musi być height 100%

sorry, wkleiłem zły plik.

POPRAWKA:
[HTML] pobierz, plaintext 
  1. html, body { margin: 0px; padding: 0px; height: 100%; font-family: verdana, arial; color: #fff; background: #333; font-size: 12px; }
  2. img { border: 0px; }
  3. a img{ border: 0px; }
  4. a:link, a:visited, a:hover, a:active { color: white; }
  5.  
  6. p { text-align: justify; padding-left: 20px; padding-right: 20px; }
  7.  
  8. #content { margin: 0px; width: 900px; height: 100%; background: #030c11; }
  9.  
  10.  
  11. .tj { text-align: justify; }
  12. .tc { text-align: center; }
  13.  
  14. .f10 { font-size: 10px; }
  15. .f11 { font-size: 11px; }
  16. .f12 { font-size: 12px; }
  17. .f13 { font-size: 13px; }
  18. .f14 { font-size: 14px; }
  19.  
  20. .pt30 { padding-top: 30px; }
  21. .pt20 { padding-top: 20px; }
  22. .pb30 { padding-bottom: 30px; }
  23. .pl10 { padding-left: 10px; }
  24. .pr10 { padding-right: 10px; }
  25. .pl20 { padding-left: 20px; }
  26. .pr20 { padding-right: 20px; }
  27. .pb0 { padding-bottom: 0px; }
  28. .pb10 { padding-bottom: 10px; }
  29. .pb3 { padding-bottom: 3px; }
  30.  
  31. .w450 { width: 450px; }
[HTML] pobierz, plaintext


@wookieb, dzięki za pomoc. Działa 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.