Smitka development

WEBtriky I.

Vítám Vás u nového webtvůrčího miniseriálku :-)
Důvodem k jeho vzniku jsou časté dotazy typu "jak na web udělat...". Proto jsem se rozhodl přímo ukázat některé odpovědi v praxi. Cílem je tedy objasnit některé praktiky, které při návrhu používám. Naopak není cílem předvést kompletní řešení, vyladěné a okamžitě použitelné.

V postupu budou posány klíčové praktiky, ve zdrojovém kódu výsledku budou podrobněji okomentovány i další.
A rovnou se pustíme do práce...

Úkol

Dnes vytvoříme dvousloupcový layout (postup bude platit i pro vícesloupcový) s tím, že chceme mít část s menu odlišenou barevně a borderem oddělenou.
Vertikálně bude mít web 3 části - hlavičku, obsah a patičku - reprezentované blokem <div> a vycentrované.
<div id="hlavicka"></div> <div id="obsah"></div> <div id="paticka"></div> Tím se dostáváme k problémku č.1

Centrování stránky

Jednoduchá věc, která ale s sebou nese drobný zádrhel a tím je chování jednotlivých prohlížečů.
IE centruje vše pomocí css vlastnosti text-align:center, to však neplatí v Mozille, která tímto centruje jen obsah prvku. Zde se používá automatické vytvoření okrajů prvků - margin:auto. Zároveň nadřazenému prvku - - nastavíme text-align na center.

Vertikální centrování v blocích

Další věc, kterou si budeme přát v hlavičce a patičce je, aby jejich textový obsah byl vycentrován vertikálně. To provedeme tak, že jim nastavíme vlastnost line-height na stejnou hodnotu, jako je jejich výška.
body {text-align:center} #hlavicka{margin:auto; width:758px; height:90px; line-height:40px;} #obsah {margin:auto; width:758px;} #paticka{margin:auto; width:758px; height:40px; line-height:40px;} horizontalni cleneni
Layout teď již máme horizontálně dobře členěný a posunme se k náročnější části.

Tvorba sloupců

Základní idea je taková, že kolem části se samotným obsahem bude vlevo plavat menu (případně vpravo další sloupec).
V bloku obsah vytvoříme další 2 bloky - menu a text.
Pro menu nastavím float:left - tím bude plavat vedle následujícího bloku (musí být nadefinováno před blokem, vedle kterého má plavat).
Dále pro něj potřebujeme vyhradit místo - bloku obsah nastavím margin-left na šířku menu + pár pixelů rezervy (kvůli rozdílnému vypočítávání rozměrů prohlížeči, kdyby místo došlo umístí se menu pod blok, což je velmi ošklivé).
Nyní máme text a menu vedle sebe, ale je zde menší problém, který si na počátku možná ani neuvědomíme, tim je rozdílná výška.
Pokud je dostatek textu, je vše v pořádku a menu vesele plave vedle textu. Pokud je však blok menu delší, stane se další ošklivá věc - odskočí patička.
Tomu může zabránit css vlastnost clear:both, které zabrání bloku, aby vedle něj další bloky obtékaly. První nápad je použít tuto vlastnost na patičku. nyní by to účel splnilo, ale my použijeme něco trošku jiného. Na konci bloku text uděláme nový blok s nastaveným clear:both - to způsobí při delším menu natánutí bloku text na potřebnou velikost (v dalším kroku to markantně ulehčí práci a nervy). Rozdělení na sloupce je nyní hotové.
<div id="obsah"> <div id="menu"></div> <div id="text">  <div class="clear">&nbsp;</div> </div> </div> #text {width: 572px; margin-left: 170px;} #menu {float: left; width: 158px;} .clear {clear: both;} sloupce

Optické rozdělení sloupců

Nyní přichází hlavní trik :-). Chceme mít jednolitvé sloupce barevně a čarou oddělené.
První nápad, který by se dal použít je nastavení barvy pozadí bloku obsah a jiné barvy bloku text, který by zároveň měl nastaven border-left.
Tento způsob bude fungovat, ale má své "ale". Tím je nepříjemnost, že bude potřeba velmi důkladně nastavit paddingy a marginy pro různé prohlížeče, což ve finále nemůsí být vůbec triviální...
Namísto toho doporučuji (a nemusíte souhlasit), použít obrázek na pozadí s namalovanými bordery a barvamy pozadí pro prvek obsah. Tím je zaručené správné zobrazení borderu v celé výšce obsahové části. Považuji to za velmi elegantní řešení a nejsme vázáni jen čarou, lze přidat stíny, ornamenty a další efekty. Pro doladění pozicování pak stačí lehce pozměnit šířky bloků, případně marginu.
opticke rozdeleni

Detaily

Ke spokojenosti zbývá doladit několik drobností. Například chceme ve sloupci menu zobrazovat další informace, opět opticky oddělené od samotného menu. K tomu stačí do sloupce mneu přidat další blok, oddělený například borderem navrchu. Samotné položky menu mohu zvýraznit po najetí myši pseudoelementem :hover. Tyto detaily naleznete ve zdrojovém kódu příkladu.

Něco navíc

Mimo postupu tovrby layoutu si nakonec představíme způsob, jak na stránce zobrazit pohodlněji část nějakého zdrojového kódu.
Jedná se css vlastnost white-space, která může nabývat hodnot normal, nowrap (text nebude automaticky zalamován), pre (v textu zůstanou fukční netisknutelné znaky - mezery, tabulátory, nové řádky - jako html tag PRE).
Pomocí této vlastnosti + dalších pomocných (overflow, barvičky,...) přeformátujeme tag code a výsledkem nám bude pěkně formátovaný zdrojový kód :-).
Pro správnou funkčnost v IE, je potřeba nastavit DOCTYPE na strict. Podrobnosti opět naleznete v příkladu.

Ukázkový příklad
linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development