[CSS][HTML] Automatyczne zwężanie diva, Problem współdziałania dwóch warstw Opcje

[gregiolo]

Witam,

Chciałbym uzyskać efekt jak na obrazku. Ważne jest jednak, aby rozwiązanie było uniwersalne dla wszystkich rozdzielczości.

Kod wstępnie wygląda tak. Niestety nie działa

[CSS] pobierz, plaintext 
.top {
    display: block;
    width: 100%;
    height: auto;
    background: url(graph/bg_top.jpg) repeat-x bottom left;
}
 
.content{
    display: block;
    width: 100%;
    height: 600px;
    background: url(graph/bg.jpg) #000e28 repeat-x bottom left;
}
[CSS] pobierz, plaintext 

Zależy mi na tym aby warstwa content była widoczna zawsze w stałym rozmiarze i przylegała do dołu strony (!).. Warstwa .top powinna zmniejszać się lub zwiększać w zależności od wysokości ekranu. Zatem puste miejsce pomiędzy złączeniem obu warstw powinien być wypełniany przez warstwę .top. Niestety obecnie tak się nie dzieje. (IMG:style_emoticons/default/sad.gif)

(IMG:http://img8.imageshack.us/img8/4706/beznazwy11.gif)

Proszę o pomoc zatem.

[gregiolo]

HTML wygląda dokładnie tak jak u Ciebie domyślnie.
Owszem działa ale tło warstwy (content) nie jest przyrównane do dołu strony. U mnie jest dziura między dołem ekranu a warstwa (content) kończy się gdzieś po srodku strony.

U Ciebie nie widać tego bo użyłeś tła jednolitego. (IMG:style_emoticons/default/smile.gif) Ja mam na dole warstwy (content) obrazek panoramiczny.
Ku górze leci gradient. Warstwa (top) ma kolor gradientu, przez co zaoszczędzam miejsce zamiast pakować jpg. (IMG:style_emoticons/default/smile.gif) Dlatego ważne jest, aby strona warstwą (content) przylegała do dołu, a warstwa (top) wypełniała różnicę.