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:
[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
 
 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:
[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

Posty w temacie
- arek33   [PHP][CSS] Rozciągnięcie tła contentu   21.07.2009, 12:04:15
- - muniekw   Użyj Kodmin-height: jakaś_wartość;   21.07.2009, 12:26:21
- - wookieb   Kodhtml,body { height: 100%; padding: 0px;...   21.07.2009, 12:35:03
- - arek33   @muniekw: takie coś mnie nie urządza, bo ludzie, k...   21.07.2009, 12:38:38
- - wookieb   Podam ci kod prezentujący koniecznosc twojego...   21.07.2009, 12:39:48
- - muniekw   @wookieb ma rację Jak ustawisz sobie w sekcji ht...   21.07.2009, 12:53:51
- - arek33   Robiłem tak już. Ustawiałem height 100% w html, bo...   21.07.2009, 13:56:56
- - wookieb   A o padding i margin to kto bedzie pamięta...   21.07.2009, 14:06:40
- - arek33   Tak też zrobiłem. margin, padding mają wartość 0px...   21.07.2009, 14:19:54
- - Pawel_W   człowieku, przecież to na pierwszy rzut oka widać,...   21.07.2009, 14:22:16
- - wookieb   Kod<!DOCTYPE html PUBLIC "-//W3C//DTD ...   21.07.2009, 14:27:21
- - arek33   Cytat(Pawel_W @ 21.07.2009, 15:22:16 ...   21.07.2009, 14:40:37

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 13.10.2025 - 15:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn