Witam.

Mam pewien problem przy cieciu layoutu.

Proszę spojrzeć na poniższy schemat:



Otóż, rysunek ten przedstawia jeden element blokowy div.
Chciałbym, aby na górze tego elementu występowało tło (background-image) - blok niebieski.
Chciałbym również, aby na dole tego występowało inne tło - blok pomarańczowy.

Na tym wszystkim występować będzie tekst oraz inna zawartość.

Czy jest jakiś prosty sposób, aby osiągnąć taki efekt?

Wiem, można kombinować z z-indexami, relativami itp.
Ale czy można takie coś osiągnąć w jakiś prostszy sposób?

Cała zabawa polega moim zdaniem na tym, aby divovi nadać dwa obrazy tła - jeden u góry, drugi na dole.
Wiem, że takie coś nie jest jako tako niemożliwe, ale może istnieje na to jakaś fajna sztuczka?

Za wszelkie podpowiedzi z góry dzięki
Pozdrawiam.

Jezeli to nie ma byc gradient to wlasciwie tylko js z cssem
Tworzysz 3 poziome divy.
Pierwszy z position: relative i tutaj wrzucasz tresc
2 kolejne z kolorami jakie chcesz.
Javascriptem po otworzeniu dokumentu ustalasz wysokosci dwóch divów z kolorami albo ich pozycje jezeli chcesz miec dokladnie jak wyzej.

Co masz na myśli pisząc:

"Jezeli to nie ma byc gradient to wlasciwie tylko js z cssem"

No w sensie ze jezeli nie chcesz zeby w tym bloku kolor niebieski przechodzil w inny

A jeżeli by tak było to...?
Bo nie do końca wiem, co masz na myśli.

Bzdura!

Mamy tutaj cztery bloki.
1. Kontener główny (jaśniejszy szary). Daemy mu position: relative;
2. Dwa bloki, które robią tła (fioletwy i pomarańczowy). Pozycjonujemy je za pomocą position: absolute; i dajemy na przykład z-index: 10;
3. Ostatni blok (ciemny szary) zawiera treść. Pozycjonujemy do za pomocą position: relative; i dajemy wyższy z-index; niż blokom z tłem. Na przykład z-index: 20; Dodatkowo możemy mu dać jakiś margin, żeby powstały takie marginesy jak na obrazku.

Blok z treścia będzie rozpychał kontener główny a bloki zawierające tła będą w odpowidnich miejscach niezależnie od wysokości kontenera i zawsze pod treścią.

To jest bardzo proste. Dosłownie kilka wpisów w CSS i dodatkowo bez żadnego JS. Nie ma prostszej metody.

Na pewno to przetestuję w najbliższym czasie.
Mam nadzieję, że masz rację
Dzięki, pozdrawiam.

Wielokrotnie stosowane rozwiązanie :-)

A jak to się ma do IE 6?
W ie6 nie rozciąga mi diva głównego (jaśniejszy szary). Co robię źle? ;>

Link do strony testowej prosimy -ewentualnie kod

Na szczęście problem już rozwiązany
Dzięki za zainteresowanie