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
arek33
post
Post #2





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


plik INDEX.PHP:

  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>
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: 10.10.2025 - 20:05