Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: rozłożenie div'ów
Forum PHP.pl > Forum > Po stronie przeglądarki
Pigula
chcialem strone przerobic z ulozenia tabelowego na divy i mam taki problem:
strona sklada sie z trzech czesci: gora, srodek, dol z czego srodek dzieli ma dwa divy obok siebie lewy i prawy kody wyglada mniej wiecej tak:
  1. <div class="gora">
  2. </div>
  3. <div class="srodek">
  4. <div class="lewy">
  5. </div>
  6. <div class="prawy">
  7. </div>
  8. </div>
  9. <div class="dol">
  10. </div>

i problem jest taki ze nie wiem jak dobrac ustawienia wysokosci zeby lewy i prawy mialy caly czas taka samo wysokosc. Czyli zeby srodek przyjmowal wysokosc wyzszego z divow: lewy, prawy. Ustawienie na sztywno wartosci odpada.
Styl wyglada tak:
Kod
.gora {
    width: 980px;
    height: 160px;
}

.srodek {
    width: 980px;
}

.lewy {
    float: left;
    width: 160px;
    height: 100%;
}

.prawy {
    float: right;
    width: 820px;
    height: 100%;
}

.dol {
    width: 980px;
    height: 16px;
}

jeszcze jedno jak lewy jest wiekszy od prawego to wtedy dol znajduje sie tylko pod prawym divem.
czytalem podobne watki na tym forum ale jakos nic nie pomaga. ma moze ktos jakis pomysl?
piechnat
Zerknij tutaj moze Ci to cos pomoze...
Pigula
Cytat(piechnat @ 2005-06-21 18:48:05)
Zerknij tutaj moze Ci to cos pomoze...

to juz widzialem w innych watkach i rozwiazuje problem tylko czesciowo. wszystko jest niby dobrze ulozone. tylko ze okna jak lewa czesc jest dluzsza to prawa nie chce sie do niej dopasowac tongue.gif wiec moze ktos ma jakis inny pomysl. bo jak nie to zostaje przy tabelkach
revyag
Problem, który opisujesz jest znany. Trzeba zastosować trick z obrazkiem w tle.
Robisz sobie obrazek o szerokości diva środkowego i wysokości 1px. Następnie ustawiasz go jako tło tego diva i już.
Kod
.srodek {
    width: 980px;
    background-image:url(obrazek.jpg);
    background-repeat: repeat-y;
}

Poza tym musisz dać po div kończącym .prawa <br style="clear:both" />, żeby zlikwidować działanie float.
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.