Brouzdej.cz

Tvoříme web: plovoucí layout v CSS

Jak vytvoříme pomocí kaskádových stylů jednoduchý vzhled svého webu? Jednoduše! Stačí využít vlastnosti float a pomocí triku vyřešit špatné zobrazování pozadí v prohlížeči Mozilla.

Ještě než se pustíme do tvorby své stránky pomocí CSS layoutu, vyplatí se zmínit výhody, které nám kaskádové styly dávají. Jednou z hlavních výhod je jejich velikost. Jestliže jsou kaskádové styly použity při tvorbě celého vzhledu, je často výsledný HTML a CSS soubor velmi malý. Pro návštěvníky to představuje výrazné zrychlení stránek. Prohlížeč může správně napsaný web vykreslit a zobrazit výrazně rychleji než obdobnou variantu s klasickými tabulkami. Stránky vytvořené v CSS se také mohou zobrazovat nezávisle na použitém čtecím zařízení. Například SMS Brouzdej.cz zobrazíte pohodlně při brouzdání po wapu na displeji svého mobilního telefonu či PDA. Není potřeba vytvářet zvláštní stránky pro tyto mobilní přístroje ani provádět složitou optimalizaci. Styly rovněž poskytují větší množství efektů a dávají tvůrcům do ruky opravdu mocný nástroj. Webmasteři si často neuvědomují i další výhodu stylů. Protože výsledný dokument obsahuje méně HTML značek, bývá čitelnější pro vyhledávací roboty. Tato výhoda samozřejmě neplatí v okamžiku, kdy to tvůrce stránky přežene a převážnou většinu dokumentu zaplní tagy DIV nebo SPAN. Přesto mohou být weby vytvářené pomocí CSS přístupnější a použitelněější než jejich konkurenti v tabulkovém layoutu. Styly mají i své mouchy. Především je to rozdílná podpora vlastní v prohlížečích. Tvůrce stránek musí své dílko trpělivě testovat ve všech dostupných browserech. Některé chyby prohlížečů je nutné obcházet pomocí CSS hacků a stránka ve stylech je náchylnější k "rozhození". Jak tohle udělám v CSS? Pokud chcete vytvářet své stránky pomocí CSS, musíte změnit způsob myšlení. Prvním krokem by mělo být vytvoření čistého HTML dokumentu a volba logické struktury. Nadpisům přiřadíte tag Hx, text vložíte do odstavců a zcela zapomenete na veškeré další deklarace typu B, I, FONT a jiné. Získáte čitelný obsah, který se návštěvníkům zobrazí v této podobě s vypnutými styly. Teprve nyní nastal čas definovat vlastní vzhled. Do hlavičky (HEAD) vložíme Právě jsme omezili všechny starší prohlížeče (např. IE 4.0 a nižší) v načítání našich stylů. Těmto prohlížečům se zobrazí jen čistě strukturovaná stránka. Vlastní plovoucí layout Chceme mít na stránkách dva sloupečky - podobně jako je vyřešené Brouzdej.cz a řada jiných webů. Při psaní CSS rozlišujeme mezi tím, zda je prvek na stránce umístěn jen jednou anebo několikrát. Pokud používáme prvek jen jednou, napíšeme před jeho název znak #. Otevřeme si nyní nový textový soubor, uložíme jej jako styl.css a začneme psát své definice. #obsah { width: 600px; float: left; } Co to znamená? Vytvořili jsme si prvek, který bude na stránce uveden pouze jednou. Jeho šířka bude 600 pixelů a vlastnost float nám určuje, že se bude jednat o plovoucí prvek. Teoreticky bychom nemuseli určit vlastnost float, ale uvedli jsme jí proto, abychom ošetřili špatné zobrazování pozadí v prohlížeči Mozilla. Nastal čas vytvořit část stránky, kde bude zobrazen hlavní text. Menu totiž zarovnáme na pravou stranu. #levy_sloupec { width: 480px; float: left; } Ani to nebolelo a máme vytvořený levý sloupeček. Zbývá nám ještě doplnit menu do pravého sloupce. #pravy_sloupec { width: 100px; float: right; } Jsme hotovi s přípravou stylů, takže se můžeme podívat na samotnou HTML stránku, kam vložíme neutrální značky DIV. Vkládáme je pochopitelně do těla dokumentu (BODY).

Během několika málo minut jste s mojí pomocí připravili základ pro vytvoření nového vzhledu svých stránek. Příště si ukážeme, jaká další kouzla můžete s CSS provádět a společně vymyslíme naší první WWW stránku. Uvítám vaše dotazy, přání a připomínky na které se pokusím v pokračování tohoto seriálu odpovědět.

| DarkMaster