CSS a XHTML není žádná věda (7.díl)

« zpět na CSS a XHTML

Dokončujeme základní layout webu.

Dokončujeme základní layout webu

Z předchozího dílu máme připravenu základní kostru (šablonu) budoucího webu, pokud jste pracovali se mnou a neudělali někde chybičku, měl by váš dokument vypadat takto. V dnešním díle si dokončíme layout a naučíme se něco o takzvaných plovoucích (float) prvcích.

Přestože byly původně určeny k jiným účelům (kupříkladu k vložení obrázku do souvislého textu, který takto umístěný obrázek obtékal -- znáte třeba z Wordu), webdesigneři brzy pochopili, že je lze s úspěchem využít i k řízení vzhledu stránky. Jistě jste se už při tvorbě webu setkali s termínem třísloupcový layout, který většinou bývá tvořen právě plovoucími prvky. I my je nyní s úspěchem využijeme. Jinak dle specifikace CSS je plovoucí prvek takový prvek, který je vyjmut z toku dokumentu a umístěn k levému (float: left) nebo k pravému (float:right) omezujícího bloku. Aby mohl tento prvek plavat, musí mít nastavenu šířku - width (kromě několika specifických případů, ke kterým se dostaneme později). Omezujícím blokem se přitom rozumí blokový prvek plovoucímu nadřazený (může jím být i element BODY, pokud plovoucí prvek umístíte přímo do jeho těla). Pěkný popis plovoucích prvků a podrobnější vysvětlení naleznete na webu Petra Staníčka, doporučuji alespoň přečíst: pixy.cz. V našem případě takovým nadřazeným prvkem bude blokový prvek, který jsme si označili div id="hlavni".

A ještě krapet teorie. Výška blokového prvku, pokud mu nezadáte výšku explicitně, se bude rovnat výšce obsahu, který bude do blokového prvku vložen. Jinými slovy -- každý blokový prvek se bude na výšku natahovat podle toho, jak dlouhý bude jeho obsah (text, obrázky). Pokud však nastavíte výšku blokovému prvku a výška vloženého obsahu přesáhne výšku takto definovaného bloku, text vám jednoduše vyteče ven a vůbec se dočkáte spousty zajímavých překvapení. Dle specifikace je výše uvedené chování naprosto korektní a správné, ovšem Internet Explorer jde opět svou cestou a výšku bloku, i když jste ji nastavili takříkajíc natvrdo, si prostě upraví dle obsahu a tak ji natáhne. Z uvedeného vyplývá, že webdesigner by měl výšku blokového prvku nastavovat pouze a výhradně tam, kde zná přesnou výšku obsahu (typicky třeba výšku obrázku na pozadí hlavičky webu, jako jsme to udělali my v předchozím díle) a nikde jinde, jinak si přivodí spoustu zbytečných problémů. Ale dost teorie, všechno si ukážeme v praxi a naučíme jeden roztomilý CSS hack.

Z grafického návrhu je patrné, jak bychom měli dále postupovat. Levý sloupec pro obsah bychom nechali plavat vlevo a pravý sloupec pro novinky necháme plavat vpravo, přičemž mu nastavíme šířku danou podle šířky obrázku na pozadí (to je ten tmavomodrý motiv). Jenže -- co s výškou? My dopředu nevíme, kolik obsahu pravý sloupec bude obsahovat a tím pádem dopředu neznáme výšku pravé části webu. Přesto ale potřebujeme, aby se nám pěkně opakovalo to modré pozadí. Jak na to? K uvedenému účelu nám poslouží jeden malý trik a ještě jednou využijeme definici bloku, který jsme si nazvali div id="hlavni" . Máme prozatím tuto definici (a máme na paměti, že výšku tohoto bloku potom odstraníme):

#hlavni { width: 760px; margin: 0 auto; text-align: left; border: 1px solid #000; height: 500px; } Nyní si připravíme jeden menší obrázek, který nám bude simulovat pozadí pravého bloku. Vyřízneme si ho z připraveného grafického návrhu a dostaneme obrázek o velikosti 189x15px, uděláme z něj 16-ti barevný GIF a nazveme si ho třeba pozadi.gif. Dvě připomínky -- vynechte vpravo ten černý proužek simulující rámeček, protože ten jsme definovali v CSS pro blok s názvem hlavni. Za druhé -- nedělejte obrázek příliš malý. Občas se na internetu dočtete, že máte minimalizovat grafiku a že ideální je jako obrázek na pozadí použít třeba obrázek o velikosti 1x1px. Nedělejte to, protože Internet Explorer obsahuje jakousi chybu ve vykreslovacím jádře a výsledkem je, že stránka definovaná s takovýmto pozadím se při posouvání velmi nepříjemně cuká. Nyní donutíme připravený obrázek zaplnit místo k němu určené definicí v CSS. Takže přidáme do definice bloku hlavni následující řádek:

background: url("../images/pozadi.gif") repeat-y right top;

Co jsme to vlastně udělali? Donutili jsme obrázek pozadi.gif, aby se postupně opakoval na svislé ose -- repeat-y a umístili jsme ho doprava -- right top. Teoreticky byste nemuseli definici top uvádět, prakticky ovšem Netscape ve verzi 6 mívá problémy, pokud neudáte polohu obrázku oběma směry (vodorovně -- svisle). Když nyní CSS kód uložíte uvidíte, že obrázek vám pěkně simuluje pravý sloupec a bude se vždy natahovat podle obsahu (přitom bude jedno, jestli bude delší obsah na levé, nebo na pravé straně). A o to nám šlo. viz

Celá definice bloku hlavni tedy nyní vypadá takto:

#hlavni {
width: 760px;
margin: 0 auto;
text-align: left;
border: 1px solid #000;
height: 500px;
background: url("../images/pozadi.gif") repeat-y right;
}


A nyní přišla správná doba na definici dvou plovoucích prvků, které nám vymezí hlavní části našeho webu. Připravíme si v CSS tuto definici a zapneme si kalkulačku, budeme počítat. Podle obrázku víme, že pravý plovoucí sloupec bude mít šířku 189px. Výšku sice neznáme, ale pokud si opět prohlédnete grafický návrh, zjistíte, že byste kvůli nakreslenému tmavomodrému motivu (který pochopitelně umístíme jako pozadí pravého sloupce) potřebovali zachovat minimální výšku. V CSS samozřejmě existuje vlastnost, která vám zmíněnou úpravu umožňuje a jmenuje se min-height. A zde máme další problém, protože tuto velmi potřebnou vlastnost Internet Explorer absolutně ignoruje. Víme přitom, že nastavit jenom výšku height nemůžeme, protože by nám text v ostatních prohlížečích přetékal mimo definovaný blok, zatímco Internet Explorer si bez řečí výšku bloku přizpůsobí obsahu. Co tedy s tím?

Nyní se dostáváme na tenký led takzvaných CSS hacků. Až budete postupně pronikat do odlehlejších zákoutí CSS pozicování, zjistíte, že se bez těchto hacků (zvláště u složitějších layoutů) prostě nehnete. Přesto vám ale doporučuji, abyste těchto nestandardních konstrukcí, které z 99% děláte pro nešťastný Internet Explorer, používali v rozumné míře a jenom tam, kde skutečně jiné řešení neexistuje. V našem případě zvolíme takzvaný podtržítkový hack. O co jde tentokrát? Zkrátka vnutíme Internet Exploreru jinou definici, než ostatním prohlížečům. Všechny vlastnosti začínající podtržítkem _ všechny rozumné prohlížeče ignorují, zatímco Internet Explorer je vesele zpracovává. Nejlépe to pochopíte na praktické ukázce. Vrhněme se do definice pravého plovoucího sloupce, ale předtím si ještě připravíme obrázek na jeho pozadí. Z grafického návrhu vyřízneme onen barevný motiv o velikosti 139x317px a uložíme ho jako 16-ti barevný GIF třeba pod názvem pravy.gif. Tím dostaneme minimální výšku pravého sloupce, kterou potřebujeme zachovat. Celá definice pravého plovoucího sloupce tedy bude vypadat následovně (máme ho v kódu stránky označen jako div id="novinky":

#novinky {
width: 189px;
float: right;
background: #606398 url("../images/pravy.gif") no-repeat right top;
min-height: 317px;
_height: 317px;
}

Co že jsme to zase provedli? Nastavili jsme šířku pravého bloku (dle šířky obrázku pozadi.gif, který nám simuluje jeho pozadí) a nechali jsme ho takzvaně plavat vpravo -- float:right. Dále jsme umístili obrázek pravy.gif na jeho pozadí vpravo nahoru a zároveň jsme nastavili i modrou barvu pozadí (#606398), kdybychom náhodou zvolili pro pravý sloupec bílé písmo (při vypnutých obrázcích by pak čtenáři neviděli nic, jenom bílé písmo na bílé ploše). Pro rozumné prohlížeče jsme nastavili minimální výšku tohoto prvku, min-height: 317px podle výšky motivu. A pro Internet Explorer jsme použili onen podtržítkový hack, který nastaví výšku bloku na také na 317px, _height: 317px. Stane se to, že Mozilla i Opera zachovají minimální výšku prvku a pokud obsah bude vyšší než 317px, prostě blok na výšku roztáhnou. Internet Explorer toto provádí automaticky. Podtržítkový zápis _height ani Mozilla ani Opera neznají, takže ho budou ignorovat. Tím máme připraven pravý plovoucí blok a výsledek by měl vypadat takto

Zbývá nadefinovat levý sloupec, což bude to nejjednodušší, co nám zbývá (máme ho v kódu stránky označený jako div id="obsah":

#obsah {
width: 560px;
float: left;
}

Teď se jistě ptáte, proč jsme vytvořili levý sloupec užší, než by dělal rozdíl mezi šířkou stránky a pravým sloupcem (760px -- 189px = 571px). Důvod je jediný a to ten, že Internet Explorer si prostě občas počítá, co chce. Vstupují do hry dva faktory -- jistě si vzpomínáte na chybný box model IE, který se nám právě neblaze projevil (to je ten černý rámeček, který jsme přidali bloku div id="hlavni" . Druhým problémem je takzvaný 3px float bug Internet Exploreru, se kterým se ještě setkáme. Naštěstí v tomto případě nestandardně nic řešit nemusíme, protože stejně chceme, aby text v hlavním sloupci nebyl přímo nalepen k pravému modrému okraji a tak prostě uděláme hlavní (vlevo plovoucí blok) o něco užší.

A zbývá už jenom patička celého webu, kterou máme označenu ve stránce jako div id="paticka" . Její definice bude vypadat takto:

#paticka {
color: #fff;
background: #000;
border-top: 2px solid #fff;
clear: both;
}


Učinili jsme několik definic. Především jsme nastavili barvu pozadí na černou -- background: #000, dále jsme nadefinovali bílé písmo -- color: #fff, přidali jsme dle grafického návrhu horní bílý rámeček - border-top: 2px solid #fff, a nakonec to nejdůležitější -- definici clear: both. Tato vlastnost nám ukončí všechno obtékání na stránce a umístí patičku pěkně dolů, kam dle svého názvu patří, pod nejdelší plovoucí blok

Poslední úpravou ve stylovém předpise bude zrušení height: 500px v definici bloku div id="hlavni" . Celý zdrojový kód CSS tedy bude vypadat takto:
body {
font-family: Verdana, sans-serif;
font-size: 80%;
background: #fff;
margin: 0;
padding: 10px 0;
text-align: center;
min-width: 770px;
}
#hlavni {
width: 760px;
margin: 0 auto;
text-align: left;
border: 1px solid #000;
background: url("../images/pozadi.gif") repeat-y right;
}
#horni {
height: 75px;
background: #3c4080 url("../images/hlavicka.gif") no-repeat;
}
.textinfo {
background: #000;
color: #fff;
border-top: 2px solid #fff;
}
#logo {
height: 72px;
background: #fff url("../images/fotky.jpg") no-repeat;
border-top: 2px solid #fff;
}
#novinky {
width: 189px;
float: right;
background: #606398 url("../images/pravy.gif") no-repeat right top;
min-height: 317px;
_height: 317px;
}
#obsah {
width: 560px;
float: left;
}
#paticka {
clear: both;
color: #fff;
background: #000;
border-top: 2px solid #fff;
}


