IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

CSS. Gotowe
rozwizania
Autor: Richard York
Tumaczenie: ukasz Piwko
ISBN: 83-246-0574-6
Tytu oryginau: CSS Instant Results
Format: B5, stron: 392

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Wykorzystaj w swoich projektach moliwoci arkuszy stylw

Stwrz efektowny i czytelny mechanizm nawigacji
Uyj stylw w internetowym kliencie poczty
Popraw wygld formularzy na stronach WWW
Kaskadowe arkusze stylw zmieniy oblicze sieci WWW. Dziki nim definiowanie
wygldu strony WWW stao si znacznie prostsze. Przed ich pojawieniem si wygld
kadego elementu strony by okrelany w kodzie HTML. Zmiana ukadu graficznego,
kolorystyki lub kroju czcionki wymagaa modyfikacji kadego ze znacznikw.
Dzi, za pomoc arkusza stylw, moemy przedefiniowa wygld caej witryny,
zmieniajc tylko jeden plik zawierajcy style. Jednak technologia CSS umoliwia nie
tylko okrelanie kroju i wielkoci czcionki pozwala take na uzyskanie ciekawych
efektw wizualnych i nadanie stronie niepowtarzalnego wygldu.
Ksika CSS. Gotowe rozwizania to przegld dziesiciu projektw witryn WWW
opartych na kaskadowych arkuszach stylw. Czytajc j, poznasz rne zastosowania
technologii CSS od definiowania wygldu elementw strony po tworzenie interfejsw
uytkownika dla aplikacji internetowych. Znajdziesz tu przykady atrakcyjnego
i funkcjonalnego mechanizmu nawigacji, dynamicznych list rozwijanych i przegldarki
plikw. Kady z projektw zosta przedstawiony w takiej postaci, e implementacja
go we wasnych pracach nie sprawi Ci adnego problemu.
Nawigacja oparta na zakadkach
Wielokolumnowy ukad strony WWW
Dynamiczne listy rozwijane
Internetowy pokaz slajdw
Zmiana wygldu formularzy
Interfejs uytkownika dla przegldarki plikw
Kalendarz z terminarzem
Nadaj swoim stronom niepowtarzalny wygld

O autorze ..................................................................................................................................................... 7
Podzikowania ............................................................................................................................................ 9
Wstp ...........................................................................................................................................................11
Rozdzia 1. Zakadki ....................................................................................................................................17
Projekt ........................................................................................................................ 18
Kod i jego objanienie .................................................................................................. 19
Testowanie i ograniczenia ............................................................................................. 29
Co daje nam biblioteka IE7? .................................................................................... 30
Uywanie i modyfikacja projektu .................................................................................... 31
Zakadki z obrazkami w tle ....................................................................................... 32
Obrazki w tle zawierajce tekst ................................................................................ 36
Zakadki elastyczne ................................................................................................. 39

Rozdzia 2. Ukad wielokolumnowy .......................................................................................................... 47

Projekt ........................................................................................................................ 48
Kod i jego objanienie .................................................................................................. 50
Testowanie i ograniczenia ............................................................................................. 56
Uywanie i modyfikacja projektu .................................................................................... 57
Ukad dwukolumnowy .............................................................................................. 58
Elastyczne kolumny nawigacyjne .............................................................................. 61
Metoda elementw pywajcych ............................................................................... 66
Stare dobre sztuczki dostosowujce dla Internet Explorera ......................................... 72

Rozdzia 3. Dynamiczne listy rozwijane .................................................................................................. 79

Projekt ........................................................................................................................ 80
Kod i jego objanienie .................................................................................................. 80
Testowanie i ograniczenia ............................................................................................. 87
Inne ograniczenia .................................................................................................... 93

CSS. Gotowe rozwizania

Uywanie i modyfikacja projektu .................................................................................... 94
Implementacja dynamicznej listy rozwijanej opartej na JavaScript ................................ 95
Wasne ta i ramki ................................................................................................. 101
Listy rozwijane w d ............................................................................................. 110

Rozdzia 4. Wicej o dynamicznych listach rozwijanych

i niezwykle wszechstronnej pseudoklasie :target ............................................................ 115
Projekt ...................................................................................................................... 116
Kod i jego objanienie ................................................................................................ 117
Testowanie i ograniczenia ........................................................................................... 125

Rozdzia 5. Pokaz slajdw .......................................................................................................................127

Projekt ...................................................................................................................... 128
Kod i jego objanienie ................................................................................................ 128
Testowanie i ograniczenia ........................................................................................... 137

Rozdzia 6. Ramki i zaokrglone rogi .....................................................................................................149

Projekt ...................................................................................................................... 150
Kod i jego objanienie ................................................................................................ 151
Testowanie i ograniczenia ........................................................................................... 157
Uywanie i modyfikacja projektu .................................................................................. 159

Rozdzia 7. Stosowanie CSS w internetowym kliencie poczty .............................................................169

Projekt ...................................................................................................................... 170
Kod i jego objanienie ................................................................................................ 173
Testowanie i ograniczenia ........................................................................................... 186
Uywanie i modyfikacja projektu .................................................................................. 191
Dodawanie okna podgldu wiadomoci ................................................................... 192
Ukad trzykolumnowy la Microsoft Outlook 2003 ................................................... 197

Rozdzia 8. Formularze ...........................................................................................................................209

Projekt ...................................................................................................................... 210
Kod i jego objanienie ................................................................................................ 211
Testowanie i ograniczenia ........................................................................................... 245

Rozdzia 9. Interfejs uytkownika internetowej przegldarki plikw ...............................................253

Projekt ...................................................................................................................... 255
Kod i jego objanienie ................................................................................................ 256
Tworzymy szkielet ................................................................................................. 274
Waciwoci menu ................................................................................................ 279
Drzewo katalogw ................................................................................................. 284
Widoki ................................................................................................................. 288
Okna pop-up ......................................................................................................... 302
Testowanie i ograniczenia ........................................................................................... 308
Uywanie i modyfikacja projektu .................................................................................. 317
Widok Szczegy systemu Windows ........................................................................ 317
Okno dialogowe Zapisz jako ................................................................................... 323
Okno dialogowe wyboru katalogu ............................................................................ 337

Spis treci

Rozdzia 10. Kalendarz ............................................................................................................................345

Projekt ...................................................................................................................... 346
Kod i jego objanienie ................................................................................................ 346
Testowanie i ograniczenia ........................................................................................... 361
Uywanie i modyfikowanie projektu .............................................................................. 368

Skorowidz ................................................................................................................................................381

Zakadki stay si wszechobecne na stronach internetowych mona je znale prawie

wszdzie (jednym z najlepszych przykadw moe by strona Apple.com). Kiedy strony
internetowe tworzono gwnie w oparciu o mapy odnonikw lub proste obrazki i tabele,
ktre, umieszczone wewntrz znacznika <a>, suyy jako zakadki. W niniejszym rozdziale
prezentuj kilka sposobw implementacji zakadek na stronie przy uyciu CSS. Takie podejcie pozwala na utworzenie czytelniejszego i bardziej dostpnego kodu.
Mimo nielicznych problemw kada bardziej znaczca przegldarka potrafi obsuy prosty, przyjazny dla uytkownika i stabilny system zakadek. Jak to zawsze bywa z CSS, nie
kade podejcie bdzie dziaao bez zarzutw w kadej z nich. Aby temu zapobiec, opisuj
obejcia i sztuczki niezbdne do tego, aby nasz projekt wyglda bez zarzutw w jak najwikszej liczbie przegldarek. W dalszej czci rozdziau poka, jak przy uyciu biblioteki
open source JavaScript IE7 spowodowa, aby przegldarka Internet Explorer w wersjach 5.5
oraz 6 bya kompatybilna z bardziej zaawansowanymi technikami, a take jak JavaScript
pozwala na pokonanie przeszkd niekompatybilnoci pomidzy przegldarkami nie tylko
przy uyciu biblioteki IE7, lecz take przy uyciu innych narzdzi, takich jak np. stworzony
specjalnie dla Internet Explorera atrybut CSS expression(), ktry odgrywa niebagateln rol w wielu przedstawionych w niniejszej ksice projektach.
Przed rozpoczciem pracy nad projektem trzeba go dokadnie rozplanowa. Naley zada
sobie pytanie: Jakie waciwoci powinien mie mj system zakadek?. Poniej znajduje
si lista najwaniejszych celw projektu:
n

Kod uyty do utworzenia zakadek musi by prosty i zrozumiay.

Tekst uyty w zakadkach nie moe znajdowa si na obrazkach.

Zakadki musz zmienia kolor, gdy uytkownik najeda na nie kursorem.

Zakadka odpowiadajca aktualnie wczytanej stronie musi by wyrniona.

Nastpny podrozdzia opisuje komponenty CSS, XHTML oraz JavaScript potrzebne do osignicia zamierzonych celw.

18

CSS. Gotowe rozwizania

Projekt prezentowany w niniejszym rozdziale nie jest zbyt atrakcyjny wizualnie. Moim celem byo raczej pokazanie, jak w prosty sposb stworzy system zakadek przy uyciu CSS
bez obrazkw i tabel. W dalszej czci prezentuj, jakie naley wnie poprawki, aby zakadki pynnie si rozcigay oraz w jaki sposb ustawi waciwoci ramek oraz ta (chocia wersja podstawowa projektu jest bardzo prosta). Poniej znajduje si lista celw z poprzedniego podrozdziau wzbogacona o opis waciwoci CSS i kodu XHTML potrzebnych
do ich osignicia:
n

Kod uyty do stworzenia zakadek musi by prosty i zrozumiay. Pierwszy

cel jest raczej prosty do osignicia mwi on, eby dane umieszcza wewntrz
waciwych znacznikw. Oznacza to, e struktura naszego systemu zakadek bdzie
oparta na nienumerowanej licie HTML. Ze wzgldu na fakt, e to, co chcemy
zaprezentowa, to nic innego jak lista odnonikw (niekoniecznie w okrelonej
kolejnoci), elementy <ul> i <li> wydaj si by najlepszym rozwizaniem. Dziki
CSS moliwa jest zmiana listy nienumerowanej na zakadki. Dokonuje si tego
poprzez usunicie domylnego formatowania elementw listy (atrybuty margin,
padding oraz list-style). Nastpnie elementom <li> nadaje si wasne waciwoci
ramek, marginesw oraz, aby elementy wystpoway jeden obok drugiego, uywa
si albo atrybutu CSS float, bd stosuje si pozycjonowanie absolutne (deklaracja
position: absolute). W niniejszym projekcie korzystamy z atrybutu float, poniewa
jego zastosowanie jest troch mniej kopotliwe ni pozycjonowanie absolutne.

Tekst uyty na zakadkach nie moe znajdowa si na obrazkach. Drugi cel

projektu zwizany jest z dostpnoci i przyjaznoci dla robotw wyszukujcych.
Jeeli tekst zakadek znajdowaby si na obrazkach, to osoby niewidome korzystajce
np. z przegldarki JAWS nie byyby w stanie go odczyta. Dodatkowo take
roboty wyszukujce nie odczytayby takiego tekstu, ktry moe przecie zawiera
wartociowe z punktu widzenia pozycjonowania sowa kluczowe. W dalszej
czci rozdziau pokazuj sposb stosowania obrazw ta przy zachowaniu tekstu
i utrzymaniu widzialnoci dla robotw oraz dostpnoci.

Zakadki musz zmienia kolor, gdy uytkownik najeda na nie kursorem.

Cel ten jest bardzo prosty do osignicia. Chcemy po prostu, aby uytkownik mia
wizualne potwierdzenie, e dana zakadka jest elementem nawigacji. Jednym ze
sposobw osignicia tego efektu jest zmiana koloru ta za pomoc pseudoklasy
CSS :hover.

Zakadka odpowiadajca aktualnie wczytanej stronie musi by wyrniona.

Czwarty cel jest bardzo czsto spotykanym efektem na stronach internetowych.
Mwic krtko, chcemy, aby byo wiadomo, e aktualnie zaadowana strona
odpowiada stronie, do ktrej prowadzi dana zakadka. Do osignicia tego celu
potrzeba troch wicej pracy niezbdnych jest pi stron XHTML. Elementowi
<body> kadej z nich przypisujemy unikalny identyfikator ID. Nastpnie nadajemy
unikalny identyfikator kademu elementowi <li> stanowicemu odrbn zakadk.
Dziki tej metodzie bdzie mona nada inny styl zakadce odpowiadajcej aktualnie
zaadowanej stronie.

Rozdzia 1. n Zakadki

19

To tyle, jeli chodzi o teori. W nastpnym podrozdziale rozpoczynamy ju prac z kodem.

Pamitaj, e kompletny kod tego projektu dostpny jest na pycie CD doczonej do ksiki.

Aby utworzy system zakadek za pomoc XHTML i CSS, naley wykona ponisze polecenia:
1. Tworzymy dokumenty HTML o nastpujcej treci (rnice pomidzy

dokumentami zostay wyrnione):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pl'"
<head"
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2' /"
<title"</title"
<link rel='stylesheet' type='text/css' href='tabs.css' /"
<!-- sztuczka dostosowujca dla przegldarek Microsoftu -->
<!--[if lt IE 7]"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"
</head"
<body id='wrox'"
<ul id='tabs'"
<li id='tab1'"<a href='wrox.html'"<span"Wrox P2P</span"</a"</li"
<li id='tab2'"<a href='amazon.html'"<span"Amazon</span"</a"</li"
<li id='tab3'"<a href='google.html'"<span"Google</span"</a"</li"
<li id='tab4'"<a href='slashdot.html'"<span"Slashdot</span"</a"</li"
<li id='tab5'"<a href='twit.html'"<span"This Week in Tech</span"</a"</li"
</ul"
<div id='iframe'"
<iframe src='http://p2p.wrox.com' frameborder='0' marginheight='0'
marginwidth='0'"</iframe"
</div"
</body"
</html"

2. Zachowujemy pierwszy dokument pod nazw wrox.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pl'"
<head"
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2' /"
<title"</title"
<link rel='stylesheet' type='text/css' href='tabs.css' /"
<!-- sztuczka dostosowujca dla przegldarek Microsoftu -->
<!--[if lt IE 7]"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"
</head"

20

CSS. Gotowe rozwizania

<body id='amazon'"
<ul id='tabs'"
<li id='tab1'"<a href='wrox.html'"<span"Wrox P2P</span"</a"</li"
<li id='tab2'"<a href='amazon.html'"<span"Amazon</span"</a"</li"
<li id='tab3'"<a href='google.html'"<span"Google</span"</a"</li"
<li id='tab4'"<a href='slashdot.html'"<span"Slashdot</span"</a"</li"
<li id='tab5'"<a href='twit.html'"<span"This Week in Tech</span"</a"</li"
</ul"
<div id='iframe'"
<iframe src='http://www.amazon.com'
frameborder='0' marginheight='0' marginwidth='0'"</iframe"
</div"
</body"
</html"

3. Drugi dokument zapisujemy pod nazw amazon.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pl'"
<head"
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2' /"
<title"</title"
<link rel='stylesheet' type='text/css' href='tabs.css' /"
<!-- sztuczka dostosowujca dla przegldarek Microsoftu -->
<!--[if lt IE 7]"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"
</head"
<body id='google'"
<ul id='tabs'"
<li id='tab1'"<a href='wrox.html'"<span"Wrox P2P</span"</a"</li"
<li id='tab2'"<a href='amazon.html'"<span"Amazon</span"</a"</li"
<li id='tab3'"<a href='google.html'"<span"Google</span"</a"</li"
<li id='tab4'"<a href='slashdot.html'"<span"Slashdot</span"</a"</li"
<li id='tab5'"<a href='twit.html'"<span"This Week in Tech</span"</a"</li"
</ul"
<div id='iframe'"
<iframe src='http://www.google.com'
frameborder='0' marginheight='0' marginwidth='0'"</iframe"
</div"
</body"
</html"

4. Trzeci dokument zapisujemy jako google.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pl'"
<head"
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2' /"
<title"</title"
<link rel='stylesheet' type='text/css' href='tabs.css' /"
<!-- sztuczka dostosowujca dla przegldarek Microsoftu -->
<!--[if lt IE 7]"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"

Rozdzia 1. n Zakadki
</head"
<body id='slashdot'"
<ul id='tabs'"
<li id='tab1'"<a href='wrox.html'"<span"Wrox P2P</span"</a"</li"
<li id='tab2'"<a href='amazon.html'"<span"Amazon</span"</a"</li"
<li id='tab3'"<a href='google.html'"<span"Google</span"</a"</li"
<li id='tab4'"<a href='slashdot.html'"<span"Slashdot</span"</a"</li"
<li id='tab5'"<a href='twit.html'"<span"This Week in Tech</span"</a"</li"
</ul"
<div id='iframe'"
<iframe src='http://www.slashdot.org'
frameborder='0' marginheight='0' marginwidth='0'"</iframe"
</div"
</body"
</html"

5. Czwarty dokument zapiszmy pod nazw slashdot.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pl'"
<head"
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2' /"
<title"</title"
<link rel='stylesheet' type='text/css' href='tabs.css' /"
<!-- sztuczka dostosowujca dla przegldarek Microsoftu -->
<!--[if lt IE 7]"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"
</head"
<body id='twit'"
<ul id='tabs'"
<li id='tab1'"<a href='wrox.html'"<span"Wrox P2P</span"</a"</li"
<li id='tab2'"<a href='amazon.html'"<span"Amazon</span"</a"</li"
<li id='tab3'"<a href='google.html'"<span"Google</span"</a"</li"
<li id='tab4'"<a href='slashdot.html'"<span"Slashdot</span"</a"</li"
<li id='tab5'"<a href='twit.html'"<span"This Week in Tech</span"</a"</li"
</ul"
<div id='iframe'"
<iframe src='http://www.twit.tv'
frameborder='0' marginheight='0' marginwidth='0'"</iframe"
</div"
</body"
</html"

6. Pity dokument zapisujemy pod nazw twit.html.

7. Teraz tworzymy arkusz stylw:
body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;

21

22

CSS. Gotowe rozwizania

height: 25px;
border-bottom: 1px solid #000;
background: #dedede;

}
ul#tabs li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
border: 1px solid #000;
top: 1px;
background: #808080;
}
ul#tabs li:hover {
border-bottom: 1px solid #fff;
background: #fff;
}
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: #fff;
font: 14px Arial, sans-serif;
}
body#wrox li#tab1,
body#amazon li#tab2,
body#google li#tab3,
body#slashdot li#tab4,
body#twit li#tab5 {
background: #fff;
border-bottom: 1px solid #fff;
}
ul#tabs a:hover,
body#wrox li#tab1 a,
body#amazon li#tab2 a,
body#google li#tab3 a,
body#slashdot li#tab4 a,
body#twit li#tab5 a {
color: #000;
}
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}
div#iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-top: 50px;
border-top: 1px solid #000;
}
iframe {
position: absolute;

Rozdzia 1. n Zakadki

23

top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;

8. Zapisujemy powyszy arkusz stylw jako tabs.css.

Efekt dziaania powyszego kodu w przegldarce Mozilla Firefox przedstawiono na rysunku 1.1.

Rysunek 1.1.

Na rysunku 1.1 wida, e zakadka Wrox P2P jest podwietlana, gdy zaadowana zostaje
strona wrox.html. Po klikniciu innej zakadki, jest ona podwietlana i odpowiednia strona
wywietla si na ekranie, tak jak na rysunku 1.2.
Na rysunku 1.2 wida, e po zaadowaniu strony google.html podwietlia si zakadka Google.
Przed przejciem do wyjaniania kodu spjrzmy na poniszy bardzo interesujcy fragment:
<!-- sztuczka dostosowujca dla przegldarek Microsoftu --"
<!--[if lt IE 7]"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"

24

CSS. Gotowe rozwizania

Rysunek 1.2.

Ta cz kodu pozwala omin pewne braki w implementacji CSS w przegldarkach Internet Explorer 5.5 i 6. Na razie nie bdziemy zajmowa si bliej tym kodem (ani testowaniem
w przegldarce Internet Explorer), jako e bardziej szczegowo jest on omwiony w nastpnym podrozdziale, zatytuowanym Testowanie i ograniczenia.
Poniej znajduje si objanienie krok po kroku kadej deklaracji uytej w arkuszu tabs.css,
co pomoe czytelnikowi dopasowa projekt zakadek do wasnych potrzeb.
Pierwsza regua w pliku tabs.css suy do usunicia domylnych marginesw i dopenienia
z elementu <body>.
body, html {
margin: 0;
padding: 0;
}

Zastosowanie tej reguy nie jest konieczne dla niniejszego projektu, ale zostaa ona dodana
dla potrzeb przykadu. Niektre przegldarki (IE, Firefox) do elementu <body> domylnie
dodaj margines o okrelonej wartoci, inne przegldarki natomiast (Opera) dodaj domylnie dopenienie. Ta regua likwiduje i jedno, i drugie.
Nastpna regua suy do nadania odpowiednich waciwoci elementowi <ul>, w ktrym
s zawarte wszystkie elementy listy majce suy jako zakadki:

Rozdzia 1. n Zakadki

25

ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
border-bottom: 1px solid #000;
background: #dedede;
}

Pierwsza deklaracja w powyszej regule to list-style: none;. Usuwa ona domylne formatowanie listy nienumerowanej. Nastpnie regua margin: 0; usuwa domyln przestrze, jak
kada przegldarka dodaje wok elementu <ul>. Niestety, tak jak w przypadku elementu
<body>, rne przegldarki do elementu <ul> dodaj albo margines, albo dopenienie. Deklaracja padding: 10px 0 0 0; pozwala na uniknicie tego problemu, ustawiajc 10-pikselowe
dopenienie u gry elementu (przestrze pomidzy grn krawdzi przegldarki a grn
krawdzi kadej zakadki) i usuwajc dopenienie z pozostaych stron. Dodanie tej dodatkowej przestrzeni, tak samo jak w przypadku elementu <body>, nie jest konieczne i zaley
wycznie od indywidualnych potrzeb.
Nastpna deklaracja nadaje elementowi <ul> sta wysoko. Gdybymy tego nie zrobili, to
to i dolna krawd elementu <ul> pojawiyby si ponad zakadkami zamiast w jednej linii
z doln krawdzi elementw <li>. Dzieje si tak, poniewa elementom <li> nadano atrybut float, a tego typu elementy nie wpywaj w aden sposb na wysoko elementu nadrzdnego, jako e znajduj si one poza normalnym ukadem strony i maj wpyw tylko na
sam tre elementw, a nie waciwoci zwizane z modelem blokowym takie jak height,
padding, margin. Ostatnie dwie deklaracje take nie s niezbdne do implementacji systemu
zakadek i mona je dowolnie zmienia. Pierwsza z nich to border-bottom: 1px solid #000;
i suy ona do ustawienia waciwoci dolnej krawdzi wszystkich zakadek. Deklaracja ta
potrzebna jest do uzyskania efektu, w ktrym zakadka odpowiadajca aktualnie zaadowanej stronie nie ma krawdzi dolnej, a pozostae zakadki j maj. Jak wida na rysunku 1.1,
zakadka Wrox P2P jest podwietlona i nie ma krawdzi dolnej. To samo dzieje si z zakadk Google na rysunku 1.2. W uzyskaniu takiego efektu kluczow rol odgrywa wanie
dolna krawd elementu <ul>. Druga deklaracja to background: #dedede;. Tworzy ona kontrast kolorw pomidzy elementami <li> a zawierajcym je elementem <ul>.
Jeeli chcemy, aby cay projekt by rzeczywicie przenony, mona zastosowa pozycjonowanie absolutne i umieci go w dowolnym miejscu dokumentu za pomoc odpowiednich
atrybutw CSS (top, right, bottom, left).
Nastpna regua ustawia waciwoci wszystkich elementw <li>:
ul#tabs li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
border: 1px solid #000;
top: 1px;
background: #808080;
}

