Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Problem z pozycjonowaniem DIV
Forum PHP.pl > Forum > Po stronie przeglądarki
Bejkrools
Hej, mam mały problem z ułożeniem DIVów na stronie. Chciałbym, żeby wyglądało wszystko tak jak na obrazku, ale nie potrafie sobie z tym poradzić.

Czarny przylega do lewego górnego rogu przeglądarki i ma szerokość 1024.
Czerwony przylega do lewej i górnej krawędzi czarnego.
Brązowy przylega do lewej krawędzi czarnego i do czerwonego.
Zielony przylega do brązowego i czerwonego - w nim zawierać się będzie cała "treść" strony.
Niebieski "pływa" wzdłuż zielonego i zawsze jest w jednym miejscu względem okna przeglądarki, niezależnie od przewijania strony, .
Żółty musi być przyklejony do dolnej krawędzi brązowego.

Szerokość wszystkich elementów jest zdefiniowana i STAŁA.

Mógłby mi ktoś tak na szybko napisać jak wyglądałby taki układ DIVów? ID można nazwać tak, jak kolory :-)

Damonsson
Mniej więcej tak:

  1. <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>


tylko musisz pouzupełniać nazwami klas itd.

Wysil się trochę i pokaż jakieś próby (jsfiddle.net), chociaż jakiś szkielet, żeby można było go przerobić i Ci pomóc.
Bejkrools
http://jsfiddle.net/dn4mH/2/

niby już jest ok, tylko teraz potrzebuję, żeby Zielony miał zawsze MINIMUM taką wysokość, żeby sięgał do spodu ekranu. min-height: 100% nie działa :-(
Damonsson
http://jsfiddle.net/dn4mH/3/

teraz git?
Bejkrools
Po przystosowaniu do mojej strony wszystko działa ale tylko jak w odpowiedniku Zielonego DIV'a w CSS dam np.: min-height: 1000px. Procentowo nie działa :-(

Musiałem jeszcze jednego DIV'a dodać w szkielecie, ORANGE zawiera w sobie BROWN i GREEN. Próbowałem dostosować, ale z marnym skutkiem. Po moich poprawkach BLUE i GREEN nie jest wcale widoczny...

http://jsfiddle.net/dn4mH/5/
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.