Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Układ strony z 3 divami
Forum PHP.pl > Forum > Po stronie przeglądarki
majestiq
Witam,

Robię stronke opartą na 3 głównych divach (lewe menu, środek ,prawe menu) znajdujących się w kontenerze.
Chodzi o to, aby każdy div uzyskał wysokość najwyzszego (środek).

Każda podstrona ma inną wysokość więc nie mogę tego na sztywno wpisać.
Próbowałem z overflow:hidden kontenera i zauważyłem, że jeśli ustawie w divie z menu position absolute i height:100% to rzeczywiście
jest takiej długości jak trzeba, ale nie mogę stosować absolute bo stosuje float: left; a z kolei jak nie dam position:absolute to jakby nie działa height:100% i div ma taką wysokość na ile jest wypełniony, czyli jest dużo za krótki.

Czy ktoś może mi pomoć rozwiązać problem równej wysokości każdej z 3 kolumn serwsiu ?

Wszystko można sobie zobaczyć tutaj:

http://www.kulturystyczny.com/o/

Ta zółta kolumna po lewej to ta która powinna być po prawej smile.gif, tutaj uzyskuje taką wysokość o jaką mi chodzi (długość najwyższego diva - środkowego) ale to tylko dlatego, że dałem position:absolute i tylko wtedy to działa, bez tego jest tam gdzie być powinna - po prawej stronie - symetrycznie do MENU lewego, ale ma wysokość taką jak tekst 'ss' - można to zauważyć tutaj:

http://www.kulturystyczny.com/p/

Proszę o pomoć, czyli uzyskanie efektu rozciągnięcia wysokości prawej kulumny bez position:absolute;
Dzięki Wielkie exclamation.gif
Cezar708
Kod
#prawo {
margin-left:10px;
padding:10px;
width:80px;
float: right;
background: #ff0;
height:100%;
}


to część Twojego pliku css, aby height: 100% zadziałało musi w elemencie nadrzędnym być określona wysokość w px (nie %), poza tym środek nie może być position: absolute (tylko ewentualnie static), bo jest jakby na zewnątrz całej struktury i nie ma większego wpływu na pozostałych. Jedynie co Ci pozostało to określenie wysokości divów arbitralnie (lub z pomocą javaScript)

Może lepiej jak wrzucisz to w strukturę jaką mam poniżej, Łatwiej jest ustawić wysokości, niestety tylko statycznie jeśli Ci to nie pomoże to po prostu daj znać:
  1. <div style='width: 100%; border: 1px solid; height: 200px;'>
  2. <div id='lewa' style='float: left; width: 400px; height: 100%; background: rgb(255,0,0) 1px;'>
  3. lewa
  4. </div>
  5. <div id='prawa' style='float: right; width: 400px; background: rgb(0,0,255) 1px; height: 100%;'>
  6. prawa
  7. </div>
  8. <div id='srodek' style='margin-right:400px; margin-left:400px; height: 100%; background: rgb(0,255,0) 1px;'>
  9. srodek
  10. </div>
  11. </div>
majestiq
Dziękiz za pomoc, jednak dalej nie wiem jakby to zrobić, żeby było dobrze.
Jak ustawie wysokość w elemenice nadzrzędnym czyli #srodek w px
to mi nie będze się zmieniała wysokość strony tak czy inaczej bo będzie na sztywno smile.gif
a w sumie jeśli chodzi o środkową ramkę to to działało.

Dlaczego contener nie może być absolute? Bez tego wszystko mi się rozjeżdża sad.gif

To jak zrobić zwykłą stronkę która, będzie się składała z 3 kolumn, których wysokość będzie identyczna ?
Męcze się z tym i męcze i nic mi nie wychodzi.

Czyżby tylko tabele pozostawały :/
Doomfinger
Zainteresuj się NiftyCube - to skrypt służący do robienia zaokrąglonych rogów, ale również do wyrównywania wysokości divów.
http://www.html.it/articoli/niftycube/index.html

tutaj przykład: http://www.html.it/articoli/niftycube/nifty10.html
nevt
Zrób to na tabelce - layout jest prosty jak drut więc odpuść sobie męki z wzajemnym pozycjonowaniem divów...

Dodatkowo tabelka podzieli ci stronę tak samo w wiekszości przeglądarek...

Pozdro.
Martee3k
Hey!


Dodaj sobie do containera (tego co masz w nim te 3 div-y) jeszcze jeden div np: stopke i umiesc na koncu!

ten div co dodasz musi miec clear:both; w cssach!

Powinno dzialac
Pozdro winksmiley.jpg
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.