CSS layout, aneb web bez tabulek - tutoriál

 |  HTML, CSS, JavaScript  |  9 738x

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 lay-out 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, a pustíme se do toho =o)

Nejdřív si vytvoříme jednoduchou (x)HTML stánku a vhodně do ní umístíme divy. (nečti jako Ď =o) ) Divů není nikdy dost, a když náhodou jeden neostylujeme, nic se nestane. Stránka by mohla vypadat nějak takto: index.htm. A protože chceme mít moderní web se vším všudy, začneme rovnou s XHTML 1.0 Strict =o) Do stránky zatím nebudeme vkládat žádný obsah a pustíme se do samotného stylopisu.

Tento článek je z roku 2007, některé zde uváděné postupy proto mohou být poněkud zastaralé. Pokud jsi ale začátečník a hledáš jednoduchý návod, jak nastylovat kostru webu, pak zde i přes stáří článku určitě najdeš šikovné tipy.

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 měly vypadat nějak takto:

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

h1, h2, h3, h4, a img {
  padding: 0;
  margin: 0;
  border: 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, výše zmíněný margin a padding, 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í svrchu, 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ů. (hehe, 5 o za sebou :) ) 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 normal 0.7em Tahoma, arial, Verdana, sans-serif;
  letter-spacing: .1em;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  text-align: center;
}

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

#hlavni {
  border: 1px solid black;
  margin: 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 heuréka, 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í :o). 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;
  text-align: center;
}

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

#sidebar {
  float: left;
  width: 180px;
  min-height: 370px;
  margin-bottom: 5px; /* odsazení od patičky pro IE */
}

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

#paticka {
  clear: both;
  width: auto;
  height: auto;
  padding: 5px 0;
  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 lay-out už v podstatě hotový, chybí už jen nějaké pěkné menu a ostylová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 zde:

index.htm | style.css
A stáhnout: 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í.

Facebook Twitter Google+

Komentáře k článku "CSS layout, aneb web bez tabulek - tutoriál"

Gravatar
Chesterka7 21. 3 2007, 15:19
1/7 Středa 21. Března 2007, 15:19  |  Firefox, Windows XP

caw, pisal si ze vies vytvorit CSS?!

Gravatar
Mike 26. 3 2007, 17:27
2/7 Pondělí 26. Března 2007, 17:27  |  Opera, Windows XP

docela sem přemýšlel, co na to odpovědět... a stále nevím.

Gravatar
sten 2. 4 2007, 18:17
3/7 Pondělí 2. Dubna 2007, 18:17  |  MSIE, Windows XP

hehehehe

Gravatar
Mike 2. 4 2007, 21:59
4/7 Pondělí 2. Dubna 2007, 21:59  |  Opera, Windows XP

Zkus to s velkým S ;-)
je zakázanej jen Sten. Robot se podepisoval s velkým "S", takže sten je povolenej :)

Gravatar
Andrew 25. 4 2007, 16:18
5/7 Středa 25. Dubna 2007, 16:18  |  Firefox, Windows XP

Results 1 - 10 of about 17,100,000 for antispam. (0.09 seconds)...

...fíha, chudák Sten :-) Mimochodem, mockrát děkuju za zpětný odkaz. U mě na Weblogu na Tebe na oplátku také odkazuju, ač to tak nevypadá. Posílám to pouze skriptu away.php, kde přičítám hity - celé bych to udělal AJAXově, jenom to umět... Snad se tedy nezlobíš za to téměř neznatelné zdržení před odesláním správného headeru. Jinak - jakýkoliv další odkaz na některý z Tvých webů rád uveřejním ve stejném sloupečku, místa je tam opravdu dost. Do ikonky Weblogu se pustím asi až dnes večer, včera jsem něco stvořil a imho to nestojí za nic. Ještě jednou díky.

Tak se měj fajn, Andrew. ;-)

Gravatar
Mike 1. 5 2007, 18:07
6/7 Úterý 1. Května 2007, 18:07  |  Opera, Windows XP

jasny, sem si všiml ;-)
však až budeš mít ikonku, tak zas napiš.

zatím :)

Gravatar
Jeninas 19. 10 2007, 16:15
7/7 Pátek 19. Října 2007, 16:15  |  Firefox, Windows XP

Teda, já dělám laye jinak, ale good návod %5

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua