Eric Meyer o CSS – pokračujeme

E N C Y K L O P E D I E

W E B D E S I G N E R A

Eric Meyer o CSS – pokračujeme s kaskádovými styly

profesionáln!

• Převod tabulkového designu do designu CSS.

• Vytvoření stylu pro fotogalerii a finanční zprávu.

• Použití seznamů a odkazů pro víceúrovňové roletové menu.

• Práce se stylem pro weblog a jeho jednotlivé části.

• Využití pozicování pro obrázky na pozadí.

• Design osobní stránky webu.

• Tvorba designu pro

kaskádovou Zenovou zahradu. © Foto: Jiří Heller

www.zonerpress.cz

Eric Meyer

Eric Meyer o CSS – pokračujeme s kaskádovými styly

profesionáln!

Předmluva Douglase Bowmana

xii

Úvod

xiv

PROJEKT 1 Přepracování starších stránek

23

PROJEKT 2 Vytváříme galerii fotografií

53

PROJEKT 3 Formátujeme finanční zprávu

79

PROJEKT 4 Práce s pozadím

101

PROJEKT 5 Seznamy a menu

123

PROJEKT 6 Rozbalovací menu založená na CSS

143

PROJEKT 7 Atraktivní záložky

171

PROJEKT 8 Styl pro weblog

199

PROJEKT 9 Navrhujeme osobní stránku

221

PROJEKT 10 Design zahrady

245

Rejstřík

281

Eric Meyer o CSS profesionáln!

– pokračujeme s kaskádovými styly

Eric Meyer

Authorized translation from the English language edition, entitled MORE ERIC MEYER ON CSS, 1st Edition, 0735714258, by MEYER, ERIC A., published by Pearson Education, Inc, publishing as New Riders; Copyright © 2004 by Eric A. Meyer.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. CZECH language edition published by ZONER software s.r.o., Copyright © 2005 Autorizovaný překlad anglického vydání nazvaného MORE ERIC MEYER ON CSS, první vydání, 0735714258, autor MEYER, ERIC A., vydal Pearson Education, Inc, ve vydavatelství New Riders; Copyright © 2004 Eric A. Meyer.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována nebo předávána žádnou formou nebo způsobem, elektronicky ani mechanicky, včetně fotokopií, natáčení ani žádnými jinými systémy pro ukládání bez výslovného svolení Pearson Education, Inc. České vydání vydal ZONER software s.r.o., Copyright © 2005.

Eric Meyer o CSS - pokračujeme s kaskádovými styly profesionálně!

Autor: Eric A. Meyer Copyright © ZONER software s.r.o. Vydání první v roce 2005. Všechna práva vyhrazena.

Katalogové íslo: ZR413 Zoner Press ZONER software s.r.o.

Koželužská 7, 602 00 Brno Překlad: Tomáš Znamenáček Odpovědný redaktor: Miroslav Kučera DTP: Miroslav Kučera © Cover foto: Jiří Heller, HELER.CZ s.r.o., www.heller.cz © Cover a layout: Ing. Pavel Kristián Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí.

Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software s.r.o.

Koželužská 7, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz

ISBN 80-86815-17-X

Obsah Několik slov o autorovi Několik slov o recenzentech Poděkování Pošlete nám váš názor Předmluva Úvod Co můžete od této knihy očekávat Přehled projektů Doprovodná webová stránka Typografické konvence

PROJEKT 1

PROJEKT 2

PROJEKT 3

ix x xi xii xiii xvii xix xix xx xx

Přepracování starších stránek

23

Cíle projektu Přípravy Přepracování stránky Rekonstrukce designu Posouzení výsledku Možnosti dalšího rozšíření

24 24 26 30 49 51

Vytváříme galerii fotografií

53

Cíle projektu Přípravy Položení základů Tvorba Přehledu Tvorba Katalogu Možnosti dalšího rozšíření

54 55 55 56 67 77

Formátujeme finanční zprávu

79

Cíle projektu Přípravy Formátujeme pro obrazovku Možnosti dalšího rozšíření

80 80 81 99

V

PROJEKT 4

PROJEKT 5

PROJEKT 6

PROJEKT 7

Práce s pozadím

101

Cíle projektu Přípravy Úsvit stylů Plážový styl Možnosti dalšího rozšíření

102 102 102 111 121

Seznamy a menu

123

Cíle projektu Přípravy Položení základů Otevřená varianta Uzavřená varianta Možnosti dalšího rozšíření

124 124 124 126 134 141

Rozbalovací menu založená na CSS

143

Cíle projektu Přípravy Položení základů Umístění menu Změna orientace menu Poznámka na závěr Možnosti dalšího rozšíření

144 144 144 146 160 167 169

Atraktivní záložky

171

Cíle projektu Přípravy Položení základů Formátování odkazů Skutečné záložky Možnosti dalšího rozšíření

172 172 173 176 188 197

VI

PROJEKT 8

PROJEKT 9

PROJEKT 10

Styl pro weblog

199

Cíle projektu Přípravy Položení základů Formátujeme weblog Možnosti dalšího rozšíření

200 200 200 202 219

Navrhujeme osobní stránku

221

Cíle projektu Přípravy Položení základů Tvorba návrhu Možnosti dalšího rozšíření

222 222 222 224 243

Design Zahrady

245

Cíle projektu Přípravy Položení základů Tvorba návrhu Používáme formát PNG Úvahy Možnosti dalšího rozšíření

246 246 247 249 274 278 279

REJSTŘÍK

281

VII

Věnováno památce na moji matku, Carol Suzanne Meyerovou, skutečnou přítelkyni a štěstí pro všechny, kdo ji znali.

VIII

Několik slov o autorovi Eric A. Meyer pracuje s WWW od konce roku 1993 a je mezinárodně uznávaným odborníkem na HTML, CSS a webové standardy. Je zakladatelem poradenské firmy Complex Spiral (www.complexspiral.com), která se zabývá návrhem WWW prezentací v souladu se standardy.

Tím svým klientům — mezi které patří například Macromedia nebo Wells Fargo Bank — pomáhá snižovat náklady a zvyšuje jejich efektivitu.

Začátkem roku 1994 byl Eric autorem grafického řešení a osobou zodpovědnou za chod WWW stránek univerzity Case Western Reserve. Právě v tomto období vznikly jeho široce uznávaní průvodci HTML. Jako vedoucí projektu se podílel na tvorbě online verze Encyklopedie clevelandských dějin spojené se Slovníkem clevelandské biografie (ech.cwru.edu) — první to encyklopedii dostupné v nezkrácené podobě na WWW. Je autorem knih Eric Meyer on CSS: Mastering the Language of WebDesign (New Riders, v českém překladu vydal v roce 2004 Zoner Press pod názvem Eric Meyer o CSS — ovládněte kaskádové styly), Cascading Style Sheets: The Definitive Guide (O’Reilly & Associates) a CSS2.0 Programmer’s Reference (Osborne/McGraw-Hill). Napsal celou řadu článků pro O’Reilly Network, Web Techniques a Web Review; stojí za tabulkami kompatibility prohlížečů a spolupracoval na tvorbě oficiální W3C testovací CSS sady. Školil zaměstnance mnoha organizací, příkladem budiž Národní laboratoř Los Alamos, Veřejná knihovna v New Yorku, Cornellova univerzita nebo Univerzita Severní Iowy.

Eric vystupuje také na technických konferencích, mezi které patří například IW3C2, Web Design World, CMP, SXSW, User Interface Conference a The Other Dreamweawer Conference.

Ve svém volném čase dělá Eric dobrého ducha živé diskusní skupiny css-discuss (www. css-discuss.org) , kterou společně s Johnem Allsoppem z Western Civilisation založil, a o niž se dnes stará evolt.org. Eric žije v clevelandském Ohiu — což je krásné město s ošklivou pověstí — a je autorem pořadu "Your Father’s Oldsmobile", ve kterém můžete každý víkend na frekvenci 91,1 FM (www.wruw.org) zaslechnout písničky ze staré dobré doby bigbandů (tedy, pokud jste z Clevelandu nebo jeho okolí). Když už nemá nic jiného na práci, otravuje svou ženu Kat.

IX

Několik slov o recenzentech Tito lidé se svými praktickými zkušenostmi podíleli na celém procesu tvorby knihy, kterou právě držíte v rukou. Při psaní textu prohlédli tito odborníci důkladně všechny technické i organizační podklady a jejich připomínky byly pro vznik kvalitního díla naprosto nepostradatelné.

Porter Glendinning je vlastníkem a hlavním poradcem firmy Cerebellion Design. Žije poblíž Washingtonu D.C. se svou ženou Laurou (která se snaží smířit s jeho internetovým fetišismem) a labradorem Arrowem (jenž mu žere ponožky). Na webu ho můžete najít na adresách www.g9g.org a www.cerebellion. com. Je jedním z administrátorů diskusní skupiny Babble věnované pokročilým webovým technologiím všeho druhu (www. babblelist.com) a je členem Výboru pro směřování webových standardů (www.webstandards.org).

Dave Shea je tvůrcem a zahradníkem vysoce inspirativní Kaskádové zenové zahrady (www.csszengarden.com). I on je jedním z členů Výboru pro směřování webových standardů (www.webstandards.org), je vlastníkem a ředitelem firmy Bright Creative (www.brightcreative.com) a v jeho blogu (www.mezzoblue. com) se můžete dočíst celou řadu zajímavých věcí o webu. Žije v Kanadě, Vancouveru B. C., a když zrovna není před obrazovkou, najdete ho na místním tržišti nebo v nějaké malé pražírně kávy.

X

Poděkování Lindě Bump Harrisonové a Lori Lyonsové z nakladatelství New Riders/PeachPit Press, které mě během všech prací na knize mocně podporovaly a zasluhují si za trpělivost a toleranci projevenou během uzávěrek (přesněji řečeno — během překračování domluvených uzávěrek) čestné místo.