Kód stránky je velmi jednoduchý (pokud si troufáte, odstraňte si komentáře, ušetříte nějaký ten KB) a vypadá takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta name="Description" content="Název webu" />
<meta name="Keywords" content="klíčová slova pro vyhledávače" />
<meta name="robots" content="all, follow"/>
<meta name="author" content="Design a kod: Plavacek, http://www.plavacek.net " />
<link rel="stylesheet" href="styles/default5.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
<title>Firma: hlavní stránka</title>
</head>
<body>
<div id="hlavni">
<div id="hlavicka">
<div id="horni"></div>
<div class="textinfo">nějaký text</div>
<div id="logo"></div>
<div class="textinfo">nějaký text</div>
</div>
<div id="obsah">obsah</div>
<div id="novinky">novinky</div>
<div id="paticka">patička</div>
</div>
</body>
</html>

Výsledek si prohlédněte i v Mozille a Opeře. Sami vidíte, že vzhled je totožný a vlastní XHTML kód stránky je minimální. Přesto jsme dosáhli pěkného vzhledu přesně podle grafického návrhu. Oproti tabulkovému kódu jistě lahůdka, nehledě na fakt, že celý vzhled webu nyní řídíte jedním jediným CSS souborem. Kompletní změna vzhledu celé stránky je nyní otázkou několika málo minut bez nutnosti hrabat se v kódu XHTML stránky a dumat nad tím, proč zatraceně je tam sedm vnořených tabulek. Ostatně si to můžete sami za domácí úkol vyzkoušet -- postačí vyměnit obrázky, vyměnit barvy pozadí, změnit velikosti jednotlivých bloků a šmahem ruky dostanete úplně jiný vzhled.

A co je nekrásnější a co každý návštěvník jistě ocení, je výsledná velikost celé stránky: Počítejte se mnou:
CSS styl: 1 KB
kostra XHTML stránky: 1 KB
obrázky na pozadi: 26 KB
suma sumárum: 28 KB, přičemž obrázkům se ještě dají ubrat barvy a tím snížit jejich velikost.

Zkuste si totéž vyrobit v tabulkovém layoutu a porovnejte si velikosti kódu, možná budete sami překvapeni, kolik cenných kb je možné ušetřit. Dalším nezanedbatelným přínosem takto postaveného layoutu je fakt, že nejprve se načte text a teprvé poté obrázky a vůbec celá grafika, takže návštěvník webu nemusí čekat, než se mu načte grafika a může neprodleně studovat vaše geniální texty, kvůli kterým ostatně na váš web zabrousil.

Tak, základní layout máme připraven a v dalších dílech začneme web plnit obsahem. Přeji vám hodně štěstí při dalším studiu. A nezapomeňte mít po ruce knihu Petra Staníčka CSS kaskádové styly a nainstalovaný Accesibility Toolbar pro Internet Explorer, v dalším díle již přijde ke slovu.
Autor: Plaváček

Klientská sekce pro Vás

Spravujte své domény a hosting pohodlně 24 hodin denně

Kontakt pro zákazníky

Technická podpora

PO-NE 9:00-17:00

E-mail: podpora@banan.cz

Online pracovník

Jakub Turek

+420 553 810 250

Online chat

Zvládáme opensource

Na našich serverech jsme ručně ověřili funkci více než 140 opensource systémů, některé z nich nabízíme na jedno kliknutí v administraci.

Hostované domény

7427 domén 6203 1224

Poslední článek - HOMEPAGE PRVKY

O
Ověřit dostupnost domény
Zákaznické centrum: +420 553 810 250podpora@banan.czNápovědaBlog
Neomezený webový prostor,elektronická pošta, www stránky,nebo wordpress na klik.
Technická podpora 900-1700 X
Online pracovník: Jakub Turek
+420 553 810 250
podpora@banan.cz nebo Online chat
Kontaktovat technickou podporu můžete zde
Neomezený webový prostor,
elektronická pošta,
www stránky,nebo wordpress na klik.
Kontaktovat technickou podporu můžete zde
PO-PÁ 900-1700