Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Rozciaganie div-a (tlo) na wysokosc
Forum PHP.pl > Forum > Przedszkole
lukash82
Witam. Mam taki problemik z ustawieniem tla dla jednego z div-ow na stronie. Taki efekt juz pare razy wykorzystywalem w innych stronach i zawsze mi to dzialalo a teraz nie wiem czemu nie chce. Po krotce chodzi o to, ze mam jakis div z tlem (w tym przypadku zielony na rysunkach w linkach ponizej). W nim sa dwa div-y, jeden (zolty) z menu a drugi (bialy ) z trescia strony. Problem polega na tym, ze gdy wybiore cos z menu i tekst do tego bedzie dluzszy od wysokosci menu to div z trescia(bialy) ma sie rozciagnac na tylt ile potrzeba. I to mi dziala dobrze pod wszystkimi przegladarkami. Teraz chcialbym aby ten div pod spodem (tj. zielony) rozciagnal sie tez na dlugosc div-a (bialego) z trescia strony. Pod IE to dziala dobrze bez dodawania zadnych opcji w css ale chcialbym zeby tak samo dzialalo to pod porzadnymi przegladarkami (FF i Opera). Ponizej troche kodu jaki narazie mam, i ktory nie dziala jak nalezy...:/
Plik HTML
  1. <div id="tresc">
  2. <div class="menu_oferta">
  3. Menu1<br />
  4. Menu2<br />
  5. Menu3
  6. </div>
  7. <div class="opis">
  8. 1<br />
  9. 2<br />
  10. 3<br />
  11. 4<br />
  12. 5<br />
  13. 6<br />
  14. 7<br />
  15. 8<br />
  16. 9<br />
  17. 10<br />
  18. 11<br />
  19. 12<br />
  20. 13<br />
  21. 14
  22. </div>
  23. </div>

i plik css
  1. #tresc{
  2. margin : 0px;
  3. padding : 0px;
  4. width : 800px;
  5. background-color : green;
  6. height : auto !important;
  7. height : 300px; /* IE */
  8. min-height : 300px;
  9. }
  10. #tresc .opis{
  11. margin : 0px;
  12. padding : 5px;
  13. width : 580px;
  14. float : right;
  15. background-color : white;
  16. }
  17. #tresc .menu_oferta{
  18. margin : 0px;
  19. padding : 0px;
  20. width : 200px;
  21. background-color : yellow;
  22. float : left;
  23. }

A tak to wyglada pod IE pod Opera/FF
Wydaje mi sie, ze wszystko jest dobrze napisane i problem lezy po stronie wysokosci glownego kontenera tresc ale nie wiem co tam jest tak do konca zle. Jesli widzicie blad to prosze o pomoc jak sie go pozbyc. Pozdrawiam, Łukasz.
nevt
możes spróbować dodać float:left dla #tresc (nie jestem pewien, czy pomoże - nie mogę teraz sprawdzić...) ale powinno pomóc dodanie na końcu (za .opis ale wewnątrz #tresc) pustej stopki, coś w rodzaju:
  1. <div style="clear:both;width:100%"></div>
lukash82
Witam ponownie. Nie myslalem, ze cos takiego moze pomoc a jednak:) Pomogla opcja dodania do #tresc float: left. nie wiem do konca na jakiej zasadzie to zadzialalo ale dziala. Wielkie dzieki nevt. Pozdrawiam
nevt
heh - sam nie wiem z czego to wynika, ale już nieraz przekonałem się, że aby wszystkie przeglądarki właściwie interpretowały oblewanie, to trzeba nadać też float kontenerowi - ciesze się, że dobrze pamiętałem i mogłem pomóc...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.