Vřelé díky směřují k odborným poradcům, kterými byli Dave Shea a Porter Glendinning — děkuji za jejich poznámky vedoucí ke zdůraznění mnoha důležitých faktů, vyjasnění nepřesně napsaných částí textu a opravení chyb. Zvláštní poděkování si zaslouží Dave za nádherný návrh, kterým přispěl k desáté kapitole.

Chtěl bych poděkovat Douglasi Bowmanovi za to, že se ujal předmluvy. Dougovu práci jsem obdivoval od přepracování Wired News v roce 2002 — jeho technická zručnost je ve spojení s jeho grafickým cítěním zárukou překrásného výsledku. Jeho příspěvek k této knize je pro mě velkou ctí.

Mé poděkování patří i tisícům členů diskusní skupiny css-discuss za to, že z ní udělali jeden z nejlepších informačních zdrojů co znám, a za stále udržovaný odstup signálu od šumu. Díky evolt.org a Johnu Handelaarovi za hladké obstarání technického zázemí této diskusní skupiny a díky Johnu Alsoppovi z Western Civilisation za jeho pomoc při zakládání skupiny.

Jako obvykle bych chtěl vyjádřit velký vděk všem, kteří mě za ta léta kontaktovali — ať už to bylo kvůli poděkování, komentáři, doporučení, otázce nebo nápadu týkajícího se CSS, prohlížečů nebo mého psaní. I když bohužel nebylo v mých silách odpovědět všem, všechny vaše názory jsem si přečetl. Díky vám.

A konečně bych chtěl poděkovat své ženě Kathryn — jsi ten nejúžasnější společník, kterého muž může mít. Bez Tvé podpory, síly a stálé víry bych nikdy nedošel tak daleko; nikdy Ti nebudu schopen poděkovat za všechno, co pro mě děláš a čím pro mě jsi.

Eric A. Meyer Únor 2004

XI

Pošlete nám váš názor Jako čtenáři této knihy se stáváte těmi nejdůležitějšími kritiky a komentátory. Vážíme si vašeho názoru a chtěli bychom znát, co děláme správně, co bychom mohli dělat lépe, ve kterých oblastech bychom měli publikovat a jiné podnětné myšlenky, které jste nám ochotni sdělit.

Jako redaktor Zoner Press vítám vaše názory. Můžete mi faxovat, poslat e-mail nebo dopis a sdělit mi, co se vám v této knize líbilo nebo nelíbilo, stejně tak, co bychom měli udělat, aby naše další knihy byly lepší. Pokud mi napíšete, prosím, nezapomeňte připojit název knihy, ISBN, jméno autora, vaše jméno, telefon, fax nebo e-mail. Pozorně zhodnotím vaše názory a poskytnu je autorovi a redaktorům, kteří pracovali na této knize.

Prosím, vězte, že nemohu pomoci s technickými problémy, které se týkají obsahu knihy, a že díky velkému množství e-mailů, které dostávám, nemohu zaručit odpověd na každou zprávu.

E-mail: miroslav.kucera@zoner.com Adresa: Zoner Press ZONER software, s. r. o Miroslav Kučera Koželužská 7 602 00 Brno

XII

Předmluva "Eric Meyer." Stačí to jméno nahlas vyslovit a okamžitě strhnete mou pozornost — možná se s vámi dám dokonce do rozhovoru, byť bychom se viděli poprvé v životě. Probíral jsem se minulý dok přihrádkou plnou technických knih a zaslechl jsem, jak nějaká slečna říká svému kamarádovi název knihy, kterou právě držela v ruce: "Jmenuje se to Eric Meyer o CSS. Mám dojem, že už jsem o tom chlápkovi někde četla."

Přišel jsem o něco blíže a nabídl jsem jí radu.

"Jestli nějakou podobnou knihu hledáte, tak už nemusíte — našla jste."

Jen co jsem se dozvěděl, že má přehled alespoň v základních vlastnostech CSS, mohl jsem svou radu vysvětlit. "Ta kniha je dobrá a Eric Meyer též. Uvidíte, že budete nadšená už po první kapitole."

Ještě chvíli jsme si o knize a o jejím autorovi povídali — pak mi poděkovala, knihu s důvěrou popadla a vyrazila směrem k pokladně.

Kdybyste věděli, jakou roli hrál Eric Meyer v mém přístupu k CSS, a jakou roli hrají dnes kaskádové styly v mých výpravách k hranicím možností webdesignu, asi byste se mé ochotě poradit vůbec nedivili.

Kaskádové styly jsem totiž celé roky ignoroval.

Když jsem pracoval pro HotWired, snažili se mě spolupracovníci při každé příležitosti přistrčit ke kaskádovým stylům — mysleli si, že je budu zbožňovat. Jsem především grafik, ale oni věděli, že mi složitější technické problémy nedělají žádné problémy. Nejednotnost a nemožnost dopředu odhadnout výsledek mi ovšem problémy dělá (pokud jde o kód).

Když jsem se ale tlaku okolí konečně poddal a začal si s CSS pohrávat, okamžitě jsem narazil na cihlovou zeď. V tehdejších "čtyřkových" verzích prohlížečů Netscape Navigator a Internet Explorer totiž každý složitější pokus překračující základní práci s barvou a písmem vyústil nezvratně v pocit zmaru. Chtěl jsem nastavení okraje, velikosti písma a polohy, které se nemění v závislosti na použité platformě a prohlížeči. V roce 1998 byla ovšem podpora i pro tyto základní vlastnosti strašlivá a působila bolesti hlavy všem, kteří se snažili dosáhnout jednotného vzhledu ve více prohlížečích najednou.

Kaskádové styly jsem tedy odepsal jako nedostižnou iluzi, za kterou se honit nehodlám.

Chtěl jsem pokračovat v tvorbě graficky vyvedených a použitelných návrhů, které jsem v té době kaskádovým stylům a jejich bědné implementaci v prohlížečích zkrátka svěřit nemohl.

Během těchto bitev s CSS jsem naštěstí zavadil o jednu z mála knih, které se jim v té době věnovaly — mé štěstí spočívalo v tom, že tuto knihu napsal Eric Meyer.

XIII

Na knížku se několik let prášilo, protože jsem se CSS vyhýbal. Okolnosti se ale postupem času začaly měnit — objevovaly se zmínky o prohlížečích se slušnou podporou kaskádových stylů a menší WWW prezentace CSS s poměrně dobrými výsledky používaly. Tyto změny podráždily mou zvědavost natolik, že jsem se — již podruhé — kaskádovými styly začal zabývat a počal jsem shánět další informace.

Kamkoliv jsem se podíval, tam na mě číhalo jméno Eric Meyer — jméno autora knihy, kterou už jsem měl, jméno související s hodnotným zdrojem informací. Články o CSS, testovací sady, diskusní skupina o CSS a jeho vlastní pracovní dokument, na kterém jsem začal okamžitě s téměř nábožnou úctou zkoušet možné kombinace vlastností a jejich hodnot.

Jeho kniha se ze zaprášené poličky přesunula na roh mého pracovního stolu, kde byla na dosah mé ruky a kde mi téměř nepřetržitě sloužila jako zdroj informací. "Jakže to funguje tohle pozicování?" "Jak oni v tom CSS říkají prokladu?" "V jakém pořadí by měly být tyhle hodnoty popisující písmo?" Ericova stylu jsem se nemohl nabažit. S každým jeho článkem mi ve velké skládačce zapadl jeden kousek na své místo.

A nyní drobná literární dekadence — skok časem o rok dopředu. Ericova kniha ještě pořád leží na okraji mého stolu, jen oslí růžky na ní narostly. Byl jsem až po krk ponořený v práci na čistě kaskádovém návrhu Wired News z roku 2002, když vyšla kniha Eric Meyer o CSS — jeho první a neocenitelný pohled na CSS napsaný ve formě krátkých projektů. Hned první noc, kterou jsem knihu držel v rukou, jsem se ponořil hluboko do kapitoly o vícesloupcovém rozvržení. A byl jsem ztracen. Zjevení, kterých jsem byl při čtení této knihy svědkem, mě donutila litovat, že jsem ji nedostal do rukou dříve, než jsem se pustil do složitých stylů pro Wired.

Dokážete si tedy představit vzrušení, které následovalo zvěst o pokračování této knihy chystané Ericem a nakladatelstvím New Riders. Sága pokračuje! Na cestě je další řada praktických ukázek, které jsou jasnou trefou do černého pro kteréhokoliv webdesignéra a vývojáře. Další řada projektů ze skutečného světa, které řeší naše každodenní pracovní problémy. Další porce Ericova vhledu do jednoduchých i složitých zákoutí CSS. Další porce moudrosti odkázané mistrem — Eric Meyer znovu o CSS! Ericova dokonalá znalost kaskádových stylů mu umožňuje psát o nich dostatečně autoritativně. Přesto ale píše osobním a přátelským tónem, který se lehko čte a jemuž snadno porozumíte. Taková kombinace je ideální pro ty, kteří se chtějí naučit něco nového, i pro ty, kteří si hodlají rozšířit vlastní znalosti. Eric vám s lehkostí sobě vlastní ukáže jak na to a zároveň se dozvíte, proč zrovna takhle. Podle mého názoru je u kaskádových stylů toto proč stejně důležité jako jak. Vhodně zvolenou formou projektů se Eric trefuje přesně do ideálního poměru mezi těmito dvěma přístupy.

Stačí si projít příklady, začíst se do některé z poznámek nebo varování v textu a v hlavě se vám okamžitě rozbliká malá žárovečka: "Aha, tak takhle to je!" nebo "Hm, tak kvůli tomuhle mi pozadí zmizelo pod plovoucím prvkem? Jasně…"

XIV

Narazili jste na otravný problém, který vám komplikuje práci na rozložení klientových stránek? Snažíte se drobet vylepšit svou obrázkovou galerii? Nemáte tušení, proč jsou obrázky v pozadí stránky neustále o několik pixelů od sebe? Věnujte pár chvil této knize a Eric s vámi projde několik podobných situací, které vám otevřou oči. Budete se asi sami sebe ptát, kde byste byli bez Erica Meyera.

Stejně jako u prvního dílu se můžete v této knize okamžitě zastavit u libovolné z následujících kapitol a začít prohlubovat své znalosti CSS. Reálné problémy v knize popsané a vyřešené vám nabídnou řadu nápadů a nabudete díky nim jistoty, která se vám bude na dalších projektech jistě hodit.

Sám jsem se otočil o sto osmdesát stupňů — od naprostého odmítání CSS až k nadšenému osvojení každé metody nebo techniky, kterou si vymyslím nebo najdu. Eric Meyer hrál (a ještě pořád hraje) v tomto přerodu a v mém vřelém vztahu k síle a pružnosti CSS důležitou roli. Stejně tomu může být i u vás.

Pokud jste webdesignér nebo vývojář, který má alespoň titěrné znalosti CSS a prodělali jste alespoň základní úvod do tematiky, pak byste se podle mě neměli rozhodovat mezi koupí této knihy a koupí jejího "prvního dílu". Spíš byste se měli sami sebe zeptat — na jakém projektu začnete pracovat, až budete mít knihu celou jen sami pro sebe?

Douglas Bowman zakladatel a ředitel Stopdesign San Francisco

XV

XVI

Úvod Ve svých rukou právě držíte (pokud si tedy neprohlížíte elektronickou verzi textu) pokračování knihy Eric Meyer o CSS, vydané v angličtině (a také v češtině díky vydavatelství Zoner Press) za velkého ohlasu čtenářů v roce 2002. Výborně se osvědčila forma projektů, kterou byla tato kniha psána — řadě čtenářů se líbilo, že se mi mohou při řešení projektu dívat přes rameno. Což bylo přesně to, čeho jsem chtěl při psaní knihy dosáhnout — snažil jsem se o to i tentokrát.

Pokud si tuto knihu koupíte a bude se vám líbit, bude se vám pravděpodobně líbit i první díl knihy nazvaný jako Eric Meyer o CSS — ovládněte kaskádové styly (Zoner Press, 2004). Oba díly jsou navzájem nezávislé: nemusíte vlastnit jeden, abyste si užili druhý.

Nemusíte mít strach, že byste se bez přečtení prvního dílu neorientovali v motivech a jednání postav v dílu druhém. Což je ale nejspíš dáno tím, že v mých knihách žádné postavy nejsou.

Nedostatek postav je ovšem vyvážen zápletkou, dokonce dvěma zápletkami. První zápletka popisuje dobrodružnou výpravu za poznáním a experimenty — náš hrdina (Vy!) v ní kráčí ve stopách svého zkušeného průvodce, aby objevil krásné nové cesty krásného nového světa. Druhá zápletka (či spíše podzápletka) je vystavěna na podloudném záměru autora přemluvit čtenáře k častějšímu používání CSS neustálým zdůrazňováním pružnosti výsledného návrhu, jeho zvýšené dostupnosti, snížené velikosti a překrásných vizuálních efektů.

Měli byste si tuto knihu koupit?

Tato otázka je rozhodně na místě. Jakkoliv jsem na práci uloženou ve stránkách této knihy hrdý, jsem si též vědom toho, že výsledek není pro všechny čtenáře. Dovolím si tedy popsat obě skupiny čtenářů — ty, pro které tato kniha určena je, a ty, pro něž určena není.

Pro koho je tato kniha určena Pokud splňujete jeden nebo více z následujících bodů, pak je tato kniha určena právě vám.

◆ ◆ ◆

Hledáte praktického průvodce světem CSS zaměřeného na příklady z reálného světa.

Při učení vám vyhovují spíše praktické pokusy než čtení knihy. Možná to zní v knize legračně, ale tato kniha byla schválně psána tak, abyste si při jejím čtení mohli hned všechno vyzkoušet.

Už nějakou dobu plánujete rozšíření svého CSS arzenálu, ale stále jste to odkládali, protože jde o tak velké a složité téma a nejste si příliš jistí, kde přesně začít.

XVII

◆

Vždycky jste chtěli, aby vám někdo ukázal převod tradiční HTML stránky na čistě kaskádový návrh a vysvětlil vám přitom výhody nového návrhu. Pokud spadáte do této kategorie, tak se bez dalšího rozmýšlení vrhněte na první kapitolu.

◆

Kdyby se vás někdo zeptal, popsali byste své znalosti HTML jako "pokročilé" nebo "výborné", zatímco znalosti CSS byste hodnotili spíše jako "základní" nebo "lehce pokročilé". Jinými slovy, rozumíte výborně jazyku HTML a samotnému CSS právě natolik, abyste s ním mohli začít experimentovat.

Pro koho tato kniha určena není Pokud splňujete jeden nebo více z následujících bodů, pak se vám tato kniha asi příliš nehodí.

◆

Nikdy jste CSS nepoužili nebo jste ho dokonce ani nikdy neviděli. I když jsou v textu některé základní pojmy vysvětleny, předpokládám, že čtenář ovládá alespoň základy CSS a dokáže se plynně vyjadřovat v HTML. Někteří čtenáři první knihy (Eric Meyer o CSS) mi psali, že si knihu užili i bez jakýchkoliv předchozích zkušeností s CSS — tentokrát si už začátečníci skutečně příliš nepočtou.

◆

Chcete pochopit všechna drobná zákoutí teorie ležící v základech CSS a obsáhnout všechny podrobnosti specifikace. Na trhu je řada knih, která tomuto účelu poslouží lépe, my se budeme soustředit na reálné problémy.

◆

Pro návrh stránek používáte nějaký WYSIWYG program. Tato kniha předpokládá, že jste schopni HTML a CSS upravovat ručně. Všechny projekty lze samozřejmě ve WYSIWYG programu projít, ale kniha byla psána s jasným důrazem na ruční práci.

A když už jsme u toho — kniha Eric Meyer o CSS měla velký úspěch u uživatelů programů Dreamweaver a GoLive. Pokud tedy do této kategorie spadáte, máte námět k zamyšlení.

◆

Sháníte knihu, která vám poradí, jak psát CSS pro všechny prohlížeče a platformy, včetně prohlížečů Netscape Navigator řady 4 a Internet Explorer řady 3. Podrobnější vysvětlení najdete o pár řádků níže, v odstavci "Co můžete od této knihy očekávat".

◆

Četli jste některou z mých knih a nelíbí se vám osobní tón, kterým byla psána. Mohu vám zaručit, že se styl mého psaní v podstatě nemění.

XVIII

Co můžete od této knihy očekávat Od samotného počátku jsem chtěl napsat poutavou knihu, která se bude soustředit na praktické a zajímavé způsoby použití kaskádových stylů akceptovaných dnešními prohlížeči. Z tohoto důvodu začíná každý projekt čistým dokumentem bez jakéhokoliv stylu a končí plně ostylovanou stránkou připravenou k použití na webu. Pokud se mé dílo podařilo, měli byste mít pocit, že mi při práci nahlížíte přes rameno a já průběžně komentuji každý svůj krok.

O každém projektu si můžete udělat obrázek pouhým čtením textu a prohlížením doprovodných obrázků — nejlépe ovšem uděláte, pokud si otevřete okno svého oblíbeného prohlížeče a vezmete si k ruce textový editor. Tak můžete sledovat všechny změny v kódu projektu přímo na své obrazovce.

A ještě jednu věc bych rád ujasnil: Techniky používané v této knize jsou určeny především pro prohlížeče s číslem verze vyšším než čtyři (a Safari 1.0+). Pokud máte navrhnout stránku, která bude vypadat stejně v prohlížečích Netscape Navigator řady 4, Internet Explorer řady 4, Internet Explorer řady 6 a Netscape Navigator řady 7, pak vám tato kniha asi příliš nepomůže.

Přehled projektů Aby byla kniha co nejpraktičtější, rozdělil jsem ji na deset projektů — co projekt, to kapitola. Mezi projekty můžete podle nálady přeskakovat, každý je navržen pokud možno samostatně. Přesto byla kniha napsána především pro "standardní" čtenáře — pokud ji budete číst odzadu dopředu, asi narazíte na problémy, pozdější projekty přece jen staví na řešení předchozích.

S několika drobnými výjimkami by měl být obsah projektu zřejmý z jeho názvu. Například projekt první, "Přepracování starších stránek", popisuje převod starších stránek postavených na kombinaci čistého HTML a průhledných obrázků na stránky vytvořené z HTML a CSS, které používají pro rozmístění prvků pozicování místo tabulek.

Druhý a třetí projekt se zabývají některými standardními problémy, budeme se v nich zabývat formátováním galerie fotografií a finanční výsledovky. Projekt číslo čtyři poněkud přitvrdí; jeho předmětem je tvůrčí práce s pozadím stránky a kombinace relativních jednotek s absolutními používaná k dosažení průhlednosti.

V projektech pět až sedm se budeme zabývat různými způsoby použití seznamů. První z těchto tří projektů používá seznam k vytvoření postranního menu — vypracujeme v něm dvě různé varianty umístění menu pro jeden a tentýž seznam. V druhém projektu vytvoříme z několika vnořených seznamů pěkné vysunovací menu, které bude pracovat ve většině prohlížečů (a tím myslím i IE pod Windows ). Poslední z této trojice projektů vytváří pomocí techniky posuvných dveří (sliding doors technique) ze seznamu odkazů záložky.

XIX

Projekty osm a devět se zabývají stylováním weblogu a osobní WWW stránky. Projekt desátý je ze všech projektů v této knize nejambicióznější a nejsložitější — popisuje krok za krokem tvorbu grafického návrhu Kaskádové zenové zahrady — od získání předlohy až po hotový ostylovaný dokument.

Doprovodná webová stránka Každá z kapitol této knihy vychází z nějakého skutečného projektu. Součásti projektu si můžete stáhnout najednou i po jednotlivých kapitolách z doprovodné WWW stránky http://more.ericmeyeroncss.com/. Na této stránce najdete všechny obrázky v projektu použité, opravy případných chyb nalezených v textu knihy a další bonusy v podobě autorových komentářů nebo odkazů na užitečné webové zdroje.

Na těchto stránkách je pro každou kapitolu archiv se soubory, které jsou potřeba k pohodlné práci na projektu, včetně grafiky a souboru obsahujícího první verzi projektu. Tyto soubory důsledně dodržují jednotnou konvenci pojmenování, například obrázek označený v knize jako "obrázek 7.3" je pojmenován ch0703.html, pracovní soubor s prvním projektem se jmenuje ch01proj.html. Právě tento soubor si můžete otevřít ve svém textovém editoru a pracovat na něm během čtení knihy. Po každé změně stylu můžete výsledek zkontrolovat ve svém prohlížeči — stačí použít tlačítko Obnovit.

Na výše zmíněné adrese naleznete také soubory k mé první knize, Eric Meyer o CSS — ovládněte kaskádové styly. Stáhnout si je můžete, i když tuto knihu nevlastníte. Sice netuším, k čemu vám soubory pak budou dobré, ale tuto možnost každopádně máte.

Typografické konvence Tato kniha se řídí několika typografickými konvencemi, které by vám měly usnadnit čtení.

Při prvním setkání s novým pojmem je použita kurzíva — pokud na ni narazíte, pak se někde v okolním textu ukrývá definice. Zdrojové kódy, funkce, proměnné a další výpočetní rekvizity jsou sázeny neproporcionálním písmem. V textu budou navíc označeny tmavě červenou barvou, například při zmínce o CSS vlastnostech (margin) nebo hodnotách (10px).

Delší úryvky zdrojového kódu jsou celé vysázeny neproporcionálním písmem a červená barva v nich slouží k vyznačení změn oproti předchozí verzi. Drtivá většina ukázek zdrojového kódu představuje pouhou část celkového stylu dokumentu a nově vložené řádky jsou obklopeny několika staršími řádky, které zůstaly beze změny. Několik neměnných řádků slouží k hladšímu udržení kontextu a měly by vám ulehčit hledání částí, které byste měli ve svém textovém editoru při práci na projektu změnit. Takhle nějak to bude vypadat:

XX

<head> <title>Cleveland Eats: Matsu</title> <style type=”text/css”> /* změna oproti předchozí verzi */ table {border: 2px solid red; margin: 3px;} td {border: 1px dotted purple; padding: 2px;} </style> </head>

Každá kniha o počítačích má svůj vlastní vizuální styl. Stačí zběžně prolistovat tuto knihu a všimnete si několika zajímavostí, takhle fungují:

Vysvětlivka V tomto odstavci se dozvíte informace, které se vztahují k okolnímu textu, ale nejsou přímou součástí projektu. Může jít například o jiné přístupy k právě řešenému problému — každopádně tento text můžete přeskočit, aniž byste přišli o nějakou informaci důležitou pro dokončení projektu.

Poznámky

Takhle vypadají užitečné poznámky k hlavnímu textu, najdete jich v knize celou řadu. Objeví se v nich různé tipy, komentáře, definice nových pojmů a odkazy na další zdroje.

Varování Takhle budou vypadat upozornění na ošidná místa, která by vám mohla dělat problémy.

Odkazy na WWW budou obsahovat adresy souborů, které si máte stáhnout nebo zobrazit ve svém prohlížeči.

Závěr každého projektu obsahuje oddíl nazvaný jako "Možnosti dalšího rozšíření". V něm naleznete tři krátké úkoly, tři variace na hotový projekt. Ty rozhodně nevyčerpávají všechny možnosti práce s projektem, chápejte je spíše jako výzvu a odrazový můstek k dalším nápadům. Pokud se vám podaří obrázky uvedené v této části kapitoly napodobit pomocí CSS, jste na nejlepší cestě.

XXI

XXII

6 Rozbalovací menu založená na CSS Dlouhá je cesta poučováním, krátká a účinná na příkladech.  LUCIUS ANNAEUS SENECA

V předchozím projektu jsme si ukázali, jak lze z jednoduchého neuspořádaného seznamu odkazů vytvořit pěkné menu.

Chyběla nám možnost použít jako položku menu další menu, je to vůbec možné dokázat "pouhou" kombinací HTML a CSS? Odpověď je podle očekávání kladná. Jeden prohlížeč budeme muset ke spolupráci přinutit použitím nestandardního kódu — tímto prohlížečem je Internet Explorer na Windows, vynaložená námaha tedy bude stát za to. V tomto projektu si ukážeme, jak lze z víceúrovňového seznamu odkazů vytvořit rozbalovací menu.

144

PROJEKT 6

Cíle projektu Základní cíl je prostý — vytvořit pomocí víceúrovňového seznamu a vhodného kaskádového stylu rozbalovací menu. Náš hlavní úkol můžeme rozdělit na několik menších:

◆

Konstrukce použitá k vytvoření menu musí být schopná pracovat s více úrovněmi menu, jinými slovy, musí být možno jako položku menu použít další menu.

◆

Menu musí jít použít svisle i vodorovně, pokud možno bez jakýchkoliv zásahů do zdrojového dokumentu.

◆

Pokud bude možné vyhnout se JavaScriptu, vyhneme se mu. Chtěli bychom, aby menu pracovalo výhradně prostřednictvím kaskádových stylů — snížíme tím objem dat putujících po síti, protože se prohlížeč spokojí s kaskádovým stylem a zdrojovým dokumentem.

◆

Menu musí pracovat v co možná největším počtu prohlížečů, včetně IE/Win.

Možná máte pocit, že jsme si zadáním úspěšně zlikvidovali jakoukoliv naději na úspěch; ve skutečnosti to bude jednodušší, než se zdá. Většinu práce nám zabere správné umístění menu — jakmile budeme mít tuto část za sebou, přidáme pár pravidel pro dynamické skrývání a odkrývání jednotlivých nabídek a jsme hotovi.

Přípravy Pokud potřebujete radu ohledně stahování souborů z doprovodné WWW stránky, podívejte se do úvodu knihy.

Stáhněte si z WWW soubory k šestému projektu. Pokud hodláte při čtení všechny změny okamžitě vyzkoušet, otevřete si v editoru soubor ch06proj.html — tento soubor budete během práce na projektu upravovat, ukládat a opakovaně zobrazovat.

Položení základů Nejprve bychom si měli důkladně prostudovat strukturu dokumentu. V tomto případě před sebou máme tři hlavní části dokumentu:

◆ ◆ ◆

Nadpis stránky Navigační odkazy Hlavní obsah stránky

Jak už pořadí jednotlivých součástí stránky naznačilo, jsou všechny odkazy umístěné v prvku div, který následuje bezprostředně za nadpisem h1. Za odkazy je umístěn prvek div s hlavním obsahem stránky. Dokument už obsahuje nějaká základní pravidla, viz výpis 6.1 a obrázek 6.1.

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS Výpis 6.1

145

Základní pravidla

<style type="text/css"> body {background: #EEE; color: #000;} h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;} div#nav {float: left; width: 7em; background: #FDD;} </style>

Obr. 6.1 Výchozí dokument.

Hlavním úkolem základního stylu je postarat se o výchozí rozvržení stránky a optické potlačení textu, aby nás nerušil při práci na menu. Světle červené pozadí prvku div s menu slouží výhradně k tomu, abychom měli jasnou představu o jeho poloze. A když už jsme u menu, jeho zdrojový kód najdete ve výpisu 6.2.

Výpis 6.2

Značkování použité pro menu

<div id="nav"> <ul> <li><a href="/">Home</a></li> <li><a href="/services/">Services</a> <ul> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> <li><a href="/services/guidance/">Guidance</a></li> <li><a href="/services/training/">Training</a></li> </ul> </li> <li><a href="/events/">Events</a></li> <li><a href="/pubs/">Publications</a> <ul>

Pojmenování hlavního prvku Možná vám vrtá hlavou, proč se na hlavní prvek div odkazujeme v kaskádovém stylu jako na div#nav místo prostého #nav. Použitím delšího selektoru se vyhýbáme chybě v IE/Win, který dělá při použití kratší varianty potíže s dynamickým zobrazováním podmenu.

Delší varianta selektoru problém řeší — nevím sice proč, ale řeší.

146

PROJEKT 6 <li><a href="/pubs/articles/">Articles</a></li> <li><a href="/pubs/tuts/">Tutorials</a> <ul> <li><a href="/pubs/tuts/html/">HTML</a></li> <li><a href="/pubs/tuts/css/">CSS</a> <li><a href="/pubs/tuts/svg/">SVG</a> <li><a href="/pubs/tuts/xml/">XML</a> </ul> </li> <li><a href="/pubs/wpapers/">White Papers</a></li> <li><a href="/pubs/comment/">Commentary</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </div>

Řádné vnořování seznamů

Všimněte si, že každý vnořený seznam leží uvnitř prvku seznamu nadřazeného; například položka se službami (services) obsahuje odkaz, vnořený seznam a až teprve potom uzavírací značku prvku li.

Tak to má být — seznam nemůže být potomkem jiného seznamu, může být pouze potomkem jeho prvku. Velmi častou chybou je umístění vnořeného seznamu mezi prvky nadřazeného seznamu, správně umístěný seznam patří do jednoho z nich.

Přesně tak — pár vnořených neuspořádaných seznamů, to je vše. Nic dalšího potřebovat nebudeme, během práce na projektu pouze přidáme několik tříd.

Umístění menu Ještě než se dostaneme ke kouzlům se skrýváním a odkrýváním, musíme menu nějak hezky ostylovat. Jinými slovy, nejprve se postaráme o slušný vzhled všech nabídek a až potom se pustíme do jejich interakce s uživatelem.

Plánujeme dopředu Naším prvním krokem bude načtení zvláštního skriptu určeného pro prohlížeč Internet Explorer na Windows. K tomu nám poslouží nestandardní vlastnost behavior, pomocí které lze IE/Win naučit novým kouskům. body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* Pro IE na Windows */

Aby vám toto pravidlo fungovalo, musíte si stáhnout soubor csshover.htc.

Najdete ho na doprovodné webové stránce této knihy nebo na domovské stránce Petera Nederlofa (autora skriptu), http://www.xs4all.nl/~peterned/csshover.html.

Dokud Peter nepřišel se svým csshover.htc, podporoval IE menu založené na CSS pouze tehdy, pokud pro něj autor stránky použil speciální skript. V jistém smyslu udělal Peter totéž, jen kód skriptu umístil místo standardního bloku jazyka JavaScript do zvláštního htc souboru, který IE používá pro definici nového chování. Jeho řešení má jednu velkou výhodu — soubor se skriptem si stáhne jen IE, takže ostatní prohlížeče (které mu stejně nerozumí) nebudou plýtvat kapacitou sítě a soubor nechají ležet bez povšimnutí. Při řešení skriptem v jazyce JavaScript by si soubor musely stáhnout všechny prohlížeče.

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS I trik s htc souborem má ovšem jednu nevýhodu, vlastnost behavior není součástí standardu CSS. Pokud vám na validitě kaskádového stylu záleží, můžete závadnou definici přenést do zvláštního stylu a ten do hlavního stylu vložit pomocí pravidla @import — díky tomu zůstane hlavní kaskádový styl v souladu se standardem. Záleží na tom, jak moc na validitě svých kaskádových stylů lpíte.

V tomto okamžiku na naší stránce htc soubor ještě nic nezměnil — ještě jsme se ani nedostali tak daleko, aby nám v něčem mohl být užitečný. Nejprve musíme naše menu nějak zformátovat. Prvním krokem bude odstranění všeho odsazení a nastavení šířky seznamů na šířku hlavního prvku div.

Výsledek je na obrázku 6.2.

Okraje a výplň

Obr. 6.2 Po zkrácení odsazení se všechny seznamy vešly do postranního sloupce.

Umístění podmenu Dalším krokem je přesunutí podmenu na místo, na kterém by se měly ve výsledné stránce objevovat. Tradiční umístění je hned vedle položky, která zobrazení podmenu řídí, zarovnáno podle horního okraje. Takového umístění lze snadno dosáhnout polohováním prvku vzhledem k rodičovskému prvku seznamu.

Některé prohlížeče používají k odsazení seznamů výplň, jiné okraj. Vynulujeme hodnoty obě, jistota je jistota.

div#nav {float: left; width: 7em; background: #FDD;} div#nav ul {margin: 0; padding: 0; width: 7em;} </style>

Na nějakou dobu teď nebude na první pohled patrné, kde jednotlivá menu začínají a končí — jen žádnou paniku, v další části projektu to napravíme.

147

148

PROJEKT 6 K tomu je potřeba všechny prvky seznamu přemluvit, aby se chovaly jako výchozí bod pro umístění svého obsahu — stačí je umístit relativně k rodičovskému prvku, bez jakéhokoliv posouvání. div#nav ul {margin: 0; padding: 0; width: 7em;} div#nav li {position: relative;} </style>

Díky tomuto pravidlu se každý prvek seznamu začne chovat jako výchozí bod pro umístění všech svých absolutně umístěných potomků. Pokud umístíme odkaz v menu pomocí pravidla right: 0, začne těsně po pravém okraji svého rodičovského prvku seznamu.

Místo odkazů ale budeme pozicovat celé neuspořádané seznamy. Každý seznam, který je prvkem jiného seznamu, umístíme napravo od rodiče, jejich horní okraje v jedné rovině. div#nav li {position: relative; list-style: none; margin: 0;} div#nav ul ul {position: absolute; top: 0;} </style>

Tímto pravidlem jsme se postarali o srovnání horních okrajů všech vnořených seznamů s horními okraji jejich rodičů. Zbývá všechny tyto prvky vystrčit na pravý okraj první úrovně menu. Nebudeme si s tím nějak zvlášť lámat hlavu — díky našemu pravidlu div#nav víme, že jsou seznamy široké 7em. To znamená, že pravý okraj prvků seznamu je 7em od jejich levého okraje. A to znamená, že posuneme-li druhou úroveň menu o 7em, bude přesně tam, kde ji chceme mít — na obrázku 6.3. div#nav ul ul {position: absolute; top: 0; left: 7em;}

Obr. 6.3 Umístění podmenu řízené rodičem.

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS

149

Na obrázku 6.3 byste si měli všimnout následujících čtyř věcí:

◆

Navigační div svou výšku přizpůsobuje svému obsahu. Podmenu už na něj nemají žádný vliv, protože jsme je absolutně umístili, z hlediska sazby obsahu stránky už nejsou jeho obsahem.

◆

Poslední dvě položky prvního podmenu se překrývají s prvními dvěma položkami druhého podmenu. To nás ale nemusí bolet, protože na závěr bude stejně zobrazeno vždy pouze jedno podmenu.

◆

Obsah druhé úrovně menu je těsně při pravém okraji první úrovně menu.

Odrážky jsou vždy o něco před obsahem seznamu, takže odrážky druhé úrovně menu zasahují do první úrovně a odrážky první úrovně zmizely za okrajem okna prohlížeče.

◆

Většina prohlížečů zobrazí u seznamů odrážky, těch se musíme zbavit.

Takže ještě než se pustíme do další práce: div#nav li {position: relative; list-style: none; margin: 0;}

A odrážky jsou na věčnosti, můžete se přesvědčit na příštím obrázku.

Hezčí menu Podmenu už jsou na svých místech, měli bychom se ještě postarat o jejich lepší vzhled. Nastavíme jim bílé pozadí a dočasně také tenké orámování s barvou zděděnou po prvku ul. div#nav ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid;}

Tímto pravidlem jsme se postarali o rámeček kolem všech úrovní menu, od první až po tu nejhlubší. Některé prohlížeče (například Opera) nastavují okraje prvkům seznamu, zbavme se jich. div#nav li {position: relative; list-style: none; margin: 0;}

A teď k podmenu. Abychom si usnadnili práci, přidáme do zdrojového kódu stránky několik vlastních háčků. Každý prvek seznamu, který obsahuje podmenu, zařadíme do třídy submenu: <li class="submenu"><a href="/services/">Services</a> <li class="submenu"><a href="/pubs/">Publications</a> <li class="submenu"><a href="/pubs/tuts/">Tutorials</a>

Pojmenování tříd

Pro třídu jsme kromě submenu mohli zvolit i libovolné jiné jméno — sm, subm nebo třeba marek.

Jméno submenu jsem vybral kvůli jeho jednoznačnosti a popisnosti.

Při práci na vlastních projektech se nebojte vybrat jméno podle svého uvážení.

150

PROJEKT 6 V podstatě jsme právě všechny seznamy obsahující podmenu označili nálepkou submenu. Abychom měli jistotu, že jsme označili správné prvky, přidáme jednoduché pravidlo ke zvýraznění těchto prvků — výsledek je vidět na obrázku 6.4. div#nav li {position: relative; list-style: none; margin: 0;} div#nav li.submenu {background: yellow;} div#nav ul ul {position: absolute; top: 0; left: 7em;}

Obr. 6.4 Vzhled podmenu se zlepšil a zvýraznili jsme prvky seznamu, které obsahují podmenu.

Po nastavení pozadí už je překryv mezi prvním a druhým podmenu jasně patrný. Překrývají se stejně jako na jednom z předchozích obrázků, jen teď pozadí druhého podmenu zakrývá obsah prvního docela. Navíc je vidět, jak pěkně nám menu třetí úrovně přiléhá k rodičovskému prvku.

Rozšíření plochy odkazů Pokud na projektu pracujete zároveň se čtením textu, asi jste si po provedení předchozích změn všimli jednoho nepříjemného efektu — aktivní část odkazů nevyplňuje celou plochu prvku seznamu. To proto, že jsou odkazy řádkovými prvky. Kdybychom například nastavili ohraničení odkazů, byla by čára ohraničení jen kolem textu odkazu.

Dvojitá výška V IE/Win se po přidání pravidla display: block odkazy vzájemně odstrčí. Jde o chybu prohlížeče související se zpracováním prázdného místa a blokových prvků v seznamech — nemusíte se ale bát, ještě než dorazíme k dalšímu obrázku, bude už všechno v pořádku.

Pokud má menu pracovat správně a chovat se podle očekávání uživatelů, potřebujeme odkazy vyplnit celou plochu seznamu. Stačí změnit typ objektu, který odkazy při vysázení na stránku vytvoří. div#nav li.submenu {background: yellow;} div#nav li a {display: block;} div#nav ul ul {position: absolute; top: 0; left: 7em;}

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS

151

Po přidání tohoto pravidla vytvoří každý odkaz při vysázení na stránku blokový objekt, stejně jako například odstavec nebo div. Nezměnili jsme ale samotné odkazy — jsou to pořád řádkové prvky, jen při sazbě tvoří blokové objekty místo řádkových. Jde o drobný rozdíl, ale vyplatí se ho mít na paměti.

Nejenže teď můžeme kliknout myší kdekoliv v menu (tedy kromě IE, hned to spravíme), ale můžeme též použít libovolné pravidlo používané obvykle na blokové prvky. Tak například, k posunutí textu odkazu k pravé straně bychom mohli použít výplň po levé straně a všechny odkazy můžeme drobet roztáhnout pomocí horní a spodní výplně. div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;}