26

CSS. Gotowe rozwizania

Zakadki w naszym projekcie uoylimy w odpowiedni sposb, posugujc si elementami
pywajcymi na stronie. Dziki temu wszystkie elementy <li> znalazy si w tej samej linii,
jeden obok drugiego, zamiast jeden pod drugim. Efekt ten osignlimy dziki zastosowaniu deklaracji float: left;. Pozycjonowanie relatywne (position: relative) z przesuniciem o jeden piksel od grnej krawdzi zastosowalimy, aby dolna krawd kadej zakadki
nachodzia na doln krawd zawierajcego j elementu <ul>. Nastpnie odsunlimy od siebie poszczeglne zakadki, stosujc lewy i prawy margines o szerokoci piciu pikseli oraz
zlikwidowalimy grny i dolny margines (margin: 0 5px). W wyniku tego dziaania zakadki
bd oddalone od siebie o 10 pikseli, a odlego pomidzy pierwsz zakadk i nadrzdnym elementem <ul> wyniesie pi pikseli. Nastpna deklaracja suy do ustawienia staej
wysokoci zakadek. Mimo e mona si bez tego obej, to jednak dziki temu mamy pewno, e zarwno elementy <li>, jak i zawierajcy je element <ul> maj tak sam wysoko. Zamiast ustawiania staej wysokoci mona by byo deklaracj top: 1px; zamieni na
top: 4px; w celu zapewnienia synchronii pomidzy doln krawdzi elementw <li> a doln krawdzi elementu <ul>. Ustalona wysoko pozwala take na pionowe wycentrowanie
tekstu, ale ten sam efekt mona osign poprzez zastosowanie atrybutu vertical-align
dla kadego elementu <li>. Oczywicie w celu wycentrowania tekstu stosujemy deklaracj
text-align: center;. Nastpnie za pomoc deklaracji width: 150px; ustawiamy sta szeroko. Zastosowanie tej deklaracji nie jest konieczne, chyba e chcemy, aby kada zakadka miaa tak sam szeroko.
Jeeli dla elementu <ul> zawierajcego zakadki zastosowano pozycjonowanie
absolutne, to w celu osignicia zgodnoci z przegldark Opera naley temu
elementowi nada szeroko wiksz ni suma szerokoci wszystkich elementw
<li> w nim zawartych. Konieczno ta w przypadku Opery zachodzi ze wzgldu na
fakt, e wszystkie elementy <li> s elementami pywajcymi, przez co zawierajcy
je element <ul> nie rozciga si w poziomie, aby je wszystkie pomieci. Sytuacja
ta spowodowana jest przez pewien dwuznaczny zapis w specyfikacji CSS 2, ktry
powoduje, e przy zastosowaniu wzajemnie wykluczajcych si interpretacji
zarwno Opera, jak i Firefox s zgodne z t specyfikacj. Konflikt skupia si wok
pozycjonowania absolutnego elementw przy uyciu algorytmu obliczania szerokoci
oraz tego, w ktrym momencie naley dokona jej obliczenia. Opera oblicza szeroko
elementw pozycjonowanych absolutnie, zanim wemie pod uwag elementy potomne
rozmieszczone za pomoc argumentu float. Firefox natomiast najpierw rozmieszcza
elementy przy uyciu float, a dopiero potem nadaje elementowi pozycjonowanemu
absolutnie odpowiedni szeroko.
Na koniec ustawiamy jeszcze to i waciwoci ramek elementw <li>, aby odrniay si
od otaczajcego je elementu <ul>.
Nastpna regua powoduje, e element <li> po najechaniu kursorem zmienia kolor ta na
biay:
ul#tabs li:hover {
border-bottom: 1px solid #fff;
background: #fff;
}

Powysza regua jest bardzo prosta: jeeli uytkownik najedzie kursorem na ktrykolwiek
z elementw <li>, to to tego elementu z szarego (ustawionego w poprzedniej regule: background: #g0g0g0;) zmieni si na biae. Kolor dolnej krawdzi take si zmieni z czarnego

Rozdzia 1. n Zakadki

27

na biay. Dziki temu uzyskujemy wraenie, e podwietlona zakadka pojawia si z przodu, jak na rysunkach 1.1 i 1.2. Jak wida, podwietlona jest tylko zakadka odpowiadajca
wczytanej stronie. Gdybymy najechali kursorem na pozostae zakadki, to one te by si
podwietliy, ale tylko do czasu usunicia znad nich kursora.
Nastpna regua suy do ustawiania waciwoci odnonikw wewntrz elementw <li>:
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: #fff;
font: 14px Arial, sans-serif;
}

Pierwsza deklaracja zmienia sposb formatowania elementw <a> ze rdliniowego (domylny dla tych elementw) na blokowy (domylny dla takich elementw jak <div> czy <p>).
Dziki temu odnoniki bd rozciga si poziomo na ca woln przestrze wewntrz elementw <li> (od lewej do prawej krawdzi elementu). Nastpnie deklaracja height: 100%;
powoduje, e cae wntrze elementu <li> bdzie suyo jako odnonik. Za pomoc deklaracji text-decoration: none; usuwamy domylne podkrelenie dla odnonikw, a deklaracja color: #fff; ustawia ich kolor na biay (domylnie jest zazwyczaj niebieski, a po odwiedzeniu zmienia si na fioletowy). Tak jak i inne deklaracje stosowane w celach czysto
kosmetycznych ustawianie koloru odnonikw nie jest konieczne. Na koniec zmieniamy waciwoci czcionki za pomoc deklaracji font: 14px Arial, sans-serif;.
We wszystkich piciu utworzonych na pocztku dokumentach elementowi <body> nadalimy unikalny identyfikator. Ponisza regua, przy wykorzystaniu tych identyfikatorw, pozwoli nam na zastosowanie odmiennego stylu dla zakadki odpowiadajcej aktualnie wczytanej stronie:
body#wrox li#tab1,
body#amazon li#tab2,
body#google li#tab3,
body#slashdot li#tab4,
body#twit li#tab5 {
background: #fff;
border-bottom: 1px solid #fff;
}

Sama koncepcja jest bardzo prosta. Wykorzystujc kaskadowy charakter arkuszy stylw oraz
unikalne nazewnictwo kadej strony, jestemy w stanie nada odmienny styl zakadce odpowiadajcej aktualnie wczytanej stronie. Same zakadki musz take posiada niepowtarzalne nazwy. W poczeniu z identyfikatorem elementu <body> regua body#wrox li#tab1
nadpisuje poprzedni regu (ul#tabs li), poniewa posiada ona wiksz precyzj zapisu.
Jeeli element <body> bdzie mia identyfikator wrox, a element <li> bdzie mia identyfikator tab1, to nastpi nadpisanie reguy ul#tabs li przez regu body#wrox li#tab1, co z kolei prowadzi do zastosowania biaego ta i jednolitej biaej krawdzi dolnej dla zakadki odpowiadajcej aktualnie zaadowanej stronie.
Przedstawiona powyej regua jest identyczna z regu ul#tabs li:hover, o ktrej bya ju
mowa wczeniej. Mimo e jest to znakomita okazja do zastosowania grupowania selektorw,

28

CSS. Gotowe rozwizania

to napisalimy je oddzielnie, aby oddzieli od siebie dwa rne zagadnienia. Przykad grupowania widzimy w nastpnej regule:
ul#tabs a:hover,
body#wrox li#tab1 a,
body#amazon li#tab2 a,
body#google li#tab3 a,
body#slashdot li#tab4 a,
body#twit li#tab5 a {
color: #000;
}

Powysza regua rozpoczyna si list szeciu selektorw zgrupowanych w celu uniknicia

