eric meyer o css – pokračujeme

Eric

Mey

er o

y

Eric Meyerwww.zonerpress.cz

© Foto: Jiří Heller

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

E N C Y K L O P E D I E W E B D E S I G N E R A

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.


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


profesionáln!

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 PressZONER software s.r.o.Koželužská 7, 602 00 Brno

Překlad: Tomáš ZnamenáčekOdpově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: [email protected] http://www.zonerpress.cz

ISBN 80-86815-17-X

V

ObsahNěkolik slov o autorovi ixNěkolik slov o recenzentech xPoděkování xiPošlete nám váš názor xiiPředmluva xiiiÚvod xviiCo můžete od této knihy očekávat xixPřehled projektů xixDoprovodná webová stránka xxTypografické konvence xx

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

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

PROJEKT 2 Vytváříme galerii fotografií 53

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

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

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

VI

PROJEKT 4 Práce s pozadím 101

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

PROJEKT 5 Seznamy a menu 123

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

PROJEKT 6 Rozbalovací menu založená na CSS 143

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

PROJEKT 7 Atraktivní záložky 171

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

VII

PROJEKT 8 Styl pro weblog 199

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

PROJEKT 9 Navrhujeme osobní stránku 221

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

PROJEKT 10 Design Zahrady 245

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

REJSTŘÍK 281

VIII

Věnováno památce na moji matku,

Carol Suzanne Meyerovou,

skutečnou přítelkyni a štěstí pro všechny, kdo ji znali.

IX

Několik slov o autoroviEric 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 za-bývá návrhem WWW prezentací v souladu se standardy. Tím svým klientům — mezi které patří například Macro-media 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 cleveland-ský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 Ri-ders, 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 Con-ference.

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.

X

Několik slov o recenzentechTito lidé se svými praktickými zkušenostmi podíleli na celém procesu tvorby knihy, kte-rou právě držíte v rukou. Při psaní textu prohlédli tito odborníci důkladně všechny tech-nické 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ěno-vané 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.web-standards.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 obrazov-kou, najdete ho na místním tržišti nebo v nějaké malé pražírně kávy.

XI

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 to-leranci projevenou během uzávěrek (přesněji řečeno — během překračování domluve-ný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, kte-ré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

XII

Pošlete nám váš názorJako č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ě zhodno-tí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: [email protected]: Zoner Press ZONER software, s. r. o Miroslav Kučera Koželužská 7 602 00 Brno

XIII

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 gra-fik, ale oni věděli, že mi složitější technické problémy nedělají žádné problémy. Nejed-notnost 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 Naviga-tor 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.

XIV

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ádo-vý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án-kem 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 Me-yer o CSS — jeho první a neocenitelný pohled na CSS napsaný ve formě krátkých projek-tů. Hned první noc, kterou jsem knihu držel v rukou, jsem se ponořil hluboko do kapito-ly 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ě auto-ritativně. 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 to-muhle mi pozadí zmizelo pod plovoucím prvkem? Jasně…"

XV

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ásle-dují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 Bowmanzakladatel a ředitel Stopdesign

San Francisco

XVII

ÚvodVe 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 prv-ní 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 jed-ná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žnos-ti výsledného návrhu, jeho zvýšené dostupnosti, snížené velikosti a překrásných vizuál-ní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 kni-hy 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čenaPokud 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.

XVIII

◆ 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 Me-yer 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í.

XIX

Co můžete od této knihy očekávatOd 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 pro-hlíž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 po-dař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 do-provodný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řede-vší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 kni-ha 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 ka-pitola. 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. Na-pří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 jed-notek 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.

XX

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ánkaKaž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 pro-jektu 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 poho-dlné 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é konvenceTato kniha se řídí několika typografickými konvencemi, které by vám měly usnadnit čte-ní.

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 hodno-tách (10px).

Delší úryvky zdrojového kódu jsou celé vysázeny neproporcionálním písmem a čer-vená 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ěn-ný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:

XXI

<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 ne-jsou 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ám-ky k hlavnímu textu, najdete jichv 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 WWWbudou obsahovat adresy souborů, které si máte stáhnout nebozobrazit 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ě.

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, vyna-ložená námaha tedy bude stát za to. V tomto projektu si ukáže-me, jak lze z víceúrovňového seznamu odkazů vytvořit rozba-lovací menu.

6 Rozbalovací menu založená na CSSDlouhá je cesta poučováním, krátká a účinná na příkladech.

LUCIUS ANNAEUS SENECA

144 PROJEKT 6

Cíle projektuZá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ěko-lik 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ása-hů 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ádo-vý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 hoto-vi.

PřípravyStáhněte si z WWW soubory k šestému projektu. Pokud hodláte při čtení všech-ny 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ís-tě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.

Pokud potřebujete raduohledně stahování souborů

z doprovodné WWW stránky,podívejte se do úvodu knihy.

ROZBALOVACÍ MENU ZALOŽENÁ NA CSS 145

Výpis 6.1 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>

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é po-zadí 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>

Výchozí dokument.

Obr. 6.1

Pojmenováníhlavního prvku

Možná vám vrtá hlavou, pročse na hlavní prvek divodkazujeme v kaskádovémstylu jako na div#nav místo prostého #nav. Použitímdelšího selektoru se vyhýbáme chybě v IE/Win, který dělápři použití kratší variantypotíže s dynamickýmzobrazováním podmenu.Delší varianta selektoruproblém řeší — nevím siceproč, 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>

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í menuJeš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ředuNaší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án-ce Petera Nederlofa (autora skriptu), http://www.xs4all.nl/~peterned/cs-shover.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 ja-zyka 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 ka-pacitou 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.

Řá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.

�


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 po-mocí 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.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.

Umístění podmenuDalším krokem je přesunutí podmenu na místo, na kterém by se měly ve výsled-né 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.

Po zkrácení odsazení sevšechny seznamy vešlydo postranního sloupce.

Obr. 6.2

Okraje a výplň

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

�

148 PROJEKT 6

K tomu je potřeba všechny prvky seznamu přemluvit, aby se chovaly jako výcho-zí 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 zname-ná, ž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;}

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

Obr. 6.3


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 obsa-hu stránky už nejsou jeho obsahem.

◆ Poslední dvě položky prvního podmenu se překrývají s prvními dvěma po-lož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čí menuPodmenu 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 podme-nu, 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 jedno-duché 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;}

Po nastavení pozadí už je překryv mezi prvním a druhým podmenu jasně patr-ný. 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če-ní jen kolem textu odkazu.

Pokud má menu pracovat správně a chovat se podle očekávání uživatelů, potře-bujeme 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;}

Vzhled podmenu sezlepšil a zvýraznili jsme prvky

seznamu, které obsahují podmenu.

Obr. 6.4

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.


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 nevy-plní 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 jednot-livé 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

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

Obr. 6.5

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 po-tř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 tou-to 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.


InteraktivitaPř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áz-ku 6.6.

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.

Menu reaguje nakurzor myši.

Obr. 6.6

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í podmenuNa chvilku si odpočiňte, ať chytíte dech, a budeme pokračovat. Žluté zvýraz-ně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ů ve-doucí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.

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 odka-zů 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;}

Označení podmenu pomocí šipky.

Obr. 6.7

Průzkumníkovypodivnosti

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ěpodobnos-tí 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.

�


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 se-znamu, může být barevné pozadí zobrazeno zároveň se šipkou — viz obrázek 6.8.

Přípravy na zobrazení a skrytí podmenuV 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é zob-razová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ři-dat 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>

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

Obr. 6.8

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ě napad-ne, 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še-ní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. Chce-me 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;}

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

Obr. 6.9


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 (dis-play: 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.

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!

Po přeběhnutí myši sezobrazí příslušné podmenu.

Obr. 6.10

158 PROJEKT 6

Dokončovací práceMenu pracuje na výbornou, přidáme jen několik drobností na závěr. Na po-sledním obrázku bylo vidět, že černé orámování kolem menu působí příliš ne-ohrabaně, 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 po-mocí záporného okraje.div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; background: #FDD;}

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

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 nevidi-telný 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.

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ůževyskytnout a že byste ho měli

před "ostrým" použitímnávrhu nějak vyřešit.


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;}

Sladění menu s okolím.

Obr. 6.11

160 PROJEKT 6

Změna orientace menuZatí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 orientaceZač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.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é vodorov-né 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 do-prava.

Navigační div je plovoucí a nemá nastavenou žádnou šířku, sám se tedy natahu-je 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;}

Změny v kódu

V nové verzi kódu neuvidítežádné červeně vyznačené

změny, protože jsme jenmazali. Pokud vám nejsou

provedené změny jasné,nalistujte zpět na výpis 6.4

a oba výpisy porovnejte.

�


Proč jsme nechali prvky seznamů plavat? Aby se srovnaly vodorovně. Kdyby-chom 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řed-stavte 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.

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ž ob-sahuje neuspořádaný seznam s absolutně umístěnými prvky, dokonce i po-tomci 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.

Změna orientace menuaneb ze svislého seznamunástrojovou lištou.

Obr. 6.12

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 nor-má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.

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

ZáplatujemeNejjednodušší 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 jedno-duché ř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 o-rá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.

A ještě jedna

V IE/Win si můžete všimnoutješ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 IEvzdáme a budeme chybu po

zbytek projektu ignorovat.


Místo toho jen zesvětlíme barvu orámování, horní a spodní čáry se zbavíme na-stavení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če-ní, 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é kom-binace 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;}

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

Obr. 6.13

164 PROJEKT 6

A máme tu ještě jednu nepříjemnost patrnou na první pohled — obrázek se šip-kou. Š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ů (dropme-nu.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;}

Úpravy podmenuJak 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 šip-kou 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;}

Opravené okraje a nová šipka.

Obr. 6.14


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é po-už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 by-chom 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íbe-nou 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 do-stáváme k obrázku 6.15.div#nav ul.level3 {top: -1px; left: 7em; border-top: 1px solid #CCC;}

166 PROJEKT 6

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;}

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

Obr. 6.15


Poznámka na závěrJe pár věcí, které byste měli při práci na kaskádovém víceúrovňovém menu po-psané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že-ní zmizí. Menu naprogramovaná v jazyce JavaScript mívají stejné potíže — v je-jich 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 podsta-tě 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 dis-play: block a vypuštění htc skriptu, obě konstrukce by byly nahrazeny skrip-tem jazyka JavaScript.

A které z řešení je lepší? Těžko říci — někteří lidé zastávají názor, že je CSS pře-devší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 pra-vomoci 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.

168 PROJEKT 6


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í po-lož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é polo-viny projektu tak, aby byly položky hlavního menu oddělené šedou čárou. Dokážete to bez jakékoliv změny vzhledu podmenu?

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 zarov-nat napravo a posunout ho až k pravému okraji menu. Budete potřebovat nový obrázek šipky, stačí v nějakém grafickém edi-toru vodorovně převrátit obrázek šipky uložený v souboru submenu.gif.

eric meyer o css – pokračujeme

Documents