Dále bychom měli vypnout podtržení odkazů, uživatelé u odkazů v menu žádné podtržení neočekávají. div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none;}

A teď k potížím s IE/Win. V tomto prohlížeči odkazy z nějakého důvodu nevyplní celou plochu nadřazeného prvku li. Jde o chybu prohlížeče, naštěstí ji však není těžké obejít. Pokud dokážeme nastavit výšku odkazu ručně, IE poslechne a bude po problémech. V ostatních prohlížečích bychom ale rádi uchovali původní nastavení, automatickou výšku.

Nejprve tedy nastavíme výšku odkazu ručně; pak použijeme pravidlo, které IE nezpracuje, a které se postará o automatickou volbu výšky odkazu. div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; top: 0; left: 7em;}

Prvek se šířkou 6,5 em a levou výplní 0,5 em bude široký 7 em, stejně jako jeho rodič. Teď ještě přidáme světle šedé spodní ohraničení, abychom od sebe jednotlivé odkazy oddělili. div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;}

Stejně dobře jsme mohli spodní ohraničení nastavit i odkazům — v současné podobě menu by byl výsledný efekt shodný. Výsledek všech provedených změn je na obrázku 6.5.

Ještě jednou?

Selektor div#nav>ul a říká toto: "jakýkoliv prvek a, který je potomkem ul, jenž je potomkem prvku div s id nastaveným na nav". Toto pravidlo se postará o výběr všech odkazů v našem menu — IE mu totiž nerozumí, a tak ho přeskočí.

152

PROJEKT 6 Obr. 6.5

Odsazení odkazů pomocí výplně a zaplnění celé plochy menu odkazy.

Box model blues Nastavení šířky 6,5 em bude výborně fungovat v IE 6, nikoliv ovšem ve starších verzích tohoto prohlížeče. Pokud chcete vyjít vstříc i těmto prohlížečům, budete potřebovat ještě o něco složitější sadu pravidel. Ta využije trik se selektorem potomků, který jsme viděli nedávno, a ještě k tomu takzvaný "box model hack". Například takto: div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 100%; voice-family: "\"}\""; voice-family:inherit; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; top: 0; left: 7em;}

První část pravidla změní šířku prvků na 100 %, což potřebují starší verze IE na Windows. To je také poslední příkaz, který v rámci tohoto pravidla uvidí — část pravidla s vlastností voice-family je donutí zbytek pravidla přeskočit. Zbytek prohlížečů ale půjde dál a šířku prvků nastaví na 6,5 em. Pak přichází řádek se selektorem potomků, který šířku nastaví zpět na hodnotu auto — tento řádek už neuvidí žádný IE, dostanou se k němu jen ostatní prohlížeče.

Jestli tato námaha stojí za to záleží na vás a především na vašich čtenářích. Pokud je mezi nimi velký podíl vlastníků starších strojů a staršího softwaru, pak se touto cestou nejspíše vydáte. Po zbytek projektu budeme předpokládat, že jsou vaši čtenáři vybaveni nejnovější verzí svého oblíbeného prohlížeče a složitější pravidla zaplněná triky pro IE necháme plavat.

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS

Interaktivita Přišel čas přidat pravidlo, které se postará o změnu pozadí menu při přeběhnutí kurzoru myši. Efekt můžeme zařídit například takto: div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;} div#nav li:hover {background: #EBB;} div#nav li.submenu {background: yellow;}

Nelekejte se, nejde o chybu. Schválně jsme pseudotřídu hover místo na odkazy použili na prvky seznamu. Tato konstrukce je zcela v souladu se specifikací CSS, která připouští použití pseudotřídy hover i na obyčejné prvky — na kurzor myši tedy může reagovat libovolný prvek. V našem případě je tímto prvkem li, který je potomkem prvku div s id nastaveným na nav a při přeběhnutí kurzoru myši změní pozadí na #EBB. Proč podobný trik nepoužívá větší počet lidí? Protože IE/Win podporuje použití pseudotřídy hover pouze u odkazů a u ostatních prvků jej ignoruje. Tedy pokud se do toho nevložíme my — vzpomínáte na soubor csshover.htc, který jsme nedávno použili v pravidle pro prvek body? Jediným posláním tohoto skriptu je umožnit použití pseudotřídy hover na libovolný prvek, jako například na obrázku 6.6.

Obr. 6.6 Menu reaguje na kurzor myši.

Ještě jednou — mění se pozadí prvku li, nikoliv pozadí odkazu uvnitř tohoto prvku. Všechny odkazy mají průhledné pozadí, takže skrz ně vidíme měnící se pozadí rodičovského prvku.

153

154

PROJEKT 6 Použití pseudotřídy hover na libovolném prvku není jen maličkost, jak by se na první pohled mohlo zdát. Kromě tvorby vnořených menu postavených na čisté kombinaci HTML a CSS lze snadno měnit informace na stránce přejetím myši přes jinou část stránky, a to zdaleka není všechno. Za přidání jednoho kousku nestandardního kaskádového stylu to rozhodně stojí.

Zvláštní formátování podmenu Na chvilku si odpočiňte, ať chytíte dech, a budeme pokračovat. Žluté zvýraznění odkazů vedoucích do podmenu posloužilo svému účelu, ale teď už začíná vypadat ve srovnání s okolím poněkud nepatřičně. Nějaké označení odkazů vedoucích do podmenu by se nám ale hodilo, nahradíme tedy žluté pozadí malým obrázkem uloženým v souboru submenu.gif. div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}

Tímto pravidlem umístíme na pozadí prvku jednu malou šipku, bude zarovnaná pět procent šířky prvku od pravého okraje a svisle na střed, viz obrázek 6.7.

Obr. 6.7 Označení podmenu pomocí šipky.

Průzkumníkovy podivnosti

Pokud používáte IE/Win, možná jste si při přejíždění myší přes menu všimli nějakých zvláštních úkazů — někdy například na moment zmizí šipka označující podmenu. Za tyto úkazy mohou s největší pravděpodobností chyby v htc skriptu, případně v jeho zpracování prohlížečem. Jde o dostatečně vzácné a neškodné chyby, můžete na ně s klidem zapomenout — dejte si ale pozor, pokud hodláte htc skript použít na nějaké důležitější stránce.

To už vypadá mnohem lépe. Nepříjemné ale je, že všechny prvky menu mění při přeběhnutí myši barvu stejně — nezávisle na tom, jestli obsahují další menu.

Zesvětleme tedy o pár odstínů barvu pozadí těch prvků, které vedou k dalšímu menu. Stejně jako v minulém případě použijeme pseudotřídu hover místo odkazů na prvky seznamu. div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;} div#nav li.submenu:hover {background-color: #EDD;} div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS Pravidlo bychom mohli použít přímo na odkazy, v tom případě by ale barevné pozadí odkazu zakrylo šipku, a to nechceme. Pokud změníme pozadí prvku seznamu, může být barevné pozadí zobrazeno zároveň se šipkou — viz obrázek 6.8.

Obr. 6.8 Odlišení pozadí prvků vedoucích do podmenu.

Přípravy na zobrazení a skrytí podmenu V tomto okamžiku jsme již dokončili pravidla potřebná pro zobrazení a umístění všech úrovní menu i jednotlivých položek v nich. Zbývá dopsat dynamické zobrazování a skrývání podmenu.

Ještě než se pustíme do patřičných změn v kaskádovém stylu, budeme muset provést několik změn v HTML kódu. Do zdrojového kódu stránky musíme přidat několik tříd, abychom mohli skrývat a odkrývat menu; všechny potřebné změny jsou zvýrazněné ve výpisu 6.3.

Výpis 6.3

Přidání informací o úrovních menu

<div id="nav"> <ul class="level1"> <li><a href="/">Home</a></li> <li class="submenu"><a href="/services/">Services</a> <ul class="level2"> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> <li><a href="/services/guidance/">Guidance</a></li> <li><a href="/services/training/">Training</a></li> </ul> </li> <li><a href="/events/">Events</a></li> <li class="submenu"><a href="/pubs/">Publications</a>

155

156

PROJEKT 6 <ul class="level2"> <li><a href="/pubs/articles/">Articles</a></li> <li class="submenu"><a href="/pubs/tuts/">Tutorials</a> <ul class="level3"> <li><a href="/pubs/tuts/html/">HTML</a></li> <li><a href="/pubs/tuts/css/">CSS</a> <li><a href="/pubs/tuts/svg/">SVG</a> <li><a href="/pubs/tuts/xml/">XML</a> </ul> </li> <li><a href="/pubs/wpapers/">White Papers</a></li> <li><a href="/pubs/comment/">Commentary</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </div>

Proč jsme tyto změny v kódu museli provést? První řešení, které vás jistě napadne, je při přeběhnutí myši nad odkazem zobrazovat "všechny prvky ul, které jsou jeho potomkem". To bychom ale například u menu s publikacemi (publications) zobrazili podmenu s publikacemi i podmenu s průvodci (tutorials). Selektor bychom potřebovali omezit na "všechny prvky ul, které jsou přímým potomkem aktivního odkazu" — jenže to je selektor, který neumí Internet Explorer. Řešením je ruční označkování menu podle úrovně.

Všechna podmenu jsou v současné době viditelná, musíme je tedy ukrýt. Chceme schovat všechny prvky ul, které jsou potomky jiného prvku ul, stačí tedy přepsat již existující pravidlo, výsledek je na obrázku 6.9. div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;}

Obr. 6.9 Skrytí vyšších úrovní menu.

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS

157

Teď už je na stránce vidět pouze první úroveň menu — přesně to jsme chtěli!

Dále bychom chtěli zařídit odkrývání podmenu. Menu druhé úrovně by se mělo zobrazit při přeběhnutí myši přes jeho rodičovský prvek seznamu, zobrazit ho můžeme například nastavením vlastnosti display na hodnotu block. div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;} div#nav ul.level1 li.submenu:hover ul.level2 {display:block;} </style>

Díky tomuto pravidlu dojde ke zobrazení všech seznamů třídy level2 (display: none se změní na display: block), které jsou potomky právě aktivního prvku seznamu třídy level1, který je pro změnu potomkem prvku div s id nastaveným na nav. To bychom měli menu druhé úrovně, co ale s úrovní třetí?

Stačí přepsat selektor. div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

Menu třetí úrovně se budou chovat podobně jako menu druhé úrovně, viz obrázek 6.10.

Obr. 6.10 Po přeběhnutí myši se zobrazí příslušné podmenu.

A to je všechno, k vytvoření rozbalovacího menu prostřednictvím kaskádových stylů, HTML a špetky nestandardních skriptů už toho víc nepotřebujete!

158

PROJEKT 6 Display nebo Visibility?

Místo display: none a display: block jsme ke skrývání a odkrývání menu mohli použít vlastnost visibility. Příslušná pravidla by potom vypadala takto: div#nav ul ul {position: absolute; top: 0; left: 7em; visibility: hidden;} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 { visibility: visible;}

A rozdíl mezi oběma vlastnostmi? Prvek s display: none na stránce vůbec není, prvek s visibility: hidden na stránce sice je, ale není vidět.

Při běžném rozložení prvků je mezi oběma vlastnostmi velký rozdíl, protože neviditelný prvek na rozdíl od neexistujícího ovlivní polohu ostatních prvků. Naše menu jsou ale umístěna absolutně, takže na polohu ostatních prvků v žádném případě vliv nemají — vlastnosti display a visibility jsou u nich tedy ekvivalentní.

Rozhodl jsem se použít display, protože právě tato vlastnost byla použita v původním Peterově kódu.

Dokončovací práce Menu pracuje na výbornou, přidáme jen několik drobností na závěr. Na posledním obrázku bylo vidět, že černé orámování kolem menu působí příliš neohrabaně, navíc se na horní a pravé straně tluče s ohraničením nadpisu stránky a hlavního obsahu.

Tento problém vyřešíme povytažením menu o jeden pixel nahoru a doleva pomocí záporného okraje. div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; background: #FDD;}

Oříznutí okrajů Během testování docházelo u některých verzí IE při posunutí menu pomocí záporného okraje k oříznutí okraje na příslušné straně.

Mějte tedy na paměti, že se podobný problém může vyskytnout a že byste ho měli před "ostrým" použitím návrhu nějak vyřešit.

Dále bychom mohli ohraničení poněkud zesvětlit na barvu použitou k ohraničení nadpisu, viz obrázek 6.11. div#nav ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid #AAA;}

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS Obr. 6.11 Sladění menu s okolím.

Teď už všechno pasuje báječně, díky kaskádovému stylu vyvedenému v celé své kráse ve výpisu 6.4 (a htc souboru, na ten nezapomínejme, i když v knize otištěn není).

Výpis 6.4

Kaskádový styl pro menu

body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* Pro IE na Windows */ h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;} div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; background: #FDD;} div#nav ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid #AAA;} div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;} div#nav li:hover {background: #EBB;} div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;} div#nav li.submenu:hover {background-color: #EDD;} div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

159

160

PROJEKT 6

Změna orientace menu Zatím jsme dokázali dát dohromady víceúrovňové menu, ve kterém se každé podmenu otevírá napravo od svého rodiče. Pokud má být menu v postranním sloupci, nemůžeme si přát víc, co když ale menu v postranním sloupci nebude?

Co když chceme, aby bylo hlavní menu ve vodorovné liště na horním okraji stránky? Mám pro vás dobrou zprávu — nemusíme nic vymýšlet znovu, stačí pár pravidel navíc a jsme tam.

Změna orientace Začneme s přetočením první úrovně menu do vodorovné polohy — jak brzy zjistíte, tato část bude nejjednodušší. Nejprve je potřeba z pravidel pro div#nav a div#nav ul odstranit popis šířky.

Změny v kódu V nové verzi kódu neuvidíte žádné červeně vyznačené změny, protože jsme jen mazali. Pokud vám nejsou provedené změny jasné, nalistujte zpět na výpis 6.4 a oba výpisy porovnejte.

div#nav {float: left; margin: -1px 0 0 –1px; background: #FDD;} div#nav ul {margin: 0; padding: 0; background: white; border: 1px solid #AAA;}

Tímto pravidlem necháme velikost prvků div a div li na jejich vlastním uvážení, o samotné menu se postaráme za okamžik. Zatím jsme vytoužené vodorovné lišty nedosáhli, k tomu by si musela sama určovat svou šířku.

Abychom lištu dostali nad hlavní obsah, musíme jí nastavit vhodný okraj. div#nav {float: left; margin: -1px 0 0 7em; background: #FDD;}

Tímto pravidlem odstrčíme levý okraj lišty o šířku okraje hlavního obsahu doprava.

Navigační div je plovoucí a nemá nastavenou žádnou šířku, sám se tedy natahuje podle svého obsahu. Pokud necháme plavat i prvky seznamů (což uděláme), budou si i ony určovat svou vlastní velikost samy, včetně prvků menu první úrovně. Pro některé aplikace to může být přijatelné, v našem případě bychom ale chtěli, aby měly pevnou šířku. Proč ne třeba 7em? Zatím nám tato hodnota všude dobře posloužila. div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7em; border-bottom: 1px solid #CCC;}

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS Proč jsme nechali prvky seznamů plavat? Aby se srovnaly vodorovně. Kdybychom je plavat nenechali, dostali bychom svislý blok odkazů, tam už jsme ale byli. A proč chceme, aby měly položky menu vyšší úrovně pevnou šířku? Představte si menu, ve kterém má každá položka různou šířku — to by asi nevypadalo nejlépe. Menu typu div#nav ul ul tedy přiřadíme pevnou šířku a odstraníme u nich popis vlastností left a top. div#nav ul ul {position: absolute; width: 7em; display: none;}

Předchozí dvě změny nám dohromady dávají stránku z obrázku 6.12.

Obr. 6.12 Změna orientace menu aneb ze svislého seznamu nástrojovou lištou.

Na obrázku 6.12 nás zajímá šest věcí:

◆

Hlavní obsah stránky je zalomen kolem plovoucího prvku div. To se nám příliš nelíbí, takže ho zastrčíme pod menu.

◆

Vrátilo se nám červené pozadí hlavního prvku div. Tento prvek totiž obsahuje neuspořádaný seznam s absolutně umístěnými prvky, dokonce i potomci těchto prvků jsou absolutně umístěni. Výška seznamu je proto nulová a my vidíme pozadí prvku div za ním.

◆

Právě jsme si řekli, že má prvek ul nulovou výšku — nemělo by nás tedy překvapit, že tlustá šedá čára horního okraje menu je ohraničení tohoto prvku. Hlavní prvek div se kolem plovoucích prvků menu roztáhl, sám totiž plave a plovoucí rodiče se roztahují kolem plovoucích potomků.

◆

Za viditelné spodní ohraničení menu mohou prvky seznamu.

161

162

PROJEKT 6

◆

Menu druhé úrovně jsou přesně tam, kde jsme je chtěli mít, protože jsou stále umístěna relativně vzhledem ke svým rodičům. Menu druhé úrovně se na spodním okraji menu první úrovně nachází díky nastavení vlastnosti top na hodnotu auto. (Hodnotu top jsme ze stylu odstranili, její výchozí hodnota je auto.) Horní okraj prvků je v tomto případě tam, kde by se ocitl při normálním umístění prvků — menu druhé úrovně jsou tedy přesně na místě, na které by se dostala při normálním pozicování.

◆

Automatické umístění, které jsme probrali v předchozím odstavci, se týká i menu druhé úrovně. Ta se tedy překrývají se svými rodičovskými menu, což bude potřeba opravit.

A ještě jedna V IE/Win si můžete všimnout ještě další věci: levý okraj celé navigační lišty se zdvojnásobil.

Za toto nevítané prodloužení může chyba v IE, který z nepochopitelných důvodů u plovoucích prvků zdvojnásobuje okraje. Jediným rozdílem oproti rozumným prohlížečům je ale poloha lišty, takže se tentokrát opravování ve prospěch IE vzdáme a budeme chybu po zbytek projektu ignorovat.

Vezměme to všechno pěkně popořadě.

Záplatujeme Nejjednodušší bude zalomení hlavního obsahu. Místo vlastnosti clear (ta by posunula celý prvek div s obsahem, včetně levého ohraničení) použijeme jednoduché řešení v podobě horní výplně. Prvky seznamu jsou vysoké zhruba 1,5 em, použijeme hodnotu o něco málo vyšší. #main {color: #CCC; margin-left: 7em; padding: 2em 0 1px 5%; border-left: 1px solid;}

Obsah prvního odstavce se posune asi o 3em směrem dolů; za 2em může horní výplň a za zbývající em horní okraj odstavce.