powtarzania. Pierwszy selektor dopasowuje si do wszystkich elementw <a>, ktre s potomkami elementu <ul> o identyfikatorze tabs, ale tylko w momencie, gdy kursor myszy
znajduje si nad elementem <a>. Pozostae selektory, jak ju widzielimy w poprzedniej regule, dopasowuj si do odnonikw aktualnie zaadowanej strony w oparciu o identyfikator elementu <body> i identyfikator elementu <li>. Ze wzgldu na fakt, e kolor odnonikw
w elementach <li> zosta ustawiony na biay, i to kadego z tych elementw zmienia si
na biae po najechaniu na zakadk kursorem lub kiedy dana zakadka odpowiada aktualnie
zaadowanej stronie. W tych sytuacjach kolor odnonika musi si zmienia, aby by on widoczny na biaym tle. Jeeli wszystkie warunki zostan spenione, stosowana jest deklaracja
color: #000;.
Nastpna regua suy do nadania odpowiedniego formatowania elementowi <span> zagniedonemu wewntrz kadego elementu <a>:
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}

Pierwsza deklaracja w powyszej regule zmienia typ elementu <span> z domylnego rdliniowego na blokowy. Dziki temu mona zastosowa dopenienie odpowiadajce modelowi blokowemu zamiast dopenienia odpowiadajcego modelowi rdliniowemu. Robimy to,
aby mc kontrolowa woln przestrze wok tekstu na kadej zakadce. Czynnoci te mog, ale nie musz by potrzebne, w zalenoci od indywidualnych potrzeb projektu.
Moliwe, e si zastanawiasz, czemu zamiast elementu <span> nie uylimy elementu <div>.
Ot z semantycznego punktu widzenia niedozwolone jest umieszczanie elementw blokowych, takich jak np. <div>, wewntrz elementw rdliniowych, takich jak <a> (mimo e
element <a> zosta przez nas zmieniony na element blokowy). Rne przegldarki mogyby
si rnie zachowa w takiej sytuacji. Z punktu widzenia zgodnoci ze standardami nie ma
adnych przeciwwskaza, jeli chodzi o umieszczanie elementw <span> wewntrz elementw <a>, poniewa elementy rdliniowe mona bez problemu wzajemnie zagnieda.
W tym projekcie bierzemy pod uwag bdy zgaszane przez walidator W3C znajdujcy si
pod adresem http://validator.w3.org. Program ten uywany jest przez twrcw stron internetowych w celu sprawdzania, czy tworzone przez nich dokumenty zgodne s z obowizujcymi standardami.
Element <span> nie jest konieczny do tego, aby projekt mg poprawnie funkcjonowa. Tak
jak ju wspomniana wczeniej staa wysoko zakadek, tak te uycie elementu <span> do

Rozdzia 1. n Zakadki

29

kontrolowania pionowego pooenia tekstu (w odrnieniu od pooenia poziomego) na zakadkach jest opcjonalne.
Pozostae dwie reguy nie maj nic wsplnego z samym systemem zakadek i zostay dodane wycznie w celu wypenienia pustej czci dokumentu treci poprzez wczytanie dokumentw zewntrznych z popularnej strony za pomoc ramki wewntrznej.

W niniejszym podrozdziale opisuj problemy, ktre mog wystpi przy testowaniu projektu w rnych przegldarkach. Zazwyczaj podczas pracy nad projektem ograniczam si do
testowania go tylko w przegldarce Firefox, dopki nie nabierze on ksztatw i nie zacznie
zblia si do koca. Dochodzc do tego momentu, rozszerzam zestaw przegldarek testowych, dodajc Internet Explorera, Oper, Safari itd. W przypadku przegldarek dobrze obsugujcych standardy (Opera, Safari) zazwyczaj potrzebne s tylko niewielkie ulepszenia.
Problem rozpoczyna si, gdy dochodzi do testowania pod IE, ktra albo bardzo sabo obsuguje niektre standardy, albo wcale ich nie obsuguje, dlatego te w niniejszym rozdziale
skupiam si przede wszystkim na tej aplikacji.
W poprzednim podrozdziale wspominalimy niewielki fragment kodu, ktrego zadaniem
byo pomc nam sprawi, aby przegldarka Internet Explorer w wersjach 5.5 i 6 bya kompatybilna z niektrymi nieobsugiwanymi przez ni waciwociami CSS. Poniej przypominam omawiany fragment kodu:
<!-- sztuczka dostosowujca dla przegldarek Microsoftu -->
<!--[if lt IE 7]"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"

Osoby, ktre czytay moj ksik Beginning CSS: Cascading Style Sheets for Web Design
(wydan przez wydawnictwo Wiley Publishing) prawdopodobnie pamitaj, e w rozdziale
18. pisaem, jak pobra i zainstalowa bibliotek JavaScript IE7. Jako e ta ksika przeznaczona jest dla bardziej zawansowanych czytelnikw, nie bd si tu szczegowo rozpisywa na temat instalacji tej biblioteki, a ogranicz si tylko do oglnego przedstawienia
procesu instalacji oraz pobienego przedstawienia jej moliwoci.
Biblioteka JavaScript IE7 zostaa napisana przez londyczyka, Deana Edwardsa, w celu uatwienia twrcom stron internetowych radzenia sobie ze sab obsug CSS przez przegldark Internet Explorer, ktra ju od piciu lat nie doczekaa si adnych powaniejszych
uaktualnie w tym kierunku. Edwards przy uyciu JavaScript dokonuje implementacji waciwoci CSS oryginalnie nieobsugiwanych przez przegldark Internet Explorer w wersjach 5.5 i 6. Dziki temu IE zblia si funkcjonalnoci do innych, jak na razie o wiele lepiej obsugujcych standardy, przegldarek, takich jak Safari czy Firefox. Biblioteka IE7
napisana jest w sposb bardzo przejrzysty, dziki czemu wydaje si, e Internet Explorer
rzeczywicie obsuguje te waciwoci CSS, ktre do tej pory sprawiay mu problemy. Ponadto osoby korzystajce z tej biblioteki nie musz zna JavaScript w stopniu wikszym ni
potrzeba, aby j wczy. Niektre z najwaniejszych waciwoci CSS, ktrych obsug
przez IE umoliwia lub naprawia biblioteka IE7, to:

30

CSS. Gotowe rozwizania

n

atrybuty min-width, max-width oraz min-height,

pseudoklasy :hover, :active oraz :focus (dziaaj nie tylko z elementem <a>),

rne zaawansowane selektory, takie jak bezporedni selektor potomka (>),

