Dolný vodorovný blok rozloženia stránky sa často označuje ako „päta“. V ňom, rovnako ako v iných blokoch stránky, sú umiestnené dizajnové prvky, ale na rozdiel od iných často vznikajú špecifické problémy s umiestnením tohto konkrétneho bloku. Súvisia so skutočnosťou, že rôzne prehľadávače chápu štandardy jazyka CSS odlišne a môže byť celkom ťažké dosiahnuť, aby sa päta nachádzala na spodnom okraji okna prehliadača. Nižšie je uvedený kód jedného z riešení tohto problému.
Nevyhnutné
Základné znalosti CSS a HTML
Inštrukcie
Krok 1
Do prvého riadku zdrojového kódu stránky umiestnite odkaz na špecifikáciu XHTML 1.0 Transitional:
Krok 2
Hlavné bloky štruktúry stránky umiestnite do tela dokumentu (medzi značky a). Blok, do ktorého bude vložený hlavný obsah, musí pozostávať z dvoch vnorených vrstiev. Napríklad nech má vonkajší identifikátor OuterDiv a vnútorný - InnerDiv:
Tu bude hlavný obsah stránky.
Za nimi umiestnite blok päty s identifikátorom, napríklad FooterDiv:
Päta stránky.
Krok 3
Umiestnite v hornej časti kódu HTML (medzi značky a) odkaz na externý súbor s popisom štýlov css:
@ import "footerStyle.css";
Krok 4
Uložte celý kód hlavnej stránky do súboru s príponou html. Môže to vyzerať takto:
Lisovaná päta
@ import "footerStyle.css";
Tu bude hlavný obsah stránky.
Päta stránky.
Krok 5
Vytvorte súbor so štýlmi - obyčajný textový súbor, ktorý by sa mal uložiť s príponou css a menom, ktoré ste zadali v kóde HTML (footerStyle.css). Do tohto súboru napíšte nasledujúce popisy štýlov blokov použitých na stránke:
* {okraj: 0; výplň: 0}
html, telo {výška: 100%;}
telo {
poloha: relatívna;
farba: # 222222;
}
#OuterDiv {
okraj: 0;
min. výška: 100%;
pozadie: #aaaaaa;
farba: # 222222;
}
* html #OuterDiv {výška: 100%;}
#FooterDiv {
poloha: relatívna;
jasné: oboje;
horný okraj: -60px;
výška: 60px;
šírka: 100%;
farba pozadia: DarkBlue;
zarovnanie textu: na stred;
farba: #eeeeff;
}
. InnerDiv {
šírka: 100%;
plavák: vľavo;
}
