Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Kilkuwarstwowe tło, zależne od wysokości strony
klapaucius
post
Post #1





Grupa: Zarejestrowani
Postów: 223
Pomógł: 3
Dołączył: 4.07.2009
Skąd: Kraków

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

Na swojej stronie muszę stworzyć tło składające się z trzech divów: górny, srodkowy i dolny. Górny i dolny div będą miały tła obrazkowe - o stałej wysokości. Natomiast div środkowy będzie posiadał tło z koloru, którego wysokośc byłaby zależna od wysokości całej strony. Czyli miałby się powiększać wraz z ilością tekstu/treści na stronie.

Tło musi się znajdować w kontenerze - divie o wartości position: absolute (ażeby tło było za wszystkimi innymi wartswami strony).

Oto uproszczony szkielet strony:
Kod
<html>
    <head>
        <style type="text/css">
            .background {
                position: absolute;
                z-index: -10;
                width: 100px;
            }
            .background .top {
                background: red;
                height: 100px;
            }
            .background .center {
                min-height: 100px;
                background: green;
            }
            .background .bottom {
                background: yellow;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="background">
            <div class="top"></div>
            <div class="center"></div>
            <div class="bottom"></div>
        </div>
        <p>
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
            Tresc strony<br />
        </p>
    </body>
</html>



No i teraz jak zrobić, aby środkowy div .center powiększał się analogicznie do ilości tekstu na stronie?

Ten post edytował klapaucius 27.07.2013, 13:36:13
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
Ciosek
post
Post #2





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 31.01.2010

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

Nie wiem czy dobrze zrozumialem ale sprawdz:

overflow: auto;
Go to the top of the page
+Quote Post
klapaucius
post
Post #3





Grupa: Zarejestrowani
Postów: 223
Pomógł: 3
Dołączył: 4.07.2009
Skąd: Kraków

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

Cytat(Ciosek @ 27.07.2013, 14:37:40 ) *
Nie wiem czy dobrze zrozumialem ale sprawdz:

overflow: auto;


Ale dodając to do divu .center ? Niestety nie działa.
Go to the top of the page
+Quote Post
Ciosek
post
Post #4





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 31.01.2010

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

Tak.

Mam tylko jedno pytanie:
Dlaczego zrobiles to tak:

[HTML] pobierz, plaintext 
  1. <body>
  2.         <div class="background">
  3.             <div class="top"></div>
  4.             <div class="center"></div>
  5.             <div class="bottom"></div>
  6.         </div>
  7.         <p>
  8.             Tresc strony<br />
  9.             Tresc strony<br />
  10.             Tresc strony<br />
  11.             Tresc strony<br />
  12.             Tresc strony<br />
  13.             Tresc strony<br />
  14.             Tresc strony<br />
  15.             Tresc strony<br />
  16.             Tresc strony<br />
  17.             Tresc strony<br />
  18.             Tresc strony<br />
  19.             Tresc strony<br />
  20.         </p>
  21.     </body>
[HTML] pobierz, plaintext


A nie tak:

[HTML] pobierz, plaintext 
  1. <body>
  2.         <div class="background">
  3.             <div class="top"></div>
  4.             <div class="center"><p>
  5.             Tresc strony<br />
  6.             Tresc strony<br />
  7.             Tresc strony<br />
  8.             Tresc strony<br />
  9.             Tresc strony<br />
  10.             Tresc strony<br />
  11.             Tresc strony<br />
  12.             Tresc strony<br />
  13.             Tresc strony<br />
  14.             Tresc strony<br />
  15.             Tresc strony<br />
  16.             Tresc strony<br />
  17.         </p></div>
  18.             <div class="bottom"></div>
  19.         </div>
  20.  
  21.     </body>
[HTML] pobierz, plaintext



W ten sposob powinno wszystko dzialac jak nalezy
Go to the top of the page
+Quote Post
Crozin
post
Post #5





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

Dlaczego nie skorzystasz po prostu z wielu teł ustawionych dla jednego elementu?
Go to the top of the page
+Quote Post
klapaucius
post
Post #6





Grupa: Zarejestrowani
Postów: 223
Pomógł: 3
Dołączył: 4.07.2009
Skąd: Kraków

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

Cytat(Ciosek @ 27.07.2013, 15:21:03 ) *
Tak.

Mam tylko jedno pytanie:
Dlaczego zrobiles to tak:

[HTML] pobierz, plaintext 
  1. <body>
  2.         <div class="background">
  3.             <div class="top"></div>
  4.             <div class="center"></div>
  5.             <div class="bottom"></div>
  6.         </div>
  7.         <p>
  8.             Tresc strony<br />
  9.             Tresc strony<br />
  10.             Tresc strony<br />
  11.             Tresc strony<br />
  12.             Tresc strony<br />
  13.             Tresc strony<br />
  14.             Tresc strony<br />
  15.             Tresc strony<br />
  16.             Tresc strony<br />
  17.             Tresc strony<br />
  18.             Tresc strony<br />
  19.             Tresc strony<br />
  20.         </p>
  21.     </body>
[HTML] pobierz, plaintext


A nie tak:

[HTML] pobierz, plaintext 
  1. <body>
  2.         <div class="background">
  3.             <div class="top"></div>
  4.             <div class="center"><p>
  5.             Tresc strony<br />
  6.             Tresc strony<br />
  7.             Tresc strony<br />
  8.             Tresc strony<br />
  9.             Tresc strony<br />
  10.             Tresc strony<br />
  11.             Tresc strony<br />
  12.             Tresc strony<br />
  13.             Tresc strony<br />
  14.             Tresc strony<br />
  15.             Tresc strony<br />
  16.             Tresc strony<br />
  17.         </p></div>
  18.             <div class="bottom"></div>
  19.         </div>
  20.  
  21.     </body>
[HTML] pobierz, plaintext



W ten sposob powinno wszystko dzialac jak nalezy



Wynika to ze skomplikowanej struktury mojej strony. Chodzi o to, że nie na każdej podstronie wyświetla się takie samo tło. Tak więc niestety MUSI być tak jak napisałem (IMG:style_emoticons/default/sad.gif)

@edit

Cytat(Crozin @ 27.07.2013, 15:27:59 ) *
Dlaczego nie skorzystasz po prostu z wielu teł ustawionych dla jednego elementu?

Ok, poradziłem sobie podanym przez Ciebie sposobem. Dziekuję.

Ten post edytował klapaucius 27.07.2013, 18:07:48
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: Przełącz na: Standardowy · 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 - 23:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn