Jak nastavit, aby se zápatí části stránky („zápatí“) drželo dolního okraje okna - to je pravděpodobně nejčastější problém v rozložení stránek webu. Samozřejmě existují řešení a je jich několik. Níže je uveden jeden způsob, jak zajistit, že je zápatí vždy stisknuto na konec stránky, bez ohledu na množství obsahu a typ prohlížeče.
Je to nutné
Základní znalost CSS a HTML
Instrukce
Krok 1
Vezměme si jako příklad jedno z typičtějších schémat stránkování - bude mít podkroví (záhlaví), hlavní blok a zápatí. Samozřejmě, pokud je to nutné, můžete do hlavního bloku vložit několik sloupců, ale nebudeme to zde dělat, zaměříme se pouze na neumisťování zápatí. HTML kód stránky bude začínat deklarací specifikace:
Mezi značky a kromě názvu stránky umístíme indikaci kódování: Stejně jako odkaz na externí soubor CSS obsahující popis stylů: @import "styles.css"; Nebudeme umisťovat popis stylů přímo do html kódu stránky, aby nedocházelo ke komplikacím s prohlížečem Opera deváté verze. Mezi tagy a umístěte blokovou strukturu stránky. První je samozřejmě razítko. Dáme mu identifikátor záhlaví, aby bylo možné nastavit styly pro tento konkrétní blok:
Tato hlavička je vždy v horní části okna.
Pak - hlavní blok stránky. Bude se skládat ze dvou vnořených - vnější (identifikátor - vnější) a vnitřní (identifikátor - vnější obal):
Toto je hlavní část.
A nakonec zápatí:
Je to zápatí - vždy v dolní části okna!
Celá stránka bude vypadat takto:
Jak zatlačit na zápatí
@import "styles.css";
Tato hlavička je vždy v horní části okna.
Toto je hlavní část.
Je to zápatí - vždy v dolní části okna!
Krok 2
Nyní přejdeme k obsahu šablony stylů. Implementuje následující schéma: blok hlavní stránky bude nastaven na 100% výšky, nadpis bude absolutně umístěn a zápatí bude relativně. Aby se zabránilo nadpisu v překrývání hlavního obsahu stránky, je tento hlavní obsah umístěn do dalšího pole v hlavním poli a toto další pole je nastaveno na horní okraj rovný výšce pole nadpisu. A zápatí dostává záporný horní okraj, který se rovná jeho výšce - tímto způsobem bude zvýšen nad spodní okraj okna do jeho plné výšky. Celý obsah souboru css: * {margin: 0; výplň: 0}
html, tělo {výška: 100%;} tělo {
Černá barva;
pozice: relativní;
}
#outer {
min. výška: 100%;
okraj: 0;
pozadí: bílá;
Černá barva;
} * html #outer {výška: 100%;}
#header {
pozice: absolutní;
nahoře: 0;
vlevo: 0;
šířka: 100%;
výška: 70px;
pozadí: # 304a00;
přepad: skrytý;
barva bílá;
zarovnání textu: na střed;
} #zápatí {
pozice: relativní;
horní okraj: -50px;
jasné: oba;
šířka: 100%;
výška: 50px;
barva pozadí: # 304a00;
barva bílá;
zarovnání textu: na střed;
}
.outerwrap {
plavat vlevo;
šířka: 100%;
výplň: 71px;
} Tento soubor by měl být uložen s názvem, který jsme zadali v html kódu stránky - styles.css.
