Potřeboval jsem vytvořit patičku, která bude za každé situace na dolním okraji stránky. Na webu je spousta návodů, ale žádný nefungoval správně (některé vůbec), takže jsem musel sám experimentovat. Nalezl jsem elegantní řešení.
Struktura XHTML souboru
Není třeba použít nějaký tag na celou stránku, dokonce mi to v takovém případě připadá jako sémantický nesmysl. Do body vložte:
<div id="footer">
<!-- obsah patičky -->
© 2009 Srpak Ladivo
</div>CSS kód
Tady přichází celá genialita mého řešení. Nastavíme position na absolute, nemá-li jeho rodič nastaven position:relative, pozice je dána k celé stránce. Aby vše bylo dole dodáme i bottom: 0 Nijak zvášť geniální, že? Potřebujeme také, aby patička byla přes celou šířku obrazovky. Samotné width: 100% nám spůsobí jeden problém. Pokud bude šířka stránka menší než nejširší číst stránky, patička zaujme jen velikost okna. Musíme přidat i atribut min-height.
#footer {
position: absolute;
bottom: 0;
width: 100%;
min-width: 960px;
}Závěr
Hlavní výhody jsou:
- Zcela validní kód (CSS i XHTML)
- Zcela logické CSS
- Zcela sémantické XHTML
- Jednoduchost
Funguje v Safari, FF a IE7 (vše Windows). Myslím, že by s tím neměl mít problém žádný prohlížeč.
Žádné komentáře:
Okomentovat