Dolní horizontální blok rozvržení stránky se často označuje jako „zápatí“. V něm, stejně jako v jiných blocích stránky, jsou umístěny designové prvky, ale na rozdíl od jiných často vznikají specifické problémy s umístěním tohoto konkrétního bloku. Jsou spojeny se skutečností, že různé prohlížeče chápou standardy jazyka CSS odlišně a může být docela obtížné dosáhnout, aby zápatí bylo na spodním okraji okna prohlížeče. Níže je uveden kód jednoho z řešení tohoto problému.
Nezbytné
Základní znalost CSS a HTML
Instrukce
Krok 1
Na první řádek zdrojového kódu stránky vložte odkaz na specifikaci XHTML 1.0 Transitional:
Krok 2
Umístěte hlavní bloky struktury stránky do těla dokumentu (mezi značky a). Blok, do kterého bude umístěn hlavní obsah, se musí skládat ze dvou vnořených vrstev. Například nechte vnější mít identifikátor OuterDiv a vnitřní - InnerDiv:
Zde bude hlavní obsah stránky.
Za ně umístěte zápatí blok s identifikátorem, například FooterDiv:
Zápatí stránky.
Krok 3
Umístěte do hlavní části kódu HTML (mezi značky a) odkaz na externí soubor s popisem stylů css:
@import "footerStyle.css";
Krok 4
Uložte kompletní kód stránky předlohy do souboru s příponou html. Může to vypadat takto:
Lisované zápatí
@import "footerStyle.css";
Zde bude hlavní obsah stránky.
Zápatí stránky.
Krok 5
Vytvořte soubor stylů - soubor ve formátu prostého textu, který by měl být uložen s příponou css a názvem, který jste zadali v kódu HTML (footerStyle.css). Napište do tohoto souboru následující popisy stylů pro bloky použité na stránce:
* {okraj: 0; výplň: 0}
html, tělo {výška: 100%;}
tělo {
pozice: relativní;
barva: # 222222;
}
#OuterDiv {
okraj: 0;
min. výška: 100%;
pozadí: #aaaaaa;
barva: # 222222;
}
* html #OuterDiv {výška: 100%;}
#FooterDiv {
pozice: relativní;
jasné: oba;
horní okraj: -60px;
výška: 60px;
šířka: 100%;
barva pozadí: DarkBlue;
zarovnání textu: na střed;
barva: #eeeeff;
}
. InnerDiv {
šířka: 100%;
plavat vlevo;
}
