Autor Zpráva
Štrajt
Profil *
Dobrý den,

zápasím s problémem, jak udržet záhlaví na hoře a zápatí dole. tento post jsem si pročetl, ale podařilo se mi to nepochopit.

Napsal jsem si tento .css soubor

#zahlavi{
    width:100%;
    height:150px;
    background:  url("klavesnice.jpg") repeat;
    background-position:left; 
    /*position: absolute;*/
}

#menu ul li {
   font-size: 25px; 
   float:left;
   margin-top: 120px;
   width: 130px; 
   text-align: center;
   list-style-type: none;
   
}


h1,h2,h3 {
    color: green;
    text-align: left;
    margin: 20px;
}

p {
    text-align: justify;
    margin: 20px;
}

#telo{
    width: 100%;
    margin: 0 auto;
    text-align: left;
     min-height: 100%;
    height: 100%;
    /*position: relative;*/
    position: absolute;
    text-align: justify;
 }


#zapati{
    width:100%;
    height:120px;
    background:  url("klavesnice.jpg") repeat;
    background-position:left; 
    position:absolute;
    bottom: 0;
    left: 0;
} 

V odkazovaném článku se píše, že ...."Základním principem, jak udržet patičku dole, je vložit ji absolutně do nějakého bloku, v našem případě s názvem main, kterému nastavíme relativní pozici a tím pádem zajistíme, že všechny další blokové prvky, které budeme pozicovat absolutně..."

Mám stránku složenou ze tří částí, záhlaví, těla a zápatí. Je to míněno tak, že absolutně pozicované má být zápatí?

Děkuji

Petr
panther
Profil
Štrajt:
Je to míněno tak, že absolutně pozicované má být zápatí?
ano, absolutně pozicováno na spodek #telo, to musí mít nastavený padding na hodnotu stejnou nebo vyšší než je výška patičky.

Kromě toho článku, podíval ses na zdrojový kód obou Plaváčkových ukázek (s krátkým a dlouhým obsahem), které odkazuje?
Štrajt
Profil *
panther:

Dobrý den,

podíval jsem se na obě verze, ale nepochopil jsem to. Ten kód se mi zatím zdá dost nepřehledný. Nemíním to jako kritiku autora, protože dojem nepřehlednosti je u mne dán tím, že tomu zatím nerozumím.

Nevíte o nějakém howto, kde by bylo "blubuvzdorně" popsáno jak na sebe jednotlivé části stránky reagují?
Rellik
Profil
No můžeš to udělat i tak že tomu záhlaví nastavíš absolutní pozicování - top:0px; a position: fixed; a patičce dáš v podstatě to samé jen místo top, ji přilepíš naspodek bottom:0px; a taky fixed. Ony ti pak tyto dva bloky zůstanou nahoře i dole i když budeš rolovat stránku. Bude to vypadat skoro jako iframe... Ale pokud chceš aby se patička natáhla při kratším článku na spodek prohlížeče a nebo až na konec textu když bude dlouhý, tak můžeš použít to plaváčkovo řešení. Klidně si u některého ukázkového webu zobraz zdrojový kód, celý ho označ, zkopíruj a vytvoř si z něho svoji stránku. Bude funkční, jen tam nebudou ty obrázky. Ty už si ale doplníš podle kódu, vlastními. ;-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: