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

[ats2008]

Tak na szybko:

height auto w div.top nic Ci nie da, bo auto dostosuje do zawartości diva, a nie do wysokości ekranu.

Prawdę mówiąc widzę 3 ścieżki tego problemu:

1. Nadać div.top sztywną wysokość, bo jeśli div.content ma 600px, to znajdź największą rozdzielczość przeglądarki i ustal ja tak, żeby obejmowała cały ekran, albo nawet więcej (wtedy pojawi się suwak) i nie będzie wielkiej dziury. Przyznaję - tanie rozwiązanie.

2. Jeśli nic z tego Ci nie podpasuje, to musisz pokombinować z wymuszeniem wysokości div.top, np. dać mu ok. 50% wysokości (ale wtedy musisz nadać body atrybut 100%...).

3. Może pomoże Ci przesuwane tło - poszukaj w necie.

Pozdrawiam.