selektory atrybutw (input[typei), selektor przylegajcych elementw
rwnorzdnych (+) oraz selektor rwnorzdnych elementw przylegajcych
porednio (-),

pseudoklasy strukturalne, takie jak: :root, :first-child oraz :last-child,

pseudoelementy ::before i ::after oraz atrybut content.

Oczywicie to nie wszystkie moliwoci klasy IE7. Powyej podaem tylko kilka przykadw. To, co jest najbardziej zaskakujce, to rozmiar i szybko dziaania tej modularnej budowy biblioteki. Dziki takiej konstrukcji twrcy uaktywniaj tylko potrzebne funkcje, co
znacznie zmniejsza ilo koniecznych do pobrania danych. Biblioteka gwna zajmuje tylko okoo 24 kB. Naprawia lub dodaje obsug podanych wyej waciwoci (oprcz :last-child, ktra znajduje si w specjalnej bibliotece selektorw CSS3).
Bibliotek JavaScript IE7 mona pobra ze strony organizacji SourceForge, ktra na swoich
serwerach udostpnia tysice projektw typu open source. Dokadny adres do pobrania biblioteki IE7 JavaScript to: https://sourceforge.net/project/showfiles.php?group_id=109983.
Po ukoczeniu pobierania biblioteki IE7 naley j rozpakowa i umieci w katalogu gwnym serwera. Na przykad, jeeli strona znajduje si pod adresem http://www.example.com/,
to biblioteka IE7 powinna znajdowa si w katalogu dostpnym pod adresem http://www.
example.com/IE7/. Klas t mona umieci take w innym katalogu, ale wtedy naley pamita o zmianie przykadw kodu w tej ksice tak, aby odpowiaday one ciece do katalogu z bibliotek.
Biblioteka JavaScript IE7 jest projektem typu open source i jest dostpna na zasadach licencji Creative Commons LGPL (ang. Lesser General Public Licence). Peny tekst tej licencji
mona przeczyta na stronie http://creativecommons.org/licenses/LGPL/2.1.
Wicej informacji na temat biblioteki JavaScript IE7 mona znale na specjalnie jej powiconej stronie pod adresem: http://dean.edwards.name/ie7.
Nastpny podrozdzia powicony jest analizie przydatnej w naszym projekcie funkcjonalnoci biblioteki Edwardsa.

Co daje nam biblioteka IE7?

Aby si przekona, co daje nam biblioteka IE7, wystarczy otworzy nasz projekt w przegldarce Internet Explorer bez instalowania tej biblioteki. Rezultat otwarcia strony wrox.html
bez funkcjonalnoci IE7 w Internet Explorerze 6 pokazano na rysunku 1.3.
Rnice nie s wielkie poza dwoma wyjtkami:
n

kolor ta zakadek nie zmienia si po najechaniu na nie kursorem,

zawarto ramki <iframe> nie jest widoczna.

Rozdzia 1. n Zakadki

31

Rysunek 1.3.

Pierwszy problem wystpi dlatego, e Internet Explorer obsuguje pseudoklas :hover tylko dla elementw <a>, a nie tak jak Firefox, Opera i Safari dla wszystkich elementw. Drugi problem ma zwizek z tym, e Internet Explorer nie radzi sobie z kombinacj atrybutw
top, right, bottom oraz left wpywajcych na rozmiary elementw pozycjonowanych absolutnie lub elementw o ustalonym pooeniu. Dziki zastosowaniu biblioteki IE7 Internet
Explorer nie ustpuje funkcjonalnoci innym przegldarkom (Opera, Firefox, Safari). Na
rysunku 1.4 pokazano t sam stron w Internet Explorerze 6, ale ju po zainstalowaniu biblioteki IE7.
Na rysunku 1.4 wida, e to zakadek zmienia kolor po najechaniu na nie kursorem, a take, e wywietla si zawarto elementu <iframe>.
W nastpnym podrozdziale poka rne sposoby modyfikacji projektu.

W niniejszym podrozdziale prezentuj alternatywne podejcia do projektu zakadek, gdy

nie kademu moe on si podoba w obecnej postaci. Alternatywne podejcia analizowane
w niniejszym podrozdziale s nastpujce:

32

CSS. Gotowe rozwizania

Rysunek 1.4.
n

Wykorzystanie obrazkw w tle zamiast kolorw i prostoktnych obramowa.

Wykorzystanie obrazkw w tle, ktre zawieraj tekst, bez utraty dostpnoci.

Takie uycie obrazw w tle, aby zakadki byy elastyczne i mogy zmienia
rozmiary w okrelonych granicach.

Oczywicie te alternatywne podejcia w pewnym stopniu komplikuj nasz projekt, ale ich
celem jest dostarczenie jak najwikszej elastycznoci oraz pokazanie moliwie najwikszej
liczby implementacji zakadek.
Pierwsza modyfikacja bdzie dotyczya zastosowania obrazkw w tle zamiast zwykych kolorw i prostoktnych obramowa.

Zakadki z obrazkami w tle

Aby utworzy zakadki z obrazkami w tle, naley wykona nastpujce kroki (kod rdowy do tego projektu znajduje si na doczonej do ksiki pycie CD w podkatalogu with-background w katalogu Project 1):
1. Tworzymy nastpujcy arkusz stylw (zmiany w stosunku do jego poprzedniej

wersji zostay wyrnione):

Rozdzia 1. n Zakadki
body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid #000;
background: #dadada;
}
ul#tabs li {
float: left;
margin: 0;
height: 23px;
text-align: center;
width: 160px;
background: transparent url('images/tab.png') no-repeat scroll top;
}
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: #fff;
font: 14px Arial, sans-serif;
}
ul#tabs li:hover,
body#wrox li#tab1,
body#amazon li#tab2,
body#google li#tab3,
body#slashdot li#tab4,
body#twit li#tab5 {
background: transparent url('images/tab_hover.png') no-repeat scroll top;
}
ul#tabs a:hover,
body#wrox li#tab1 a,
body#amazon li#tab2 a,
body#google li#tab3 a,
body#slashdot li#tab4 a,
body#twit li#tab5 a {
color: #000;
}
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}
div#iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-top: 50px;
border-top: 1px solid #000;
}

33

34

CSS. Gotowe rozwizania

iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}

2. Zapisujemy powyszy arkusz pod nazw tabs.css.

Rezultat tej modyfikacji widoczny jest na rysunku 1.5.

Rysunek 1.5.

Liczba modyfikacji potrzebnych do ustawienia obrazkw w tle zamiast kolorw i obramowa jest zaskakujco maa. Poniej znajduje si wyjanienie krok po kroku kadej z dokonanych zmian.
Pierwsza zmiana dotyczy wysokoci elementu <ul>, ktra rwna jest wysokoci obrazka
uytego jako to elementw <li>:
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;

Rozdzia 1. n Zakadki

35

border-bottom: 1px solid #000;

background: #dadada;
}

Druga modyfikacja dotyczy koloru ta elementu <ul> zawierajcego wszystkie pi zakadek.

To jest nieznacznie janiejsze, aby pasowao do utworzonych w programie Adobe Photoshop
obrazkw ta. Mimo zastosowania identycznej wartoci #dadada zarwno w arkuszu stylw,
jak i w programie Adobe Photoshop, przy tworzeniu obrazkw ta, kolory nie pasoway do
siebie w adnej z przegldarek. Aby zniwelowa t rnic, po prostu nieznacznie przyciemnilimy szare to elementu <ul>.
Kolejna modyfikacja dotyczy elementw <li>:
ul#tabs li {
float: left;
margin: 0;
height: 23px;
text-align: center;
width: 160px;
background: transparent url('images/tab.png') no-repeat scroll top;
}

Najpierw usuwamy margines spomidzy elementw <li> oraz niepotrzebne nam ju deklaracje: position: relative; oraz top: 1px;. Poprzednio prawy i lewy margines elementw
<li> wynosi 5 pikseli. Obecnie nie potrzebujemy ju tego marginesu, bo moemy go doda za pomoc obrazkw w tle. Po marginesach przysza kolej na zmian szerokoci na 160
pikseli ze wzgldu na fakt usunicia lewego i prawego marginesu elementw <li>. Ostatnia
deklaracja suy do ustawienia obrazka jako ta zakadek. Rozmiar obrazka odpowiada rozmiarowi elementu <li>, czyli wynosi 16023 piksele. Zmieniajc wymiary zakadek, naley
pamita o atrybutach width i height pojawiajcych si w powyszej regule, a take o atrybucie height zdefiniowanym w regule ul#tabs (wszelkie modyfikacje rozmiarw zakadek
naley rozpoczyna od modyfikacji tego atrybutu). Dodatkowo, zmieniajc rozmiar zakadek, naley wzi pod uwag wartoci dopenienia zastosowanego dla elementu <span>,
w obrbie ktrego znajduje si tekst wywietlany na zakadkach, a ktry suy do kontrolowania wyrwnania tekstu w pionie.
Ostatnie zmiany dotycz zakadki odpowiadajcej aktualnie zaadowanej stronie lub obrazka, ktry pojawia si w tle po najechaniu na zakadk kursorem:
ul#tabs li:hover,
body#wrox li#tab1,
body#amazon li#tab2,
body#google li#tab3,
body#slashdot li#tab4,
body#twit li#tab5 {
background: transparent url('images/tab_hover.png') no-repeat scroll top;
}

W pierwszym arkuszu stylw regua ul#tabs li:hover wystpowaa oddzielnie. Teraz zgrupowalimy j z regu definiujc zakadk odpowiadajc aktualnie zaadowanej stronie oraz
zmodyfikowalimy deklaracj ta w taki sposb, aby wskazywaa na obrazek tab_hover.png.

36

CSS. Gotowe rozwizania

I to by byo na tyle. W nastpnym punkcie umiecimy w tle obrazki zawierajce tekst, nie
wpywajc przy tym ujemnie na dostpno.

Obrazki w tle zawierajce tekst

W celu utworzenia zakadek z obrazkami w tle zawierajcymi tekst naley wykona nastpujce kroki (kod rdowy do tego projektu znajduje si na doczonej do ksiki pycie CD
w podkatalogu with-text w katalogu Project 1).
1. Wprowad nastpujce zmiany w pliku tabs.css. Zmiany w stosunku do

poprzedniego arkusza (uywanego do ustawiania obrazkw w tle) zostay

wyrnione. Niektre deklaracje usunito cakowicie:
body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid #000;
background: #dadada;
}
ul#tabs li {
float: left;
margin: 0;
height: 23px;
text-align: center;
width: 160px;
}
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: #fff;
font: 14px Arial, sans-serif;
}
ul#tabs li#tab1 {
background: transparent url('images/wrox-tab.png') no-repeat scroll top;
}
ul#tabs li#tab1:hover,
body#wrox li#tab1 {
background: transparent url('images/wrox-tab-hover.png') no-repeat scroll top;
}
ul#tabs li#tab2 {
background: transparent url('images/amazon-tab.png') no-repeat scroll top;
}
ul#tabs li#tab2:hover,
body#amazon li#tab2 {
background: transparent url('images/amazon-tab-hover.png') no-repeat scroll top;
}

Rozdzia 1. n Zakadki
ul#tabs li#tab3 {
background: transparent url('images/google-tab.png') no-repeat scroll top;
}
ul#tabs li#tab3:hover,
body#google li#tab3 {
background: transparent url('images/google-tab-hover.png') no-repeat scroll top;
}
ul#tabs li#tab4 {
background: transparent url('images/slashdot-tab.png') no-repeat scroll top;
}
ul#tabs li#tab4:hover,
body#slashdot li#tab4 {
background: transparent url('images/slashdot-tab-hover.png') no-repeat scroll
top;
}
ul#tabs li#tab5 {
background: transparent url('images/twit-tab.png') no-repeat scroll top;
}
ul#tabs li#tab5:hover,
body#twit li#tab5 {
background: transparent url('images/twit-tab-hover.png') no-repeat scroll top;
}
ul#tabs a:hover,
body#wrox li#tab1 a,
body#amazon li#tab2 a,
body#google li#tab3 a,
body#slashdot li#tab4 a,
body#twit li#tab5 a {
color: #000;
}
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
visibility: hidden;
}
div#iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-top: 50px;
border-top: 1px solid #000;
}
iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}

2. Zapisujemy powyszy arkusz jako tabs.css.

37

38

CSS. Gotowe rozwizania

Rezultat zastosowania tych zmian przedstawiono na rysunku 1.6.

Rysunek 1.6.

Mimo e zmiany dokonane w tym przypadku s duo wiksze ni poprzednio, kiedy w tle
zakadek ustawialimy obrazek bez tekstu, to wikszo spord nich dotyczy ustawiania
innego obrazka w tle kadej zakadki.
ul#tabs li#tab1 {
background: transparent url('images/wrox-tab.png') no-repeat scroll top;
}
ul#tabs li#tab1:hover,
body#wrox li#tab1 {
background: transparent url('images/wrox-tab-hover.png') no-repeat scroll top;
}

Powyszy fragment kodu suy do ustawiania waciwoci ta pierwszej zakadki, ktra

jest odnonikiem do strony Wrox P2P. Najpierw usuwamy deklaracj background z reguy
ul#tabs li, nastpnie, podobnie jak dla pierwszej zakadki, definiujemy reguy dla wszystkich pozostaych zakadek, poniewa wszystkie zakadki maj teraz tekst umieszczony na
obrazku znajdujcym si w ich tle.
W dalszej czci arkusza stylw, w celu zachowania dostpnoci, ukrywamy tekst pojawiajcy si na zakadkach. Nie usuwajc tekstu, tylko go ukrywajc, powodujemy, e nasza
strona nie traci na dostpnoci.

Rozdzia 1. n Zakadki

39

ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
visibility: hidden;
}

Takie ukrywanie tekstu powoduje, e jest on niewidoczny dla ludzkiego oka, ale widoczny dla
robotw wyszukujcych (np. Googlebota) i przegldarek dla niewidomych (np. JAWS), ktre
jeszcze nie obsuguj CSS. Dziki temu nasza strona jest tak samo dostpna jak wczeniej.
Ostatnia modyfikacja dotyczy tworzenia elastycznych zakadek, ktre rozcigaj si i kurcz
w zalenoci od potrzeby.

Zakadki elastyczne
Aby stworzy zakadki elastyczne, ktre si rozcigaj, wypeniajc ca dostpn im przestrze, naley wykona nastpujce czynnoci:
1. Otwieramy plik tabs.css i dokonujemy w nim nastpujcych zmian

(zmiany w stosunku do poprzedniego projektu zostay wyrnione):

body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid #000;
background: #dadada;
position: relative;
}
ul#tabs li {
position: absolute;
bottom: 0;
margin: 0;
height: 23px;
text-align: center;
width: 20%;
background: transparent url('images/tab/tab_01.png') no-repeat scroll left;
}
ul#tabs li " div {
height: 23px;
background: transparent url('images/tab/tab_03.png') no-repeat scroll right;
}
ul#tabs li " div " div {
height: 23px;
background: transparent url('images/tab/tab_02.png') repeat-x scroll center;
margin: 0 8px 0 7px;
}

40

CSS. Gotowe rozwizania

ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: #fff;
font: 14px Arial, sans-serif;
}
ul#tabs li#tab1 {
left: 0;
}
ul#tabs li#tab2 {
left: 20%;
}
ul#tabs li#tab3 {
left: 40%;
}
ul#tabs li#tab4 {
left: 60%;
}
ul#tabs li#tab5 {
left: 80%;
}
ul#tabs li:hover,
body#wrox li#tab1,
body#amazon li#tab2,
body#google li#tab3,
body#slashdot li#tab4,
body#twit li#tab5 {
background: transparent url('images/tab-hover/tab-hover_01.png') no-repeat scroll
left;
}
ul#tabs li:hover " div,
body#wrox li#tab1 " div,
body#amazon li#tab2 " div,
body#google li#tab3 " div,
body#slashdot li#tab4 " div,
body#twit li#tab5 " div {
background: transparent url('images/tab-hover/tab-hover_03.png') no-repeat scroll
right;
}
ul#tabs li:hover " div " div,
body#wrox li#tab1 " div " div,
body#amazon li#tab2 " div " div,
body#google li#tab3 " div " div,
body#slashdot li#tab4 " div " div,
body#twit li#tab5 " div " div {
background: transparent url('images/tab-hover/tab-hover_02.png') repeat-x scroll
center;
}
ul#tabs a:hover,
body#wrox li#tab1 a,
body#amazon li#tab2 a,
body#google li#tab3 a,
body#slashdot li#tab4 a,
body#twit li#tab5 a {
color: #000;
}

Rozdzia 1. n Zakadki
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}
div#iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-top: 50px;
border-top: 1px solid #000;
}
iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}

2. Zapisujemy plik tabs.css.

3. Nastpnie otwieramy pliki wrox.html, amazon.html, google.html, slashdot.html

oraz twit.html i wprowadzamy w nich nastpujce zmiany:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pl'"
<head"
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2' /"
<title"</title"
<link rel='stylesheet' type='text/css' href='tabs.css' /"
<!--sztuczka dostosowujca dla przegldarek Microsoftu -->
<!--[if lt IE 7]"
<link rel='stylesheet' type='text/css' href='tabs-ie.css' /"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"
</head"
<body id='wrox'"
<ul id='tabs'"
<li id='tab1'"
<div"<div"
<a href='wrox.html'"<span"Wrox P2P</span"</a"
</div"</div"
</li"
<li id='tab2'"
<div"<div"
<a href='amazon.html'"<span"Amazon</span"</a"
</div"</div"
</li"
<li id='tab3'"
<div"<div"
<a href='google.html'"<span"Google</span"</a"

41

42

CSS. Gotowe rozwizania

