Čištění klávesnice

Po té co jsem dal pryč svůj počítač a monitor, přišl čas i na mou klávesnici. Mám hezký bezdrátový set klávesnice a myši Microsoft Wireless Optical Desktop Elite. Než jej všek předám někomu dalšímu, musím vyčistit klávesnici. Jelikož jsem u počítače trávím poměrně hodně času a netajím, že občas si k dobré práci dím něco na zub. Přesto, když jsem dnes ráno odtranil všechna tlačítka, lekl jsem se, kolik se toho za ty tři roky nehromadilo. No posuďte sami.

Patička stránky fixovaná na spodek

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 -->
   &copy; 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č.