„Zápatí“je obvykle spodní blok rozvržení webové stránky. Nejběžnějším problémem s umístěním této zápatí je zajistit, aby byl vždy umístěn ve spodní části okna, bez ohledu na plnost stránky nebo typ prohlížeče. Od doby masivního přechodu k blokovému uspořádání existuje poměrně málo řešení problému a jedno z nich je uvedeno níže.
Je to nutné
Základní znalost CSS a HTML
Instrukce
Krok 1
Vezměme jako základ nejběžnější schéma rozvržení stránky - tři bloky umístěné jeden nad druhým. Horní část (záhlaví) by měla být vždy zarovnána k hornímu okraji okna, spodní část (zápatí) - ke spodnímu okraji a hlavní část (tělo) by měla vždy vyplňovat veškerý prostor mezi nimi. Zdrojový kód musí obsahovat odkaz na přechodnou specifikaci XHTML 1.0 a popis stylů musí být umístěn v externím souboru CSS (aby nedocházelo k problémům s Opera 9. XX). HTML popis struktury musí být umístěn v hlavní tělo stránky. Začne to samozřejmě od horního bloku, do značky, do které by měl být umístěn atribut identifikátoru s hodnotou, například divHead:
Blok záhlaví.
Hlavní blok by měl sestávat z dvojice vnořených bloků. Vnější bude mít identifikátor divOut a vnitřní - divContent:
Hlavní obsah.
Zápatí je nastaveno na divFoot:
Zápatí stránky.
Krok 2
Celý HTML kód stránky by měl vypadat takto:
Tři bloky
@import "style.css";
Toto je blok záhlaví.
Hlavní obsah.
Toto je zápatí stránky.
Krok 3
Popis stylu implementuje následující mechanismus rozložení: střední blok (divOut) je nastaven na 100% výšky, horní blok (divHead) bude mít absolutní umístění a spodní - relativní. V hlavním bloku obsahu (divContent) musí být nahoře volné místo rovné výšce bloku nadpisu, aby nepřekrývalo hlavní obsah stránky. A spodní blok (zápatí) by měl mít záporný okraj nahoře, rovný výšce tohoto bloku. Tím se zvýší nad spodní okraj okna prohlížeče. Tento mechanismus lze implementovat pomocí souboru css s následujícím obsahem: * {margin: 0; výplň: 0}
html, tělo {výška: 100%;} tělo {
pozice: relativní;
barva: # 000;
}
#divOut {
okraj: 0;
min. výška: 100%;
pozadí: #FFF;
barva: # 000;
}
* html #divOut {výška: 100%;}
#divHead {
pozice: absolutní;
vlevo: 0;
nahoře: 0;
šířka: 100%;
výška: 80px;
pozadí: # 2F5000;
přepad: skrytý;
zarovnání textu: na střed;
barva: #FFF;
} #divFoot {
pozice: relativní;
jasné: oba;
horní okraj: -60px;
výška: 60px;
šířka: 100%;
barva pozadí: # 2F5000;
zarovnání textu: na střed;
barva: #FFF;
}
.divContent {
šířka: 100%;
plavat vlevo;
polstrování: 81px;
} Název, který jste určili pro šablonu stylů v kódu HTML, je style.css.
