[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

[Kalinowcyk]

Co masz na myśli pisząc:

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

(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

[wookieb]

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

[Kalinowcyk]

A jeżeli by tak było to...? (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Bo nie do końca wiem, co masz na myśli.

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

[mike]

Mam nadzieję, że masz rację (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Wielokrotnie stosowane rozwiązanie :-)

[Kalinowcyk]

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? ;>

[kamil4u]

Link do strony testowej prosimy (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) -ewentualnie kod

[Kalinowcyk]

Na szczęście problem już rozwiązany (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Dzięki za zainteresowanie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)