</div"</div"
</li"
<li id='tab4'"
<div"<div"
<a href='slashdot.html'"<span"Slashdot</span"</a"
</div"</div"
</li"
<li id='tab5'"
<div"<div"
<a href='twit.html'"<span"This Week in Tech</span"</a"
</div"</div"
</li"
</ul"
<div id='iframe'"
<iframe src='http://p2p.wrox.com'
frameborder='0' marginheight='0' marginwidth='0'"</iframe"
</div"
</body"
</html"

4. Zapisujemy pliki wrox.html, amazon.html, google.html, slashdot.html

oraz twit.html.
5. Tworzymy nowy arkusz stylw i wpisujemy nastpujc regu:
ul#tabs {
height: 22px;
}

6. Zapisujemy powyszy arkusz stylw jako tabs-ie.css.

Rezultat tego kodu przedstawiono na rysunku 1.7.

Ostatnia modyfikacja projektu jest najbardziej skomplikowana, ale zarazem daje pewn
elastyczno, poniewa mona j atwo zastosowa w projektach, ktre wymagaj dopasowania wielkoci zakadek do rozmiaru elementw, w ktrych si one znajduj. W tym przykadzie nie ma ogranicze co do minimalnej lub maksymalnej wielkoci zakadki. Takie
ograniczenia moglibymy stworzy, stosujc waciwoci min-width oraz max-width w regule ul#tabs.
Pierwsza modyfikacja dokonana w pliku tabs.css polegaa na dodaniu deklaracji position:
relative; do reguy ul#tabs.
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 23px;
border-bottom: 1px solid #000;
background: #dadada;
position: relative;
}

Rozdzia 1. n Zakadki

43

Rysunek 1.7.

Dziki dodaniu deklaracji position: relative; elementy <li> pozycjonowane absolutnie,

znajdujce si wewntrz elementu <ul> o identyfikatorze tabs, bd pozycjonowane relatywnie wzgldem tego elementu. Zastosowaem tutaj pozycjonowanie ze wzgldu na fakt, e
Internet Explorer bdnie obsuguje wartoci procentowe. Mimo ustawienia szerokoci kadego elementu <li> na 20%, ostatni z elementw w Internet Explorerze pojawia si w nowej linii a przecie 20%*5 = 100%!
ul#tabs li {
position: absolute;
bottom: 0;
margin: 0;
height: 23px;
text-align: center;
width: 20%;
background: transparent url('images/tab/tab_01.png') no-repeat scroll left;
}

Pierwsza deklaracja w powyszej regule powoduje, e elementy <li> bd pozycjonowane

absolutnie wzgldem nadrzdnego elementu <ul>. Deklaracja bottom: 0; ustawia kady
element <li> wzgldem dolnej krawdzi zawierajcego je elementu <ul>. Nastpna deklaracja (width: 20%;) ustawia szeroko kadego elementu <li> na 20% szerokoci otaczajcego elementu <ul>. Problem z Internet Explorerem udao si omin dziki absolutnemu
pozycjonowaniu elementw <li>, przez co ostatni z nich nie moe zosta przeniesiony do
nowej linii.

44

CSS. Gotowe rozwizania

Ostatnia deklaracja suy do ustawienia w tle pierwszego obrazka. Przy uyciu programu
Photoshop pociem obrazek na trzy czci. Pierwsza bdzie suya jako lewa strona i lewy
rg zakadki, druga jako rodkowa cz zakadki, a trzecia jako prawa strona i prawy rg.
Pierwszy obrazek zostaje ustawiony (i wyrwnany do lewej) jako niepowtarzajce si to
wszystkich elementw <li>. Nastpnie w celu dodania moliwoci rozcigania si zakadek
zastosowalimy dodatkowe elementy <div> w kadym z dokumentw XHTML. Elementy
te posu nam jako noniki utworzonych wczeniej obrazkw.
ul#tabs li " div {
height: 23px;
background: transparent url('images/tab/tab_03.png') no-repeat scroll right;
}

Nastpna regua suy do ustawienia prawej strony zakadki. Do tego posuy nam prawa
strona pierwszego elementu <div>, ktremu nadalimy wysoko 23 pikseli, czyli tak sam
jak wysoko zawierajcego go elementu <li>. Nastpnie ustawiamy obrazek w tle pierwszego elementu <div>, wyrwnujc go do prawej. Drugi element <div> jest zagniedony
w pierwszym i suy do ustawienia rodkowej czci zakadki:
ul#tabs li " div " div {
height: 23px;
background: transparent url('images/tab/tab_02.png') repeat-x scroll center;
margin: 0 8px 0 7px;
}

Temu elementowi rwnie nadajemy wysoko 23 pikseli. To zostao wyrwnane do rodka elementu i bdzie si powtarzao wzdu osi x, czyli poziomo. Na koniec, w celu uniknicia nachodzenia na siebie elementw, stosujemy lewy i prawy margines o szerokoci odpowiadajcej szerokoci obrazkw uytych po lewej i prawej stronie zakadki.
Nastpne pi regu suy do pozycjonowania w poziomie wszystkich elementw <li>:
ul#tabs li#tab1
left: 0;
}
ul#tabs li#tab2
left: 20%;
}
ul#tabs li#tab3
left: 40%;
}
ul#tabs li#tab4
left: 60%;
}
ul#tabs li#tab5
left: 80%;
}

{
{
{
{
{

Kada zakadka jest wyrwnana do lewej wzgldem nadrzdnego elementu <ul>, przy czym
odlego od lewej krawdzi ronie o 20% dla kadej kolejnej zakadki.
Na koniec jeszcze raz ustawiamy waciwoci wszystkich czci zakadek, z tym, e tym
razem skupiamy si na stylach zakadki odpowiadajcej aktualnie zaadowanej stronie oraz
na dodaniu efektu podwietlenia po najechaniu na zakadk kursorem.

Rozdzia 1. n Zakadki

45

ul#tabs li:hover,
body#wrox li#tab1,
body#amazon li#tab2,
body#google li#tab3,
body#slashdot li#tab4,
body#twit li#tab5 {
background: transparent url('images/tab-hover/tab-hover_01.png') no-repeat scroll
left;
}
ul#tabs li:hover " div,
body#wrox li#tab1 " div,
body#amazon li#tab2 " div,
body#google li#tab3 " div,
body#slashdot li#tab4 " div,
body#twit li#tab5 " div {
background: transparent url('images/tab-hover/tab-hover_03.png') no-repeat scroll
right;
}
ul#tabs li:hover " div " div,
body#wrox li#tab1 " div " div,
body#amazon li#tab2 " div " div,
body#google li#tab3 " div " div,
body#slashdot li#tab4 " div " div,
body#twit li#tab5 " div " div {
background: transparent url('images/tab-hover/tab-hover_02.png') repeat-x scroll
center;
}

Tym razem jedyne, co trzeba zmieni, to obrazek ta. Technika ta, wykorzystujc kaskadowy charakter arkuszy, pozwala na zmian obrazka ta zakadki w przypadku zaadowania
przypisanej jej strony lub w przypadku najechania na ni kursorem.
Do kadego dokumentu dodalimy take wyraenie warunkowe, widoczne tylko dla Internet Explorera, wprowadzajce dodatkowy arkusz stylw przeznaczony wycznie dla tej
przegldarki:
<!--[if lt IE 7]"
<link rel='stylesheet' type='text/css' href='tabs-ie.css' /"
<script src='/ie7/ie7-standard-p.js' type='text/javascript'"</script"
<![endif]--"

Ten arkusz stylw zosta doczony za pomoc komentarza warunkowego odczytywanego

tylko przez przegldarki Microsoftu, a ktry suy do doczania arkuszy stylw dziaajcych poprawnie z tymi przegldarkami.
Wewntrz tego arkusza wpisalimy tylko jedn regu:
ul#tabs {
height: 22px;
}

Regua ta likwiduje jednopikselow przestrze pod zakadkami.

Po tym, jak nauczylimy si implementowania zakadek na naszych stronach na cztery rne sposoby, moemy przej do nastpnego rozdziau, w ktrym poka, jak stworzy wielokolumnowy ukad strony przy uyciu XHTML i CSS.