[Xtml/Css] Problem z backgroundami. Opcje

[Kalinowcyk]

Witam.

Mam pewien problem przy cieciu layoutu.

Proszę spojrzeć na poniższy schemat:

(IMG:http://img530.imageshack.us/img530/8530/przyklad.jpg)

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Pozdrawiam.

[wookieb]

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.

Ten post edytował wookieb 25.02.2009, 15:04:47

[mike]

Jezeli to nie ma byc gradient to wlasciwie tylko js z cssem
Javascriptem po otworzeniu dokumentu ustalasz wysokosci dwóch divów z kolorami albo ich pozycje jezeli chcesz miec dokladnie jak wyzej.

Bzdura! (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

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ą.

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

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

[Kalinowcyk]

Bzdura! (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

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ę (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Dzięki, pozdrawiam.