Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Automatyczne zwężanie diva, Problem współdziałania dwóch warstw
gregiolo
post
Post #1





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 1.02.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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 
  1. .top {
  2.     display: block;
  3.     width: 100%;
  4.     height: auto;
  5.     background: url(graph/bg_top.jpg) repeat-x bottom left;
  6. }
  7.  
  8. .content{
  9.     display: block;
  10.     width: 100%;
  11.     height: 600px;
  12.     background: url(graph/bg.jpg) #000e28 repeat-x bottom left;
  13. }
[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.
Go to the top of the page
+Quote Post
muniekw
post
Post #2





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

A jak wygląda html?

Ja zrobiłem tak:
[HTML] pobierz, plaintext 
  1.   <body>
  2.     <div class="top">Tekst<br>tekst<br>tekst</div>
  3.     <div class="content">a<br><br>a<br><br>a</div>
  4.   </body>
[HTML] pobierz, plaintext


a CSS tak:
[HTML] pobierz, plaintext 
  1. .top {
  2.       display: block;
  3.       width: 100%;
  4.       height: auto;
  5.       background-color: rgb(153,51,153);
  6.       }
  7.  
  8. .content{
  9.       display: block;
  10.       width: 100%;
  11.       height: 600px;
  12.       background-color: rgb(51,204,255);
  13.       }
[HTML] pobierz, plaintext



Nie wiem czy dokładnie o to Ci chodzi, ale mi działa (IMG:style_emoticons/default/smile.gif)

Ten post edytował muniekw 1.02.2010, 11:09:12
Go to the top of the page
+Quote Post
gregiolo
post
Post #3





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 1.02.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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ę.
Go to the top of the page
+Quote Post
ats2008
post
Post #4





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 11.06.2009
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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.

Go to the top of the page
+Quote Post
gregiolo
post
Post #5





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 1.02.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Postąpiłem zgodnie z punktem drugim i udało się doskonale. (IMG:style_emoticons/default/smile.gif) Dzieki wielkie za odpowiedzi! (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 21:59
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn