Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Problem z tlem div-a
lukash82
post 22.01.2009, 19:15:15
Post #1





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

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


Witam. Mam takie pytanie odnośnie robienia tła w div-ie dla strony www. Mam głównego div-a "strona" oraz dwa div-y w nim czyli "lewa" i "prawa". I teraz pytanko. Jak zrobić aby tło lewej strony miało wysokość 100% wysokości strony. Nawet wtedy gdy zawartość jej jest dużo większa niż wysokość strony. Dla przykładu główny div:
"strona" jest zielony,
"lewy" jest czerwony,
"prawy" jest żółty.

Wszystko działa pod IE o dziwo (ale to pewnie przez przypadek...winksmiley.jpg Niestety w reszcie tych porządniejszych przeglądarek nie działa to tak jakbym chciał. Mój kod dla przykładu:
  1. body{
  2. margin : 0px;
  3. padding : 0px;
  4. }
  5. #strona{
  6. margin : 0px;
  7. padding : 0px;
  8. width : 960px;
  9. background-color : green;
  10. float : left;
  11. height : 100%;
  12. }
  13. #strona .lewa{
  14. margin : 0px;
  15. width : 400px;
  16. float : left;
  17. background-color : red;
  18. }
  19. #strona .prawa{
  20. margin : 0px;
  21. padding : 0px;
  22. width : 560px;
  23. float : right;
  24. background-color : yellow;
  25. }
  26. <div id="strona">
  27. <div class="lewa">
  28. lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />
  29. </div>
  30. <div class="prawa">
  31. prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />
  32. </div>
  33. </div>

Próbowałem już na różne sposoby ale bez powodzenia. Chciałem podłożyc obrazek pod główny div "strona" ale działa to tylko jeśli zawartość strony mieści się na wysokość ekranu. Po dodaniu większej ilości treści do którejś ze stron robią się klocki w FF i innych oprócz IE. Ogólnie efekt jaki chce uzyskać działa właśnie pod IE. Jak zrobić to w FF, etc.? Jeśli wiecie to dajcie znać lub napiszcie jakieś pomysły. Pozdrawiam, Łukasz.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 3)
erix
post 22.01.2009, 20:45:51
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Cytat
Nawet wtedy gdy zawartość jej jest dużo większa niż wysokość strony. Dla przykładu główny div:
"strona" jest zielony,
"lewy" jest czerwony,
"prawy" jest żółty.

Trochę nie skumałem; podrzuciłbyś screena?

Jeśli pomoże: http://www.alistapart.com/articles/holygrail


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
lukash82
post 23.01.2009, 16:12:19
Post #3





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

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


Witam. No może rzeczywiście trochę zamotałem się w opisie. Spróbuje jeszcze raz;) A więc mam jeden główny div i w nim dwie kolumny (div lewy i prawy). Obydwie kolumny wypełniają w całości tego głównego div-a. Przyjmijmy, ze jedna ma być czerwona a druga biała (jak flaga;). I teraz:
  • gdy zawartość ich jest mniejsza niż wysokość ekranu div jest rozciągnięty na całą wysokość ekranu i mamy taka odwrócona flagę...
  • gdy zawartość którejkolwiek kolumny jest większa niż wysokość ekranu i włączy się boczny pasek przewijania w przeglądarce to również mamy tło na całej wysokości ekranu, a nie tylko do wysokości krótszej kolumny...
Można to zobaczyć na przykładzie jaki zamieściłem w poprzednim poscie. W IE jest OK, w innych przeglądarkach nie działa...:/
Go to the top of the page
+Quote Post
erix
post 23.01.2009, 23:07:47
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Co do tła - celowo podałem linka do A list apart.

google: 100% height div CSS...


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 14:23