Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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
 
 Start new topic
Odpowiedzi
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

Posty w temacie
- gregiolo   [CSS][HTML] Automatyczne zwężanie diva   1.02.2010, 10:44:46
- - muniekw   A jak wygląda html? Ja zrobiłem tak: [HTML] pobie...   1.02.2010, 11:03:47
- - gregiolo   HTML wygląda dokładnie tak jak u Ciebie domyślnie....   1.02.2010, 11:24:07
- - ats2008   Tak na szybko: height auto w div.top nic Ci nie ...   1.02.2010, 12:18:30
- - gregiolo   Postąpiłem zgodnie z punktem drugim i udało się do...   1.02.2010, 12:39:37

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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