„Päta“je zvyčajne najspodnejší blok rozloženia webovej stránky. Najbežnejším problémom pri umiestňovaní tejto päty je dosiahnuť, aby bola vždy umiestnená v spodnej časti okna bez ohľadu na plnosť stránky alebo typ prehliadača. Od doby masívneho prechodu na blokové usporiadanie existuje pomerne veľa riešení problému a jedno z nich je uvedené nižšie.
Je to nevyhnutné
Základné znalosti CSS a HTML
Inštrukcie
Krok 1
Zoberme si ako základ najbežnejšiu schému rozloženia stránky - tri bloky umiestnené jeden nad druhým. Horná časť (hlavička) by mala byť vždy zarovnaná k hornému okraju okna, spodná časť (päta) - k dolnému okraju a hlavná časť (telo) by mala vždy vypĺňať všetok priestor medzi nimi. Zdrojový kód musí obsahovať odkaz na prechodnú špecifikáciu XHTML 1.0 a popis štýlov musí byť umiestnený v externom súbore CSS (aby sa predišlo problémom s operačným programom Opera 9. XX). HTML popis štruktúry musí byť umiestnený v hlavnej časti telo stránky. Začína to samozrejme od horného bloku, do značky, do ktorej by mal byť umiestnený atribút identifikátora s hodnotou, napríklad divHead:
Blok hlavičky.
Hlavný blok by mal pozostávať z dvojice vnorených blokov. Vonkajšiemu bude pridelený identifikátor divOut a vnútornému - divContent:
Hlavný obsah.
Päta je nastavená na divFoot:
Päta stránky.
Krok 2
Celý kód HTML stránky by mal vyzerať takto:
Tri bloky
@import "style.css";
Toto je hlavičkový blok.
Hlavný obsah.
Toto je päta stránky.
Krok 3
Popis štýlu implementuje nasledujúci mechanizmus rozloženia: stredný blok (divOut) je nastavený na 100% výšky, horný blok (divHead) bude mať absolútne umiestnenie a spodný relatívny. V hlavnom bloku obsahu (divContent) musí byť navrchu voľné miesto, ktoré sa rovná výške bloku nadpisu, aby neprekrýval hlavný obsah stránky. A spodný blok (päta) by mal mať v hornej časti záporný okraj, ktorý sa rovná výške tohto bloku. Týmto sa zdvihne nad spodný okraj okna prehľadávača. Tento mechanizmus je možné implementovať pomocou súboru css s nasledujúcim obsahom: * {margin: 0; výplň: 0}
html, telo {výška: 100%;} telo {
poloha: relatívna;
farba: # 000;
}
#divOut {
okraj: 0;
min. výška: 100%;
pozadie: #FFF;
farba: # 000;
}
* html #divOut {výška: 100%;}
#divHead {
pozícia: absolútna;
vľavo: 0;
hore: 0;
šírka: 100%;
výška: 80px;
pozadie: # 2F5000;
prepad: skrytý;
zarovnanie textu: na stred;
farba: #FFF;
} #divFoot {
poloha: relatívna;
jasné: oboje;
horný okraj: -60px;
výška: 60px;
šírka: 100%;
farba pozadia: # 2F5000;
zarovnanie textu: na stred;
farba: #FFF;
}
.divContent {
šírka: 100%;
plavák: vľavo;
výplň: 81px;
} Názov, ktorý ste zadali pre šablónu so štýlmi v kóde HTML, je style.css.