Dále zatočíme s červeným pozadím. Chceme, aby byly všechny odkazy orámovány a měly bílé pozadí. Kolem odkazů už se nám roztahuje hlavní prvek div, stačí změnit jeho pozadí a ohraničení (viz obrázek 6.13). div#nav {float: left; margin: -1px 0 0 7em; background: #FFF; border: 1px solid #AAA;}

Ještě pořád tu máme širokou šedou čáru při horním okraji menu, pozůstatek orámování prvku ul. Mohli bychom jednoduše odstranit orámování všech prvků ul, ale to bychom si zničili orámování podmenu.

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS

163

Obr. 6.13 Přidali jsme rámeček pozadí menu; posunuli jsme hlavní obsah.

Místo toho jen zesvětlíme barvu orámování, horní a spodní čáry se zbavíme nastavením její šířky na nulu. div#nav ul {margin: 0; padding: 0; background: white; border: 1px solid #CCC; border-width: 0 1px;}

Všechna podmenu budou po stranách orámována, zatímco orámování nejvyššího prvku ul kvůli jeho nulové výšce zmizí (zbude mu jen levé a pravé ohraničení, které nemá žádnou výšku). A kde se vzala čára na spodní straně podmenu? Ta je výsledkem spodního ohraničení prvků seznamu — opticky v tom není žádný rozdíl. Spodní ohraničení prvků seznamu se ale nehodí u spodního okraje lišty, kde se setkává se spodním ohraničením hlavního prvku div. Této nepěkné kombinace se můžeme zbavit odstraněním spodního ohraničení z pravidla div#nav li. div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7em;}

Tím si ale zase zničíme spodní ohraničení prvků seznamu, které se nám hodí — zpět je přidáme následujícím pravidlem: div#nav ul ul {position: absolute; width: 7em; display: none;} div#nav ul ul li {border-bottom: 1px solid #CCC;} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

164

PROJEKT 6 A máme tu ještě jednu nepříjemnost patrnou na první pohled — obrázek se šipkou. Šipka ukazující napravo nedává u podmenu vysouvajících se směrem dolů příliš smysl, nahradíme ji obrázkem se šipkou ukazující směrem dolů (dropmenu.gif). Stačí změnit jedno pravidlo, výsledek je na obrázku 6.14. div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}

Obr. 6.14 Opravené okraje a nová šipka.

Úpravy podmenu Jak už jste si asi všimli na obrázku 6.14, podmenu nevypadají na rozdíl od menu první úrovně nikterak slavně. Tak například — na řádku s průvodci (tutorials) je kvůli naší poslední změně šipka směrem dolů. Podmenu s průvodci se navíc překrývá s posledními položkami menu publikace (publications), obě chyby bude potřeba napravit.

Se šipkou je to jednoduché — ne že by to bylo s překrývajícími menu nějak zvlášť složité, ale se šipkou je to jednodušší. Stačí u všech položek menu, které jsou potomky jiné položky menu, nahradit obrázek se šipkou dolů obrázkem se šipkou doprava. Menu první úrovně se pravidlo nedotkne, protože není potomkem žádného dalšího menu. div#nav ul ul li {border-bottom: 1px solid #CCC;} div#nav li.submenu li.submenu {background-image: url(submenu.gif);} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS Praxe je ovšem poněkud složitější, v htc skriptu pro Internet Explorer je totiž chyba. Při přeběhnutí myší přes prvek dojde v IE ke změně pozadí na výchozí nastavení, takže se šipka nastavená v pozadí poskládá jako dlaždice po celé ploše prvku. Abychom se této chyby zbavili, musíme explicitně požádat o správné použití obrázku. div#nav li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;} div#nav li.submenu li.submenu:hover {background-color: #EDD;} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

Tím je problém vyřešen.

A teď k umístění menu třetí úrovně. Ve skutečnosti se budeme nejprve věnovat menu druhé úrovně — i nadále chceme, aby se dotýkala svým horním okrajem spodního okraje vodorovné lišty, jen si o to raději řekneme přímo. Dále bychom chtěli, aby se levá strana obsahu menu druhé úrovně zarovnala s levým okrajem obsahu prvku seznamu — menu druhé úrovně má na rozdíl od menu první úrovně nastaveno levé ohraničení, takže je jeho obsah příliš (o jeden pixel) vpravo. K vyrovnání tohoto nedostatku použijeme zápornou hodnotu vlastnosti left. div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;} div#nav ul.level2 {top: 1.5em; left: -1px;} </style>

Hodnotu vlastnosti top jsme dostali sečtením výplně prvku seznamu nejvyšší úrovně a jeho font-size — musíme se ale ujistit, že je výška řádku každého z prvků seznamu právě 1em. div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7em; line-height: 1em;}

Teď už zbývají doopravdy jen menu třetí úrovně. Ta by se měla svým horním okrajem shodovat s rodičem, zatímco jejich levý okraj by měl těsně přiléhat k pravému okraji rodiče. K vodorovnému posunutí můžeme použít naší oblíbenou hodnotu 7em, ve svislém směru nám stačí jeden záporný pixel. div#nav ul.level2 {top: 1.5em; left: -1px;} div#nav ul.level3 {top: -1px; left: 7em;} </style>

A ještě jedna, tentokrát už doopravdy poslední, věc — vzpomínáte na změnu ohraničení, která způsobila odstranění horního ohraničení podmenu? Vztahuje se i na podmenu třetího stupně, musíme jim tedy horní čáru vrátit, čímž se dostáváme k obrázku 6.15. div#nav ul.level3 {top: -1px; left: 7em; border-top: 1px solid #CCC;}

165

166

PROJEKT 6 Obr. 6.15 Správné umístění vyšších úrovní menu.

Závěrečnou verzi kaskádového stylu si můžete prohlédnout ve výpisu 6.5.

Výpis 6.5

Kaskádový styl pro vodorovné menu

body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* Pro IE na Windows */ h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 2em 0 1px 5%; border-left: 1px solid;} div#nav {float: left; margin: -1px 0 0 7em; background: #FFF; border: 1px solid #AAA;} div#nav ul {margin: 0; padding: 0; background: white; border: 1px solid #CCC; border-width: 0 1px;} div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7em; line-height: 1em;} div#nav li:hover {background: #EBB;} div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;} div#nav li.submenu:hover {background-color: #EDD;} div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; width: 7em; display: none;} div#nav ul ul li {border-bottom: 1px solid #CCC;} div#nav li.submenu li.submenu { background-image: url(submenu.gif);} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;} div#nav ul.level2 {top: 1.5em; left: -1px;} div#nav ul.level3 {top: -1px; left: 7em; border-top: 1px solid #CCC;}

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS

Poznámka na závěr Je pár věcí, které byste měli při práci na kaskádovém víceúrovňovém menu popsaném v této kapitole vzít v úvahu. Ponechme stranou otázku použitelnosti tohoto menu (někteří lidé jsou mu nakloněni, jiní proti němu protestují) a podívejme se kriticky na jeho chování.

Zobrazení a skrývání podmenu se řídí pohybem myši přes nadřazenou položku menu, pro uživatele tedy není nic těžkého celé menu omylem zavřít. Jakmile se kurzor myši ocitne za hranicí menu, všechna jeho viditelná podmenu v okamžení zmizí. Menu naprogramovaná v jazyce JavaScript mívají stejné potíže — v jejich případě lze ovšem naprogramovat časovač, který příliš rychlému mizení podmenu zabrání. Kaskádové styly tuto možnost nemají a těžko kdy mít budou.

Z tohoto důvodu je zcela nezbytné, aby menu vyšší úrovně byla těsně vedle svých rodičovských položek, nebo je dokonce drobně překrývala. Pokud se mezi menu a jeho podmenu vloudí byť jen nepatrná mezera, dojde při pohybu kurzoru myši s velkou pravděpodobností k uzavření podmenu. V takovém případě je v podstatě nemožné se do nějakého menu dostat.

Samozřejmě vám nikdo nebrání použít kaskádové styly pro formátování menu a JavaScript pro jeho chování (zobrazování, ukrývání, časovače apod.). Toto řešení je již mimo rámec naší knihy, základem by bylo odstranění pravidla s display: block a vypuštění htc skriptu, obě konstrukce by byly nahrazeny skriptem jazyka JavaScript.

A které z řešení je lepší? Těžko říci — někteří lidé zastávají názor, že je CSS především jazyk pro popis vzhledu a neměl by sloužit k popisu chování, pro který se tak dobře hodí JavaScript. Jiní zase tvrdí, že chování menu ještě patří do pravomoci CSS, a tak je popsaná technika v naprostém pořádku. Podle všeho to vypadá, že se debata ještě nějakou dobu potáhne — nejjednodušší je rozhodnout se pro jedno z řešení a zbytek pustit z hlavy.

167

168

PROJEKT 6

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS

Možnosti dalšího rozšíření Rozbalovací menu už s pomocí CSS vytvořit umíte, zkuste jej podle následujících nápadů vyšperkovat.

1. Kaskádový styl z první poloviny projektu upravte tak, aby měly všechny položky menu po svém levém okraji šedý proužek — dokážete to bez použití obrázku? Proužek by měl navíc u právě aktivní položky menu změnit svou barvu na červenou a když už jsme u barev, zkuste každou úroveň menu oproti předchozí lehce ztmavit.

2. Upravte styl z druhé poloviny projektu tak, aby byly položky hlavního menu oddělené šedou čárou.

Dokážete to bez jakékoliv změny vzhledu podmenu?

169

170

PROJEKT 6

3. Přepracujte styl druhé části projektu tak, aby se menu třetí úrovně vysouvala nalevo. Pokud má výsledek vypadat co možná nejlépe, musíte text těchto menu zarovnat napravo a posunout ho až k pravému okraji menu. Budete potřebovat nový obrázek šipky, stačí v nějakém grafickém editoru vodorovně převrátit obrázek šipky uložený v souboru submenu. gif.