Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [PHP][CSS] Rozciągnięcie tła contentu
arek33
post
Post #1





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

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


Moja strona wizualnie wygląda tak:

(IMG:http://img139.imageshack.us/img139/2989/aaaytw.th.jpg)

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:
  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; }


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
 
Start new topic
Odpowiedzi
wookieb
post
Post #2





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
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 7.10.2025 - 00:10