V minulém díle jsem psal o tom, čím bysme měli začít, než začneme se samotným kódováním kompletního webu a jakým způsobem u toho přemýšlet. Teď se podíváme na praktické ukázky, jak vlastně při kódování postupovat.
Když koukneme na různé webové stránky, zjistíme, že se převážně všechny skládají z následujících bloků:
- hlavička,
- navigace,
- obsah,
- levý nebo pravý sloupec,
- patička
a všechny tyto jednotlivé bloky jsou součástí jednoho hlavního bloku. Osobně si tyto bloky, o kterých vím, že se nebudou různě duplikovat, značím identifikátorem a volím jednoduché názvy. Kostra stránky může vypadat následovně:
<div id="main">
<div id="header">Hlavička</div>
<div id="nav">Navigace</div>
<div id="content">Obsah</div>
<div id="side">Postranní blok</div>
<div id="footer">Patička</div>
</div>
V některých případech bude element <div id="main"> nadbytečný, ale pokud přemýšlíte nad vlastním workflow a chcete mít všechny další projekty řešené ze stejného počátku a nechcete přemýšlet, jestli zrovna na tomto projektu máte nebo nemáte nějaký z hlavních elementů, ničemu vadit nebude, naopak.
Znovu připomenu, že blokovým elementům je zbytečné nastavovat jakýkoli pevný rozměr, pokud chceme, aby se natahoval - a na výšku by se měl umět natahovat vždy, protože nikdy nevíte, jak velké písmo bude návštěvník mít nastavené.
Ukázka stylování
Díky hlavnímu elementu #main můžeme omezit šířku naší stránky na minimální a maximální, ukázka kódu. Pro zobrazení pouze samotného výsledku dopište na konec adresy spojovník, takto. Zmenšováním okna prohlížeče uvidíte, jak se stránka přizpůsobuje jeho šířce, bude tak použitelná pro návštěvníky s různým rozlišením.
Stránka se hezky natahuje, ale žádný z bloků nemá vnitřní okraj padding a máme několik možností, jak jim ho nastavit:
- tak, že u každého pravidla v CSS ho připíšeme (v případě, že děláme nedomyšlený design tuto volbu asi využijeme, ale není to hezké řešení, protože se nechceme pořád opakovat a v případě změny je ztrátou času dohledávat všechna místa, která musíme upravit),
- přidáním třídy přímo na hlavní element tak, že vznikne například <div id="main" class="block"> s tím, že u takových elementů musíme nastavit box-sizing na hodnotu border-box, aby šířka nepřetekla, ale způsobíme tím nefunkčnost
ve staršíchv hodně starých prohlížečích, - zanořením elementu s třídou block, in nebo nějakým jiným názvem do hlavního elementu, což nám nerozbije stránka hlavně ve starších prohlížečích.
Pro naprostou kompatibilitu jednoduše zvolím poslední možnost.
Triky s vnořenými elementy
Vkládáním a zanořováním dalších elementů je dobré se držet jednoduchého pravidla:
rodič není přesahován žádným svým potomkem.
Zkuste nahlédnout na stromovou strukturu HTML jako na pytlíky Vašich oblíbených čipsů, kde jedno balení může obsahovat další pytlíky, ve kterých mohou být opět další pytlíky :-)
Díky této představě budete stylovat elementy správně a logicky jako v reálném světě - co je uvnitř a něčím obalené, nemůže zasahovat ven, pokud obal nemá díru.
<div class="categories">
<div class="category">
První kategorie
</div>
<div class="category">
Druhá kategorie
</div>
</div>
S následujícími styly:
.categories .category {
float: left;
width: 180px;
}
Co je na ukázce špatně? Otevřete si tuto ukázku na samotné stránce a zkontrolujte prvek pro kategorie. Pokud na něj najedete, uvidíte:
Prohlížeč ukazuje, že výška obalového elementu pro kategorie je nulová. Obsahuje ale další dva elementy, na které pokud najedete, výšku zobrazí - rodič je tedy přesahován svými potomky a to je chyba.
Problém se netýká pouze plovoucích elementů jako v ukázce, kterou jsem ale zvolil záměrně. Nejprve vyřešíme problém, aby i rodič byl vysoký tak, jako jeho potomci, máme několik možnosti:
- Na hlavní element .categories aplikujeme vlastnost overflow: hidden; za předpokladu, že žádný další element nebude rodiče přetékat, viz vyjímky,
- Zvolit metodu clearfix,
- Přidat další čistící element.
Podobně jako samotné elementy by neměly přesahovat přes svého rodiče, tak ani jejich okraje, rámečky, atp.
Vyjímku tvoří nějakým způsobem posunuté elementy, například kolečko informující o počtu, které je pozicováno absolutně a mimo hlavní element, takže není možné použít overflow: hidden;
Pokud se budete tohoto pravidla držet, neuděláte chybu a Váš web bude méně náchylný k rozpadávání a bude dávat smysl tomu, kdo jej po Vás například v budoucnu převezme.