Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Podział strony, css
kapitan kloss
post
Post #1





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 18.11.2004

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


Witajcie,
męczę się nad stroną i nie mogę sobie poradzić.
Chciałbym podzielić stronę na dwie części - góra i dół
W zależności do ilości treści w części górnej ilość powierzchni części dolnej będzie się zmniejszać, ale zawsze będzie dochodzić do samej krawędzi dolnej.
Nie wiem czy dobrze to wytłumaczyłem, ale to taki efekt flagi polskiej, gdzie na białym polu wpuszczamy tekst, a ilość koloru czerwonego na którym nei ma tekstu zmniejsza sie.
Flaga jednak musi wypełnić całą stronę. No i nie umiem tego zrobic.

Nie znalazłem żadnej podobnej strony ani tutoriala, który by o tym mówił.
Pomożecie? Dziekuje....
Kod
<div class="calosc">
<div class="gora">Tu znajduje sie raz duzo raz malo tekstu</div>
<div class="dol">Ta czesc zmniejsza swoj rozmiar w zaleznosci od ilosci tekstu na gorze</div>
</div>
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 5)
askone
post
Post #2





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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


Hej

Pozostając w temacie flagi i dwóch kolorów to proponuję byś ustawił kolor tła na czerwony i później ustawił div w pozycji (0,0) szerokość 100% - wysokości nie określasz - będzie dynamiczna w zależności od ilośći tekstu. Oczywiście należy pamiętać aby jako background tego diva ustawić image w kolorze białym.

Przykład:
Kod
body { background-color: red;}
#twoj_div {background: #FF0000 url('link do obrazka') repeat-x top left; width: 100%;}


Pisałem z palca, więc mogą być pewne błędy (IMG:style_emoticons/default/smile.gif) Jednak myślę iż tędy droga...
Go to the top of the page
+Quote Post
kapitan kloss
post
Post #3





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 18.11.2004

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


Dzięki za info. Nie do końca chyba opisałem tak jak trzeba.
Oto kod jaki napisałem (totalna noga w tym jestem).
Chodzi mi o to, aby kolor na dole - tu akurat bialy sięgał do końca strony. Nie umiem tego zrobić.
Oczywiście te moje 50% wysokości do niczego się nie nadaje, bo zawsze będzie to połowa bez względu na ilość tekstu na górnej warstwie.
Kod
<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url("elementy/background_air.jpg");
    background-repeat: no-repeat;    
}
.gora {
    background-color:white;
    height:auto;
    opacity:0.7;
    margin-bottom:20px;
}
.dol {
    background-color:white;
    height:50%;
}

</style>
<body>
    <div class="gora">
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>

    </div>
    <div class="dol"></div>
</body>


Tu pies pogrzebany. Jak opisać wysokość div=dol aby sięgał do końca strony bez względu na to ile tekstu będzie na górze.

Ten post edytował kapitan kloss 25.09.2009, 10:07:49
Go to the top of the page
+Quote Post
askone
post
Post #4





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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


Pytanie:
  1. Czy w dolnym divie będziesz coś umieszczał? jeśli nie to jest on zbędny i wystarczy tylko ustawienie koloru tła.
  2. Jeśli jednak coś ma być to według mnie rozwiązaniem jest skrypt w js, który już po wygenerowaniu strony ustawi odpowiednią wartość atrybutu "height" dla dolnego diva.
Pozdro
Go to the top of the page
+Quote Post
kapitan kloss
post
Post #5





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 18.11.2004

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


Tak, ta warstwa miala sluzyc do umieszczenia tam stopki z logami partnerow.
A gdzies takie skrypty sa do pobrania, bo w js to ja czegos takiego nie napisze.

Nie wymyslili czegos takiego jak:
wysokosc strony-gora.height = dol.height


Ten post edytował kapitan kloss 25.09.2009, 10:22:33
Go to the top of the page
+Quote Post
thek
post
Post #6





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D




A co gdy div "góra" będzie większy niż wysokość okna? Myślę, że estetycznie tego nigdy nie rozwiążesz tak naprawdę. Jeśli góra będzie za mała to dół byłby niemiłosiernie rozciągnięty na wysokość. Jeśli góra będzie większa niż wysokość to liczenie względem wysokości okna przeglądarki da Ci dla dołu wartości ujemne. Lepiej po prostu zostaw oba divy w spokoju. Każdy zajmie tyle miejsca ile potrzebuje, ale minusem tego jest to, że mała treść w obu sprawi, iż nie zajmą one całej wysokości. Ty jesteś adminem, więc to Ty musisz zdecydować, które rozwiązanie będzie najbardziej odpowiednie dla strony.

Edit: Byłbym zapomniał... Pobrać wysokość ekranu roboczego przeglądarki można. Wysokość elementu także można wyciągnąć, więc teoretycznie odejmowanie da się zrobić. Tylko według mnie to niepotrzebna zabawa w JS.

Ten post edytował thek 25.09.2009, 10:38:11
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 24.08.2025 - 16:03