Forum PHP.pl > [CSS][HTML] Automatyczne zwężanie diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] Automatyczne zwężanie diva

gregiolo

1.02.2010, 10:44:46

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.

Proszę o pomoc zatem.

muniekw

1.02.2010, 11:03:47

A jak wygląda html?

Ja zrobiłem tak:

[HTML] pobierz, plaintext 
  <body>
    <div class="top">Tekst<br>tekst<br>tekst</div>
    <div class="content">a<br><br>a<br><br>a</div>
  </body>
[HTML] pobierz, plaintext

a CSS tak:

[HTML] pobierz, plaintext 
.top {
      display: block;
      width: 100%;
      height: auto;
      background-color: rgb(153,51,153);
      }
 
.content{
      display: block;
      width: 100%;
      height: 600px;
      background-color: rgb(51,204,255);
      }
[HTML] pobierz, plaintext

Nie wiem czy dokładnie o to Ci chodzi, ale mi działa

gregiolo

1.02.2010, 11:24:07

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.

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.

Dlatego ważne jest, aby strona warstwą (content) przylegała do dołu, a warstwa (top) wypełniała różnicę.

ats2008

1.02.2010, 12:18:30

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.

gregiolo

1.02.2010, 12:39:37

Postąpiłem zgodnie z punktem drugim i udało się doskonale.

Dzieki wielkie za odpowiedzi!

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.