Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][CSS] Rozciągnięcie tła contentu
arek33
post 21.07.2009, 12:04:15
Post #1





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 24.02.2009

Ostrzeżenie: (0%)
-----

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ł ?
Go to the top of the page
+Quote Post
muniekw
post 21.07.2009, 12:26:21
Post #2





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Użyj
Kod
min-height: jakaś_wartość;
Go to the top of the page
+Quote Post
wookieb
post 21.07.2009, 12:35:03
Post #3





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Kod
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}

#twoj_div_ktorego_chcesz_rozciagnac
{
height: 100%;
}


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
arek33
post 21.07.2009, 12:38:38
Post #4





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 24.02.2009

Ostrzeżenie: (0%)
-----

@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.
Go to the top of the page
+Quote Post
wookieb
post 21.07.2009, 12:39:48
Post #5





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
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

Ten post edytował wookieb 21.07.2009, 12:46:04


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
muniekw
post 21.07.2009, 12:53:51
Post #6





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

@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
Go to the top of the page
+Quote Post
arek33
post 21.07.2009, 13:56:56
Post #7





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 24.02.2009

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
wookieb
post 21.07.2009, 14:06:40
Post #8





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
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.

Ten post edytował wookieb 21.07.2009, 14:10:28


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
arek33
post 21.07.2009, 14:19:54
Post #9





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 24.02.2009

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Pawel_W
post 21.07.2009, 14:22:16
Post #10





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

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%
Go to the top of the page
+Quote Post
wookieb
post 21.07.2009, 14:27:21
Post #11





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
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.

Ten post edytował wookieb 21.07.2009, 14:30:54


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
arek33
post 21.07.2009, 14:40:37
Post #12





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 24.02.2009

Ostrzeżenie: (0%)
-----

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

Ten post edytował arek33 21.07.2009, 14:44:31
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 6.07.2025 - 21:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn