Jak jsem již zmínil v poslední článku, existují 3 způsoby, kterými můžete vytvořit lay-out pro svůj web. Rámy, tabulky nebo tzv. striktní div/CSS. Rámy snad ani nemusím komentovat, ovšem horší je to s tabulkami. I dnes mnoho webů používá tento nesprávný způsob rozvržení. Tabulka je určena pro zobrazování tabulkových dat, a ne pro layout celého webu. Na popud všech těch stránek / tabulek jsem se rozhodl napsat následující tutoriál. Doufám, že Vám alespoň trochu pomůže. To by snad na úvod stačilo, pustíme se do toho.

Tento článek je z roku 2007, některé zde uváděné postupy proto mohou být poněkud zastaralé. Pokud tě ale zajímá, jak se stylovalo v dobách pozdního středověku, můžeš se mnohému přiučit. (Často zmiňovaný Internet Explorer byl tehdy ve verzi 6, nanejvýš 7.)

Nejdřív si vytvoříme jednoduchou (x)HTML stánku a vhodně do ní umístíme divy. Divů není nikdy dost, a když náhodou jeden neostylujeme, nic se nestane. Kostra by mohla vypadat nějak takto. Do stránky zatím nebudeme vkládat žádný obsah a pustíme se do samotného stylopisu.

První a největší problém, se kterým se potýkají méně zkušení webmasteři je automatické ostylování. Spousta elementů v HTML má přednastavené některé vlastnosti. Nejčastěji to bývá margin, padding, text-indent a border. Nejhorší na tom všem je, že různé prohlížeče si elementy různě stylují. Například co je v IE padding je ve Firefoxu margin. Tenhle problém vyřešíme resetem všech možných automatických vlastností.

Základem všeho je takzvaný "hvězdičkový reset". Dále je nutné si uvědomit, co všechno použijeme a u kterých elementů si prohlížeče automaticky nastavují atributy. Určitě nechceme v IE modrý rámeček okolo každého obrázku, který je odkaz, nebo také tučný text v tabulce (dělá také pouze IE). Vynulování marginů a paddingů musíme zopakovat i pro body a všechny nadpisy. (Z neznámého důvodu na ně neplatí hvězdičkový reset.) Také budeme používat seznamy, a nechceme je přece mít tečkované, či očíslované...

Resety by mohly vypadat nějak takto:

* {
	border: 0;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

a img { 
	border: 0; 
}

html, body { 
	margin: 0; 
	padding: 0;
}

ul, ol { 
	list-style: none; 
}

table, td, th { 
	border: 0; 
	font-size: 1em; 
	font-weight: normal; 
}

Nyní už se můžeme pustit do základů samotného stylu stránky. Potřebujeme definovat spoustu vlastností: jejich neustálého opisování se zbavíme zápisem přímo pro body. Tam doporučuji definovat základní formátování písma, barvu/obrázek na pozadí a zacentrování textu. To je nutné opět kvůli IE, aby nám zarovnal na střed hlavní div. Pro ten, (v našem případě .all) zarovnání textu redefinujeme nalevo. Ten už by měl obsahovat pouze informace o svém vlastním zobrazení. Margin: odsazení shora, zleva a zprava, barvy, rámeček a vnitřní okraj pouze horní a spodní. Pevnou šířku nastavíme do 780px, abychom měli web optimalizovaný i pro rozlišení 800x600. Důležitou roli hraje v něm vnořený div .hlavni. Význam je jediný: ostylováním odsadit obsah od okrajů. K tomu sice slouží atribut padding, ovšem v takovém případě bychom se setkali se snad jedinou chybou Firefoxu a Opery: prohlížeč přestane dodržovat pevnou šířku. Výškou se zatím zabývat nebudeme, ta přijde na řadu později.

body {
	background: #e5e5e5;
	font: normal normal 0.7em tahoma, arial, verdana, sans-serif, helvetica;
	letter-spacing: .1em;
	line-height: 1.7;
	text-align: center; 
}

.all {
	background: #fafafa;
	border: 2px solid #800000 ;
	height: auto;
	margin: 50px auto 0 auto; 
	padding-bottom: 8px; 
	padding-top: 8px; 
	text-align: left;
	width: 740px;
}

.hlavni {
	border: 1px solid black;
	margin: 0 8px 0 8px;
	width: auto;
	height: auto;
}

Shrnutí: pro body text-align: center; Pro div .all margin: auto; padding-top, bottom a pevná šířka. Pro div .hlavni automatická šířka a odsazení zleva a zprava pomocí marginu. To hlavní bychom měli; nyní už můžeme vesele sázet další divy, které budou všechny pěkně odsazené. Začneme hlavičkou - automatická šířka, pevná výška (zde poprvé) ale žádný margin ani padding. Dále je tu div pro obsah: v něm bude vnořené menu a pak i obsah samotný. Opět automatická šířka, a zatím žádné vnitřní ani vnější okraje. V našem divu .obsah budou vnořené další dva: .content a .sidebar. Sidebar bude menu, které umístíme třeba nalevo, a v divu .content už bude čistý obsah - texty, obrázky aj. V tuto chvíli je ale důležité rozvržení v HTML. Jakýkoli div, který chceme umístit nalevo či napravo musí v kódu předcházet zbytku - tzn. textu, který ho bude obtékat.

Ale nyní už se pustíme do zatím nejtěžšího kroku: umístění dvou objektů vedle sebe. K tomu slouží atribut float. Našemu sidebaru, který máme v kódu dřív než textový obsah dáme float: left; A hurá, dva divy jsou vedle sebe. Dále je potřeba myslet na obtékání textu - proto .contentu nastavíme patřičný padding: a jelikož jsme menu umístili nalevo, potřebujeme levý padding. Ten se rovná součtu šířky sidebaru + vlastnímu odsazení textu. Já jsem zvolil šířku sidebaru 180px + 15px odsazení textu. Jenže stále ještě nejsme za vodou - nyní už se musíme věnovat i výšce. Zatím jsme nastavovali všude automatickou, a sidebar je první div, který bude mít pevnou výšku. Ta po přičtení k výšce hlavičky, patičky a vnitřních okrajů bude dávat minimální výšku celé stránky. Zvolil jsem 370 pixelů. Už můžeme na stránku vložit nějaký text a prohlédnout si, jak to vlastně vypadá.

Pak je na řadě patička. Patičce nastavíme opět automatickou šířku, ale také automatickou výšku. Díky té pak můžeme horním a spodním paddingem vycentrovat text vertikálně. Zde se setkáme s druhým a posledním nedostatkem Firefoxu - jelikož předchozí kód obsahuje objekt, který má být obtékán, s patičkou se stane to samé. Vyřešíme to velice jednoduše atributem clear: both; (i když by stačilo pouze clear: left;) A máme pěknou patičku, která se zobrazí na konci stránky, ale nemáme ještě vyhráno. Nyní musíme otestovat, jak se naše stránka bude chovat po přidání textu, který je delší než samotná výška sidebaru, a po umazání textu. Chceme přece text pěkně odsazený, za jakýchkoli okolností. Pro Operu a Firefox existuje pěkná vlastnost min-height, ovšem IE nás tady znovu zradí. Pro něj definujeme spodní margin sidebaru. V tuto chvíli bychom už měli být za vodou, a věnovat se pouze stylu vlastního obsahu webu. Zápis v CSS souboru by mohl vypadat nějak takto:

.hlavicka {
	width: auto;
	height: 120px;
	background: #ccc;
	border-bottom: 1px solid black;
	text-align: center;
}

.obsah {
	width: auto;
	min-height: 400px;
	margin: 5px 15px 0 15px;
	padding-bottom: 5px;
}

.sidebar {
	float: left;
	width: 180px;
	height: 370px;
	min-height: 370px;
	border-right: 1px solid #FF8080;
	margin-bottom: 5px; 
}

.content {
	padding: 0 0 0 195px;
}

.paticka {
	clear: both;
	width: auto;
	height: auto;
	padding: 5px 0 5px 0;
	border-top: 1px solid black;
	text-align: center;
}

Při definovaní horních a spodních paddingů/marginů máte poměrně volnou ruku - pouze dbejte na to, aby byl obsah vždy odsazený, a to jak při minimální možné výšce, tak při velice dlouhém textu. V tuto chvíli máme layout už v podstatě hotový, chybí už jen nějaké pěkné menu a nastylování nadpisů. To zde moc rozebírat nebudu, pouze základy: odkazy v patičce vytvoříme pomocí seznamu, aby při zobrazení stránky bez stylu byl text přehledný. Jeden řádek z něj pak uděláme pomocí display: inline; pro li. V hlavním menu zase nebudeme pro samotné li definovat nic, pouze pro [ul li a] nastavíme display: block, nějaký padding a odsazení seznamu, pro pěkný hover efekt.

Do stylu jsem přidal nějaké ty atributy pro nadpis, odstavec a odkazy a výslednou stránku si můžete prohlédnout / stáhnout zde:

index.htm
style.css
layout1.zip

Edit 8. 5. 2007: Všiml jsem si toho až teď, ale v obou stránkách jsem měl špatně doctype respektive odkaz na dtd dokument. To je samozřejmě jen detail, funkčnost stránky to nijak neovlivní.

Edit 25. 4. 2020: Dal jsem pryč to otřesné xHTML. I když je to článek starý a tehdy se takto opravdu kódovalo, nechci tu nechávat staré zlozvyky všem na očích. Stejný osud postihl i všechny IDčka v kódu a charset ISO-8859-2. Jinak jsem ale nic neměnil, každá z těch definic měla svůj smysl.