CSS.

Witryny internetowe
szyte na miar. Autorytety
informatyki. Wydanie II
Autor: Charles Wyke-Smith
Tumaczenie: ukasz Piwko
ISBN: 978-83-246-1756-2
Tytu oryginau: Stylin with CSS: A Designers
Guide (2nd Edition) (Voices That Matter)
Format: 168x237, stron: 320

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

Wykorzystaj potne narzdzia CSS, aby tworzy nowoczesne

i powszechnie dostpne witryny internetowe
Jak zbudowa wielokolumnowy ukad strony bez pomocy tabeli?
Jak utworzy menu rozwijalne?
Jak formatowa tekst za pomoc CSS?
Technologia CSS, czyli kaskadowych arkuszy stylw, powstaa w celu odseparowania
struktury dokumentu od formy jego prezentacji. Wykorzystanie kaskadowych arkuszy
stylw przyspiesza tworzenie stron internetowych, a zgromadzenie wszystkich
informacji dotyczcych wygldu tekstu i ukadu elementw w jednym miejscu uatwia
ich modyfikacj oraz aktualizacj. Ponadto technologia ta daje moliwo zdefiniowania
wygldu strony dla rnych mediw, takich jak ekran, palmtop, dokument w druku,
czytnik ekranowy czy drukarki Braillea. Krtko mwic, CSS umoliwia budowanie
nowoczesnych, wygodnych i powszechnie dostpnych witryn internetowych.
W ksice tej znajdziesz mnstwo inspirujcych technik i przypadkw zaczerpnitych
z prawdziwych projektw, a take bibliotek szablonw stron, formularzy, menu, list
oraz tabel, dziki ktrym nauka i tworzenie wasnych stron bdzie przebiega znacznie
efektywniej. Korzystajc z tego podrcznika, nauczysz si precyzyjnie pozycjonowa
elementy przy uyciu wasnoci pywania, marginesw ujemnych, dopenienia
oraz pozycjonowania bezwzgldnego. Dowiesz si, jak tworzy ukad strony
automatycznie dopasowujcy si do rozmiaru okna oraz jak ustawia obrazy ta.
Poznasz wszystkie reguy, ktre pozwol Ci kreowa wyjtkowe projekty zgodne
z obowizujcymi standardami.
XHTML strukturalizacja treci
Podstawy CSS
Style lokalne, osadzone i zewntrzne
Klasy i identyfikatory
Selektory i deklaracje
Formatowanie tekstu
Pozycjonowanie elementw
Projektowanie komponentw interfejsu
Formularze, listy i menu
Tworzenie kompletnych witryn internetowych
Architektura witryny
Wykorzystaj CSS i zrb wraenie na uytkownikach Twojej witryny!

Spis treci
Wstp

12

Rozdzia 1. XHTML: Strukturalizacja treci 16

Standardy sieciowe 18
To nie dziaa w przegldarce Microsoft Internet Explorer 6
Tre, struktura i prezentacja 19
Czas na zmiany 21
Oto przykad starej szkoy projektowania stron
U progu nowej ery 23

18

21

XHTML 24
Zasady XHTML 25
Szablon XHTML 30
Znakowanie treci 32
Ukad elementw elementy blokowe i liniowe 32
Hierarchia dokumentu, czyli zapoznanie z rodzin XHTML

Rozdzia 2. Podstawy CSS 40

Trzy sposoby doczania arkuszy stylw
Style lokalne 42
Style osadzone 43
Style zewntrzne 44
Anatomia reguy CSS
Pisanie regu CSS

42

46

47

Selekcja znacznikw w obrbie hierarchii dokumentu

Selektor potomka 48
Selektor dziecka 52
Klasy i identyfikatory 53
Wprowadzenie do identyfikatorw 57
Identyfikatory a klasy 58
Selektory do zada specjalnych 59
Podsumowanie wiadomoci o selektorach 62
Pseudoklasy 63
Pseudoklasy odnonikw 63
Inne przydatne pseudoklasy 65

48

38

spis treci

Pseudoelementy
Dziedziczenie

66

68
69
69

Kaskadowo
rda stylw
Zasady kaskadowoci

70

Deklaracje 74
Wartoci liczbowe 74
Wartoci kolorw 77

Rozdzia 3. Formatowanie tekstu 80

Definiowanie czcionki 82
Kolekcje czcionek 83
Rodziny fontw 85
Tymczasowe uycie stylw osadzonych 87
Ustawianie czcionki dla caej strony 88
Ustawianie rozmiaru pisma 90
Style dziedziczone w elementach zagniedonych
Wasnoci pisma 95
Wasno font-style 95
Wasno font-weight 96
Wasno font-variant 97
Skrcony zapis wasnoci czcionek

98

Wasnoci tekstu 99
Wasno text-indent 100
Wasno letter-spacing 102
Wasno word-spacing 103
Wasno text-decoration 104
Wasno text-align 105
Wasno line-height 106
Wasno text-transform 107
Wasno vertical-align 108
Uywanie stylw czcionek i tekstu

110

93

10

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Rozdzia 4. Pozycjonowanie elementw 114

Model blokowy 116
Obramowanie 117
Dopenienie 120
Marginesy 120
Scalanie marginesw 122
Rozmiary bloku 123
Tworzenie pojedynczej kolumny

125

Elementy pywajce i ich czyszczenie

Wasno float 128
Wasno clear 130

128

Wasno position 134

Pozycjonowanie statyczne 134
Pozycjonowanie wzgldne 135
Pozycjonowanie bezwzgldne 136
Pozycjonowanie stae 137
Kontekst pozycjonowania 138
Wasno display

141

Praktyczne uycie wasnoci position i display

142

Rozdzia 5. Tworzenie ukadu strony 148

Przykady ukadw wielokolumnowych
Poznajemy bibliotek Stylib
Szeroko ma znaczenie

150

153

153

Elementy pywajce a pozycjonowane bezwzgldnie 154

Prosty ukad dwukolumnowy ze sta szerokoci kolumn 155
Poznaj swoje wewntrzne elementy div 160
Zapobieganie przepenieniu 160
Formatuj do woli wewntrzne elementy div 161
Formatowanie tekstu 161
Prosty pynny ukad dwukolumnowy
Nakadamy ograniczenia 163
Pywa czy nie pywa 164

161

Trzykolumnowy ukad o staej szerokoci

Pynny ukad trzykolumnowy

169

165

spis treci

Ustawianie takiej samej dugoci wszystkich kolumn

Faszywe kolumny 174
Wyduanie kolumn za pomoc JavaScript
(oraz zaokrglanie rogw!) 178
Ukad pozycjonowany bezwzgldnie

173

182

Rozdzia 6. Projektowanie komponentw interfejsu 188

Tabele

190

Formularze 203
Zasada dziaania formularzy 203
Znaczniki tworzce formularz 204
Formatowanie formularza 212
Listy i menu 219
Listy 219
Menu rozwijalne 231

Rozdzia 7. Tworzenie kompletnych

witryn internetowych 244
Strona Stylin with CSS

246

248
Architektura witryny 250
Struktura katalogw

Kopiowanie potrzebnych plikw CSS z biblioteki

Regua @import 253
Style kolorw i tekstu 257
Kod rdowy strony 262
Obrazy w tle 265
Menu rozwijalne 268
Przezroczysty pasek boczny 271
Dodawanie formularza rejestracji 276
Formatowanie tekstu 279
Podsumowanie

285

DODATEK A. Znaczniki XHTML 286

DODATEK B. Wasnoci CSS 290
skorowidz 304

253

11

ROZDZIA 4

:YdcMTYXYaKXSO

OVOWOX^a

ROZDZIA 4. POZYCJONOWANIE ELEMENTW

Jedn z kluczowych zmian zwizanych z wprowadzeniem standardw sieciowych bya rezygnacja z tabel jako szkieletu strony.
Tabele tak naprawd nigdy nie byy do tego przeznaczone. Ich
funkcj byo przechowywanie danych w podobny sposb, jak
przechowuje si dane w Excelu. Jednak przed opracowaniem
kaskadowych arkuszy stylw ukad strony opierano na tabelach,
ktre tworzyy siatk utrzymujc poszczeglne kolumny elementw. Wymuszao to stosowanie rnych sztuczek, jak puste
obrazy GIF, zamania wiersza i twarde spacje. Za pomoc CSS
mona z du precyzj rozmieci elementy na stronie bez potrzeby stosowania adnych elementw prezentacyjnych.
Przy uyciu wasnoci CSS, jak marginesy, dopenienie i obramo wanie, oraz takich technik, jak elementy pywajce i wasno
clear, mona uzyska takie same, a nawet lepsze efekty jak kiedy. Wszystko to jest moliwe przy zachowaniu czystoci kodu
XHTML oraz wspdzieleniu regu stylistycznych przez te same
elementy na rnych stronach. Dziki temu powstaj lekkie i a twe w modyfikowaniu strony.



116

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Sukces twrcy strony uywajcego wymienionych technik jest cakowicie uzaleniony od tego, jak dobrze pozna i zrozumie model
blokowy (ang. box model) oraz wasnoci position i display. Na
model blokowy skadaj si narzdzia suce do kontroli pooenia
elementw na stronie. Wasno position suy do okrelania wzajemnych relacji pooenia elementw. Wasno display pozwala
okreli, czy elementy maj ukada si jeden pod drugim, jeden
obok drugiego lub czy w ogle maj by widoczne. Zaczniemy od
modelu blokowego.

Model blokowy
Kady element uyty w kodzie XHTML tworzy na stronie blok.
W zwizku z tym strona XHTML w rzeczywistoci skada si
z pewnej liczby wzajemnie uoonych blokw.
Domylnie obramowanie kadego bloku jest niewidoczne, a to przezroczyste, dlatego niektrzy mogli si zastanawia, gdzie s te bloki.
W CSS wczenie obramowania i pokolorowanie ta jest banalnie
proste. Pozwala to na zobaczenie struktury strony w caej krasie.
Na przykad rysunek 4.1 przedstawia t sam stron, ktr zajmowalimy si pod koniec poprzedniego rozdziau, tylko z pokazanymi
ramkami wok elementw.
Rysunek 4.1. Dziki pokazaniu
ramek wida, e elementy liniowe
czy ciasno otaczaj swoj zawarto, natomiast elementy blokowe,
jak elementy listy, rozcigaj si na
ca szeroko strony (z wyjtkiem
tych, ktre maj ustawione marginesy). Naley rwnie zauway,
e ujemne marginesy akapitw
W tym przypadku pozwalamy przegldarce automatycznie ustawi
wychodz poza blok elementu
elementy na stronie. Aby tworzy bardziej interesujce ukady stro-

ny ni domylny, zaprezentowany na powyszym rysunku, trzeba

nauczy si sterowa wygldem i pooeniem blokw elementw.
Pierwszym krokiem w tym kierunku jest poznanie modelu blokowego (rysunek 4.2), ktry definiuje wasnoci kadego bloku.

Rozdzia 4. Pozycjonowanie elementw

Rysunek 4.2. Rysunek ten przedstawia relacje midzy marginesami,

obramowaniem i dopenieniem
w elemencie XHTML. W modelu
blokowym elementy frontowe, najczciej tekst i grafika, dodawane
s za pomoc kodu XHTML, natomiast kolory i obrazy w tle ustawia
si za pomoc CSS

Za pomoc CSS mona zmieni trzy cechy bloku:

Obramowanie: mona ustawi grubo, styl oraz kolor ramki.
Margines: mona ustawi odstp oddzielajcy blok od innych
ssiadujcych z nim elementw.
Dopenienie: mona ustawi odlego midzy treci bloku
a jego krawdziami.
Mwic prociej, marginesy odpychaj wszystko, co znajduje si
wok elementu, a dopenienie odpycha w stron rodka wszystko,
co znajduje si wewntrz elementu. Poniewa blok ma cztery krawdzie, wasnoci definiujce margines i dopenienie maj cztery
rodzaje ustawie: top, right, bottom i left.

Obramowanie
Naley pamita, e rzeczywiste gruboci reprezentowane przez sowa
kluczowe thin, medium i thick
nie s zdefiniowane w specyfikacji
CSS, przez co mog wystpowa
w tym zakresie rnice midzy przegldarkami. Style linii, poza solid,
take nie s okrelone w specyfikacji
CSS. Na przykad linia przerywana
(dashed) moe w rnych przegldarkach mie inne odstpy midzy
kreskami, a i same kreski rwnie
mog si rni.

Z wasnoci border s zwizane trzy inne wasnoci:

width (szeroko): przyjmuje wartoci thin, medium, thick oraz
wszystkie jednostki miary (em, px, % itd.);
style (styl): przyjmuje wartoci none, hidden, dotted, dashed,
solid, double, groove, ridge, inset oraz outset;
color: przyjmuje wszystkie wartoci reprezentujce kolory (na
przykad w formacie RGB, szesnastkowym i jako sowa kluczowe).

117

118

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Obramowanie bloku czsto ustawia si z wszystkich stron na ten

sam kolor, styl i grubo. Mona kad z tych wasnoci ustawi
osobno, w nastpujcy sposb:
p.warning {border-width:4px}
p.warning {border-style:solid}
p.warning {border-color:#F33;}

W takim przypadku lepiej jednak jest uy skrconego zapisu wasnoci border:

Dodaem te dwa piksele dopenienia z wszystkich stron, aby tekst nie
styka si z krawdziami.

p.warning {border:4px solid #F33; padding:2px}

Bez wzgldu na to, ktrego z przedstawionych sposobw uyjemy,

kady akapit nalecy do klasy warning bdzie otoczony cig
czerwon ramk o gruboci czterech pikseli, ktra mocno przykuwa
uwag (rysunek 4.3).
Skrcona wasno border pozwala zastosowa to samo formatowanie do wszystkich czterech krawdzi obramowania elementu. Jeli
jednak chcemy, aby poszczeglne krawdzie rniy si, moemy to
zrobi z atwoci. Chcemy, aby obramowanie byo cig czerwon
lini z wszystkich czterech stron, ale dla stworzenia lepszego efektu
wizualnego chcemy te, aby krawdzie prawa i dolna byy nieco
ciesze. Do uzyskania tego efektu potrzebne s dwie reguy stylistyczne. Pierwsza bdzie ustawia wasnoci wsplne wszystkim
czterem krawdziom, a druga ustawi za pomoc wasnoci borderwidth inn grubo dwch wybranych krawdzi.
p.warning {border:solid #F33; padding:2px;}
p.warning {border-width:4px 2px 2px 4px;}

Rezultat przedstawia rysunek 4.4.

Rysunek 4.3. Poniewa wszystkie cztery krawdzie maj by takie same, mona uy skrconego
zapisu wasnoci border. Dopenienie zapobiega
stykaniu si tekstu z obramowaniem

Rysunek 4.4. Dziki rozdzieleniu stylw na dwie

reguy, krawdzie bloku mog mie zarwno
wsplne cechy formatowania (kolor i dopenienie),
jak i osobne (grubo linii)

Rozdzia 4. Pozycjonowanie elementw

Podczas pracy nad stron pomocne jest tymczasowe wywietlenie

ramki elementu, dziki czemu wyraniej wida efekt formatowania
marginesw i dopenienia. Domylne ustawienia blokw s nastpujce: border-width: medium, border-style: none i border-color:
black. Poniewa wasno border-style jest ustawiona na none,
obramowania nie wida. Dlatego aby szybko wywietli obramowanie akapitu, mona napisa nastpujc regu:
p {border:solid;}

Ustawia ona styl obramowania na lini cig, dziki czemu ramka staje si widoczna kolor i grubo s ustawione domylnie.
Naley jednak pamita, e dodanie krawdzi moe mie wpyw na
ukad strony, poniewa grubo obramowania jest dodawana do rozmiaru caego bloku. Moe to mie znaczenie w zalenoci od tego,
w ktrym miejscu strony znajduje si element. Innym sposobem
na wywietlenie ramki wok elementu jest ustawienie koloru ta,
dziki czemu wida powierzchni bloku. W tym przypadku blok nie
zmienia rozmiaru.
Skrcony zapis wasnoci
Wpisywanie za kadym razem wszystkich czterech wartoci podczas definiowania marginesw, dopenienia lub
ramki elementu bywa nuce. Dlatego w CSS mona uywa skrconego zapisu, pozwalajcego na zdefiniowanie wszystkich czterech wartoci w jednej deklaracji. Kolejno wpisywania wartoci w takich deklaracjach jest
zawsze nastpujca: gra, prawa, d, lewa, czyli zgodna z ruchem wskazwek zegara, zaczynajc od godziny 12.
W zwizku z tym, aby ustawi marginesy dla elementu, poniszy zapis:
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
mona zastpi nastpujcym:
{margin:5px 10px 12px 8px;}
Poszczeglne wartoci s oddzielane pojedyncz spacj. Nie stosuje si adnego znaku rozdzielajcego, jak przecinek. Nie ma koniecznoci definiowania wszystkich czterech wartoci. Jeli ktra warto zostanie pominita,
przegldarka uyje wartoci z przeciwnej strony.
{margin:12px 10px 6px;}
W powyszym przykadzie brakuje ostatniej wartoci (lewa krawd). Dlatego w jej miejscu zostanie uyta warto zdefiniowana dla prawej strony (10px).
W poniszym przykadzie zostay ustawione tylko dwie wartoci top i right (gra i prawa). Zatem wartoci
bottom i left (d i lewa) bd wynosi odpowiednio 12 i 10 pikseli.
{margin:12px 10px;}
W kocu, jeli bdzie podana tylko jedna warto, zostanie ona odniesiona do wszystkich czterech stron:
{margin:12px;}
Za pomoc tej skrconej notacji nie da si tylko zdefiniowa dolnej i lewej krawdzi bez podawania wartoci dla
prawej i grnej, nawet jeli wynosz one zero. W takim przypadku mona napisa 0 bez adnej jednostki:
{border:0 0 2px 4px;}

119

120

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Dopenienie
Dopenienie to przestrze midzy treci bloku a jego krawdziami.
Poniewa stanowi wewntrzn cz bloku, przyjmuje jego kolor
ta. Rysunek 4.5 przedstawia dwa akapity jeden z dopenieniem
i jeden bez.
Rysunek 4.5. W elementach
z widoczn ramk prawie zawsze
stosuje si dopenienie, majce na
celu odsun tre od ramki

W miejscach, w ktrych kiedy projektanci musieli stosowa dopenienie tabeli i puste GIF-y, co wymagao duej iloci dodatkowego
kodu prezentacyjnego, dzi wystarczy tylko niewielka ilo kodu CSS.

Marginesy
Marginesy s nieco bardziej skomplikowane ni obramowanie i dopenienie. Po pierwsze, wikszo elementw blokowych (akapity,
nagwki, listy itp.) maj domylne marginesy, o czym pisaem ju
wczeniej.
Rysunek 4.6 przedstawia trzy zestawy zoone z nagwka i dwch
akapitw. Pierwszy z nich pokazuje domylne formatowanie
przegldarki. W drugim przypadku zastosowano marginesy i pokolorowano to, dziki czemu wida, jak marginesy tworz pust
przestrze. Trzeci przykad pokazuje, co si dzieje, kiedy marginesy
zostan ustawione na zero elementy si stykaj.
Do dobrych zwyczajw naley umieszczenie poniszej deklaracji na
pocztku kadego arkusza stylw:
* {margin:0; padding:0;}

Rozdzia 4. Pozycjonowanie elementw

Rysunek 4.6. Kontrolowanie
marginesw jest kluczow umiejtnoci nie mona zapomina, e
prawie kady element ma ustawione marginesy domylne

Regua ta ustawia marginesy i dopenienie wszystkich elementw

na zero. Dziki temu nie trzeba pamita, ktre elementy maj
te wasnoci ustawione domylnie, a ktre nie. Po wstawieniu tej
reguy do arkusza stylw wszystkie domylne marginesy i dopenienia znikn. Teraz mona niniejsze wasnoci okreli osobno,
tylko dla wybranych elementw. Pniej dowiemy si, e rne
przegldarki stosuj odmienne domylne wartoci marginesw
i dopenienia dla poszczeglnych grup elementw, jak formularze
czy listy. Dziki usuniciu domylnych ustawie i zastosowaniu
wasnych mona uzyska bardziej jednolity efekt we wszystkich
przegldarkach.
Czsto w ustawieniach marginesw dla elementw tekstowych
stosuje si mieszane jednostki miary. Na przykad lewy i prawy
margines akapitu mona zdefiniowa w pikselach, aby tekst zawsze
znajdowa si w tej samej odlegoci od bocznego menu. Natomiast
marginesy grny i dolny mona ustawi w jednostkach em, dziki
czemu odlego midzy akapitami w pionie bdzie zaleaa od
rozmiaru tekstu, na przykad:
p {font-size:1em; margin:.75em 30px;}

121

122

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

W tym przypadku odlego midzy akapitami bdzie zawsze

rwna trzem czwartym wysokoci pisma. Jeli oglny rozmiar tekstu w znaczniku body zostanie zwikszony, zwiksz si nie tylko
akapity, ale take proporcjonalnie odstpy midzy. Marginesy lewy
i prawy pozostan bez zmian, poniewa zostay zdefiniowane w pikselach. Bliej przyjrzymy si temu zagadnieniu w rozdziale 5, kiedy
zaczniemy projektowa ukady stron.

Scalanie marginesw
Powiedz to zdanie na gos: Marginesy ssiadujce w pionie s
scalane. Koniecznie trzeba o tym pamita. Ju wyjaniam, co to
znaczy i dlaczego jest takie wane. Wyobramy sobie, e mamy trzy
akapity, jeden pod drugim. Kady z nich formatuje ponisza regua:
p {width:400px; height:50px; border:1px solid #000;
margin-top:50px; margin-bottom:30px; background-color:#CCC;}
Wprawdzie marginesy ssiadujce
w pionie scalaj si, jednak marginesy poziome nie. Te drugie zachowuj
si zgodnie z oczekiwaniami, czyli
tworz odstp rwny ich sumie.

Rysunek 4.7. Marginesy ssiadujce w pionie ulegaj scaleniu

Poniewa dolny margines pierwszego akapitu styka si z grnym

marginesem drugiego akapitu, mona by si spodziewa, e odstp
midzy nimi wyniesie 80 pikseli (50+30). Nie jest to jednak prawda.
Kiedy grny i dolny margines stykaj si, nachodz na siebie, a jeden z nich signie krawdzi drugiego elementu. W tym przypadku
wikszy jest margines grny drugiego elementu, dziki czemu wanie
on okrela odstp midzy elementami 50 pikseli (rysunek 4.7).
Efekt ten nazywa si scalaniem marginesw (ang. margin collapsing).

Rozdzia 4. Pozycjonowanie elementw

Efekt scalania marginesw pozwala na utrzymanie pierwszego

i ostatniego elementu z grupy takich elementw jak nagwki, akapity czy listy w odpowiedniej odlegoci od grnej lub dolnej czci
strony. Kiedy takie same elementy pojawiaj si midzy innymi
elementami, oba marginesy nie s potrzebne i zostaj scalone w taki
sposb, e odstp okrela wikszy z nich.

Rozmiary bloku
Zasada dziaania modelu blokowego naley do najtrudniejszych
aspektw CSS zarwno dla ,pocztkujcych jak i zaawansowanych
uytkownikw. Naley pamita, e ponisze informacje dotycz elementw blokowych, takich jak nagwki, akapity czy listy.
Elementy liniowe zachowuj si nieco inaczej.
Przeanalizujemy model blokowy szczegowo, krok po kroku.
Omwimy metody ustawiania szerokoci blokw, ktre maj kluczowe znaczenie w tworzeniu ukadw kolumnowych. Te same zasady
dotycz take ustawiania wysokoci bloku.
Szeroko elementu blokowego (dalej zwanego blokiem) ustawia
wasno width:
p {width:400px;}

Aby zobaczy blok, nie zmieniajc ustalonego powyej rozmiaru,

mona pokolorowa jego to:
p {width:400px; background-color:#EEE;}

Rysunek 4.8 przedstawia element o szerokoci 400 pikseli z pokolorowanym tem.

Rysunek 4.8. Dziki ustawieniu
wasnoci width element nie zajmuje caego dostpnego miejsca.
W tym przypadku element znajduje
si w elemencie body, czyli rozcigaby si od lewej do prawej krawdzi okna przegldarki

Poniewa nie ustawiono dopenienia, tre niniejszego elementu

rwnie ma szeroko 400 pikseli i styka si z krawdziami swojego

123

124

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

kontenera. Jest to jak najbardziej zrozumiae, ale po zastosowaniu

dopenienia i obramowania co zaczyna szwankowa. Po lewej i prawej stronie elementu ustawimy 20-pikselowe dopenienie:
p {width:400px; background-color:#EEE; padding:0 20px;}

Mona by si spodziewa, e po zastosowaniu 40 pikselowego dopenienia w bloku o szerokoci 400 pikseli na tre pozostanie 360
pikseli. Jest jednak inaczej. W zamian cay blok zostaje powikszony
o 40 pikseli (rysunek 4.9).
Rysunek 4.9. Dopenienie
rozszerza blok

Jeli po lewej i prawej stronie elementu ustawimy obramowanie

o gruboci 6 pikseli:
p {width:400px; margin: 0; padding:0 20px; border:#000 solid;
border-width: 0 6px 0 6px; background-color:#CCC;}

blok poszerzy si o kolejne 12 pikseli (rysunek 4.10). Teraz cakowita

szeroko bloku wynosi 452 piksele (6+20+400+20+6).
Rysunek 4.10. Obramowanie
rozszerza blok jeszcze bardziej

Dodamy jeszcze lewy i prawy margines, aby utworzy pust przestrze wok elementu (rysunek 4.11):
p {width:400px; margin: 0 30px; padding:0 20px; border:#000
solid; border-width: 0 6px 0 6px; background-color:#CCC;}

Rozdzia 4. Pozycjonowanie elementw

Rysunek 4.11. Marginesy tworz
wok elementu pust przestrze

Dodanie marginesw, w tym przypadku po 30 pikseli z lewej i prawej strony, zwiksza zajmowan przez element powierzchni, poniewa znajduj si one na zewntrz bloku. Mimo i mona by oczekwa, e obramowanie i dopenienie, ktre znajduj si wewntrz
bloku, nie zwikszaj jego szerokoci, prawda jest inna.
Uwaga nr 1 na temat modelu blokowego: Bloki o zdefiniowanych rozmiarach rozszerzaj si w poziomie
w wyniku dodawania do nich marginesw, dopenienia i obramowania.
Wasno width ustawia szeroko
treci bloku, a nie szeroko samego
bloku.

Moe to mie due znaczenie w przypadku ukadw kolumnowych,

w ktrych kolumny musz mie okrelon szeroko. Ukad zoony
z elementw pywajcych (sposoby tworzenia takich ukadw opisz
w kolejnym rozdziale) moe zosta zburzony, jeli szeroko kolumny zostanie nieuwanie zmieniona przez zmian szerokoci dopenienia, marginesu lub obramowania. Kolumn zazwyczaj tworzy si
za pomoc elementu div o odpowiednich rozmiarach. W elemencie
tym nastpnie zagniedane s elementy treci kolumny, jak nagwki, akapity, listy nawigacyjne itd.

Tworzenie pojedynczej kolumny

Jako ilustracj podstaw techniki tworzenia ukadw kolumnowych
przedstawiam poniszy element div o szerokoci 170 pikseli, zawierajcy nagwek i akapit:
<div id=column>
<h4>Nagwek h4</h4>
<p>Nagwek ten i akapit...</p>
</div>

Regua CSS dla tego elementu div:

div#column {width:170px;}

Wzdu grnej krawdzi okna dodaem linijk, aby byo wida, jak
zmienia si szeroko wraz ze zmianami wprowadzanymi w CSS
(rysunek 4.12).

125

126

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Pokolorowaem to nagwka i akapitu, aby pokaza, e cakowicie

wypeniaj kolumn w poziomie. Domylny rozmiar elementw blokowych to auto, co oznacza: najwicej, jak to moliwe. To prowadzi
do sformuowania drugiej uwagi.
Uwaga nr 2 na temat modelu blokowego: Elementy, ktre nie maj
zdefiniowanej szerokoci, rozcigaj
si na ca szeroko zawierajcego je elementu. Dlatego dodanie
poziomego marginesu, dopenienia
i obramowania powoduje zmian
szerokoci treci.

Widzc tekst stykajcy si z krawdziami kontenera, jak na powyszym

rysunku, powinnimy natychmiast poczu ch ustawienia dopenienia
dla elementu div, aby doda nieco przestrzeni (rysunek 4.13).
div#column {width:170px; padding:10px;}

Rysunek 4.12. Jeli kontener

nie ma ustawionego dopenienia, elementy blokowe
nagwek i akapit rozcigaj si od lewej do prawej
krawdzi zawierajcego je
elementu

Rysunek 4.13. Dodanie dopenienia do kontenera powoduje

jego rozszerzenie. Teraz kontener ma 192 piksele szerokoci.
Dziki pokolorowaniu ta elementu div na rowo wyraniej
wida dopenienie

Jak wida na linijce u gry, dopenienie o szerokoci 10 pikseli spowodowao rozszerzenie elementu do szerokoci 190 pikseli. Dziki
temu tre elementu zostaa odsunita od krawdzi, jednak aby zachowa jego pocztkow szeroko 170 pikseli, musimy odpowiednio
zmniejszy warto wasnoci width elementu div. Ustawimy j
na 150 pikseli. Takie modyfikowanie szerokoci kolumn po kadej
zmianie szerokoci dopenienia bywa mczce. Zwaszcza kiedy
mamy kilka kolumn.
Ewentualnie mona zastosowa jednakowe marginesy do wszystkich
elementw w kolumnie, ale to oznaczaoby konieczno dostosowania wielu elementw, gdybymy zdecydowali si zmieni odlego
kolumny od treci.

Rozdzia 4. Pozycjonowanie elementw

Proste rozwizanie polega na dodaniu jeszcze jednego elementu div

wewntrz elementu div tworzcego kolumn.
<div id=column>
id=column_inner>
<div

<h4>Nagwek h4</h4>
<p>Nagwek ten i akapit...</p>
</div>

</div>

Dopenienie ustawiamy dla wewntrznego elementu div:

div#column {width:170px; padding:10px;}
div#inner_column {padding:10px;}

Dziki temu mona kontrolowa dopenienie kolumny za pomoc

jednego stylu, unikajc przy tym problemw ze zmian szerokoci
kolumny (rysunek 4.14).

Rysunek 4.14. Dziki zastosowaniu dopenienia dla

wewntrznego elementu
div szeroko kolumny zdefiniowanej przez zewntrzny
element div nie ulega zmianie

Wewntrzny element div nie ma okrelonego rozmiaru, a wic uwaga nr 2 na temat modelu blokowego jest prawdziwa. Tre zostaa
cinita. Teraz zmieniajc jedno ustawienie marginesu, moemy
odsun wszystkie elementy kolumny od jej krawdzi. Rozmiar
kolumny pozostanie bez zmian. Techniki dwch elementw div
bd uywa w wielu ukadach stron prezentowanych w kolejnym
rozdziale. Dlatego przed przejciem do dalszej czci naley dobrze
zrozumie jej ide.
Wniosek z dotychczasowych rozwaa jest nastpujcy: we wszystkich zgodnych ze standardami przegldarkach wasno CSS width
ustawia nie szeroko elementu, a znajdujcej si w jego wntrzu
treci. Dopenienie, marginesy i obramowanie s dodawane do cakowitego rozmiaru elementu, ktry ma zdefiniowan szeroko.
Teraz przyjrzymy si dwm pozostaym kluczowym technikom
w zakresie projektowania ukadw stron za pomoc CSS. S to elementy pywajce (wasno float) i wasno clear.

Po wszystkich moich wywodach na temat zalet unikania prezentacyjnego kodu

XHTML moe wyda si dziwne, e byem skonny uy dodatkowego znacznika,
aby uzyska efekt wizualny. Jednak elementy div, w przeciwiestwie do tabel,
nie zmieniaj w aden sposb efektu wizualnego, chyba e zostan celowo sformatowane. Dlatego wydaje mi si, e jest to wart uwagi kompromis, zwaszcza
dla pocztkujcych uytkownikw, ktrzy i tak musz pamita o wielu innych
rzeczach. Dziki temu nie trzeba przy kadej zmianie dopenienia lub marginesu
wyciga kalkulatora i na nowo oblicza szerokoci kolumn.

127

128

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Elementy pywajce i ich czyszczenie

Kolejn niezwykle przydatn technik pomagajc w organizacji
ukadu strony jest uycie elementw pywajcych w poczeniu
z wasnoci clear. Element pywajcy pozostaje poza standardowym ukadem elementw na stronie. Elementy znajdujce si za
elementem pywajcym przesuwaj si do gry, ukadajc si obok
niego, jeli jest tam wystarczajco duo miejsca. Wasno clear
pozwala okreli, czy elementy znajdujce si za elementem pywajcym maj przesuwa si do gry czy nie. Jeli na przykad mamy
dwa akapity i chcemy, aby tylko pierwszy z nich pojawi si obok
elementu pywajcego, moemy ten drugi zatrzyma pod elementem
pywajcym za pomoc wasnoci clear. Przyjrzymy si uwaniej
obu tym wasnociom.

Wasno float
Jednym z zastosowa wasnoci float jest otaczanie obrazw tekstem. Naley ona jednak take do fundamentw ukadw wielokolumnowych.
Zaczniemy od otaczania obrazw tekstem.
img {oat:left; margin:0 4px 4px 0;}

Powysza regua spycha obraz na lewo, dziki czemu tekst bdzie

znajdowa si z jego prawej strony (rysunek 4.15).
Rysunek 4.15. Obraz pywajcy
znajduje si poza standardowym
ukadem strony. Jeli za nim znajduje si element tekstowy, tworzcy
go tekst bdzie otacza ten obraz

Rozdzia 4. Pozycjonowanie elementw

Aby wasno float zadziaaa poprawnie, kod XHTML musi wyglda nastpujco:
<img .../>
<p>...tekst akapitu...</p>

Innymi sowy, uywajc wasnoci float, damy, aby element zosta

przesunity jak najdalej w lewo (lub prawo w przypadku deklaracji
float: right) w obrbie zawierajcego go elementu w tym przypadku body. Akapit (na powyszym rysunku ma czerwon ramk) nie
traktuje elementu pywajcego jako bloku znajdujcego si przed nim
i dlatego rwnie przesuwa si do lewego grnego rogu swojego rodzica. Jednak jego tre (tekst) zawija si wok pywajcego obrazu.
Od tego ju tylko krok do tworzenia pywajcych kolumn (rysunek 4.16).
p {oat:left; width:200px; margin:0;}
img {oat:left; margin:0 4px 4px 0;}
Rysunek 4.16. Kiedy akapit o staej szerokoci zostaje ustawiony za
pomoc wasnoci float obok pywajcego obrazu, tworzy kolumn,
a jego tekst nie otacza ju obrazu

Zasad dotyczcych elementw pywajcych jest wiele wicej. Mona o nich

przeczyta w ksice Erica Meyera
pod tytuem Cascading Style Sheets
2.0 Programmers Reference (McGrawHill Osborne Media, 2001). Cytujc za
tym autorem, Kiedy do elementu
zastosuje si wasno float, zasady
te powoduj wyniesienie tego elementu tak daleko w lewo i do gry,
jak to tylko moliwe. Mimo i od wydania tej ksiki mino kilka lat, jest
ona doskonaym rdem wiedzy na
temat wewntrznych mechanizmw
rzdzcych CSS, ktrej znalezienie
gdzie indziej graniczy z cudem.

Zastosowanie wasnoci float zarwno do obrazu, jak i akapitu (o ustalonych szerokociach) powoduje, e tekst przestaje owija si wok
obrazu. Jest to jedna z gwnych zasad tworzenia ukadw kolumnowych przy uyciu elementw pywajcych. Elementy ustawiaj si
obok siebie jak kolumny, jeli maj ustalon szeroko i jest dla nich
wystarczajco miejsca (obrazy zawsze maj okrelony rozmiar i nie
trzeba ustawia im rozmiaru w CSS, aby pyway). Jeli ustalimy szeroko trzech elementw div i zastosujemy do nich wasno float,
otrzymamy trzy kontenery, do ktrych mona wstawia inne elementy
(ktre take mog pywa). Praktyczne przykady opisywanych technik
przedstawione zostay w rozdziale 5.

129

130

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Wasno clear
Z wasnoci float zazwyczaj wspwystpuje wasno clear. Jeli
jeden element jest pywajcy, inny jeli starczy dla niego miejsca
ustawi si obok niego. Czasami jednak nie chcemy, aby tak si
stao. Wolimy, aby ten drugi element pozosta pod elementem pywajcym. Rysunek 4.17 przedstawia stron zbudowan z elementw
zoonych z obrazu i tekstu otaczajcego go z prawej strony. Efekt
ten uzyskano dziki zastosowaniu pywajcych obrazw. Jest to identyczna sytuacja, jak na rysunku 4.16, tylko powtrzona trzy razy.
Rysunek 4.17. Dziki temu, e
obok drugiego obrazu jest miejsce,
trzeci obraz pywa obok niego
efekt ten nie by zamierzony

Oto kod XHTML powyszej strony (nieco skrcony dla oszczdzenia miejsca)
<img src=../images/dartmoor-view.jpg />
<p>Oto pikny obraz okolicy Dartmoor... </p>
<img src=../images/english-cottage.jpg />

Rozdzia 4. Pozycjonowanie elementw

<p>Do niedawna moja siostra mieszkaa w tym piknym domu...</p>
<img src=../images/windsor-castle_walls.jpg />
<p>Krlowa Anglii...</p>

Kod CSS:
p {margin:0 0 10px 0;}
img {oat:left; margin:0 4px 4px 0;}

Kady obraz powinien pywa po lewej stronie opisujcego go tekstu. Jeli jednak tekst jest zbyt krtki i nie zajmuje caego miejsca
dostpnego po prawej stronie obrazu, jak w przypadku drugiego
akapitu na rysunku 4.17, nastpna para obraz tekst zostanie podcignita do gry, w to wolne miejsce.
Ukad ten jest poprawnie interpretowany przez przegldark. Trzeci
element ma wystarczajco miejsca, aby przenie si obok drugiego,
wic to robi. Nie jest to oczywicie zamierzony przez nasz efekt
wizualny. Rozwizaniem w tym przypadku jest dodanie niepywajcego elementu do kodu XHTML i ustawienie jego wasnoci clear
w celu zatrzymania ostatniego elementu na dole. Poniej znajduje si
potrzebny kod XHTML z dodanym elementem div oraz odpowiedni kod CSS:
<img src=../images/dartmoor-view.jpg />
<p>Oto pikny obraz okolicy Dartmoor... </p>
<img src=../images/english-cottage.jpg />
<p>Do niedawna moja siostra mieszkaa w tym piknym domu...</p>
<div class=clearthefloats></div>
<img src=../images/windsor-castle_walls.jpg />
<p>Krlowa Anglii...</p>

W kodzie CSS musimy tylko doda klas clearthefloats:

p {margin:0 0 10px 0;}
img {oat:left; margin:0 4px 4px 0;}
.cleartheoats {clear:both;}

Po wstawieniu dodatkowego elementu XHTML i klasy czyszczcej

w CSS (ktra czyci elementy pywajce z obu stron), strona wyglda tak, jak oczekiwalimy (rysunek 4.18).

131

132

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Rysunek 4.18. Dziki zastosowaniu dodatkowego elementu ukad
strony prezentuje si bez zarzutw

Nowy element dodany midzy drugim a trzecim akapitem znajduje

si teraz (mimo e go nie wida, poniewa nie zawiera adnej treci)
pod drugim obrazem. Dziki temu, e trzeci obraz i akapit znajduj
si za tym elementem w kodzie XHTML, s ustawione pod nim
i podany efekt zosta osignity.
Warto both wasnoci clear powoduje, e element zostaje przeniesiony pod elementy pywajce i przesunity zarwno do prawej, jak i do
lewej. Mona byo w tym przypadku
zastosowa warto left, ale dziki
wartoci both strona bdzie dobrze
wyglda take wtedy, gdy obrazy
bd pywa do prawej.

Prawidowe posugiwanie si wasnoci clear jest bardzo wan

umiejtnoci przy tworzeniu ukadw kolumnowych. W ramce
Metoda czyszczenia Asletta opisaem technik czyszczenia elementw pywajcych przy uyciu tylko kodu CSS i jednej klasy
w kodzie XHTML. Elementami pywajcymi i wasnoci clear
zajmiemy si pniej. Zaprezentowane do tej pory informacje wystarcz pocztkujcemu twrcy ukadw stron opartych na elementach pywajcych. Teraz przejdziemy do wasnoci position.

Rozdzia 4. Pozycjonowanie elementw

Metoda czyszczenia Asletta

Nazwa tej metody pochodzi od jej twrcy, Tonyego Asletta (www.csscreator.com). Pozwala ona zmusi kontener,
na przykad div, aby otacza zagniedon w nim pywajc tre, czego normalnie nie robi. Technika ta wykorzystuje pseudoelement CSS :after do wstawiania ukrytego fragmentu niepywajcej treci (kropki z wysokoci rwn zero) za pozosta treci znajdujc si w kontenerze. Dodatkowo do tej wstawianej treci zastosowana jest wasno clear, przez co kontener musi j otacza. Oto

cay kod:
.clearx:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearx {display: inline-table;}
/* Lewy ukonik ukrywa kod przed przegldark IE dla komputerw Mac \*/
* html .clear

x {height: 1%;}

.clear

x {display: block;}
/* koniec hacka */
Mona ten kod doda na kocu arkusza stylw, aby by dostpny na kadej stronie (wstawiem go na kocu pliku text_n_colors.css, ktry znajdziesz na FTP). Od tej pory, aby utworzy kontener zamykajcy w sobie pywajc
tre, wystarczy zastosowa do niego klas clearfix, na przykad:
<div class=clearx>
Niektre z zastosowa tej techniki:
1.
Utrzymanie stopki pod pywajcymi kolumnami (ukady zoone z pywajcych kolumn opisuj w rozdziale
5). Klas clearfix naley zastosowa do elementu div zawierajcego kolumny, dziki czemu kontener
ten zawsze bdzie si rozszerza w pionie na dugo wystarczajc do pomieszczenia wszystkich kolumn.
Element div reprezentujcy stopk znajdujcy si za elementem zawierajcym kolumny bdzie dziki temu
znajdowa si zawsze pod najdusz kolumn.
2.
Dodanie obramowania wok kilku pywajcych elementw. Elementy pywajce naley umieci w jednym
kontenerze div i zastosowa do tego kontenera klas clearfix. Dziki temu elementy pywajce pozostan
w kontenerze i wystarczy nada odpowiedni styl jego ramce.
Jest to jedna z tych technik, o ktrych nie wiadomo, do czego mog si przyda, dopki si ich nie potrzebuje.
Z pewnoci jest to lepsze rozwizanie ni wstawianie dodatkowych elementw div do rda strony.
Naley pamita, e w przegldarce IE 6 elementy pywajce s niesusznie zamykane w elementach div. Jest
to jeszcze jeden powd, aby najpierw sprawdza stron w przegldarkach zgodnych ze standardami, a dopiero
potem testowa w IE 6.
Wicej informacji na temat opisywanej metody mona znale pod adresem www.positioniseverything.net/easycle
aring.html.

133

134

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Wasno position
Sercem ukadu kolumnowego w CSS jest wasno position.
Pozwala ona zdefiniowa punkt odniesienia, wzgldem ktrego element ma by pozycjonowany na stronie.
Zobaczmy, co to oznacza.
Wasno position moe przyjmowa jedn z czterech wartoci:
static, absolute, fixed i relative. Domylna jest pierwsza z wymienionych. Miaem nieco problemw ze zrozumieniem dziaania tych
wartoci, kiedy po raz pierwszy natknem si na nie. Aby pomc
czytelnikowi unikn takich samych rozterek jak moje, przyjrzymy
si tym czterem wartociom na czterech przykadach dokumentu
zoonego z czterech akapitw. Zmianie bdzie ulega tylko warto wasnoci position trzeciego akapitu. Pozostae akapity cay
czas bd miay t wasno ustawion na warto domyln. Aby
uatwi sobie zadanie, trzeciemu akapitowi nadaem identyfikator
o nazwie specialpara.

Pozycjonowanie statyczne
Najpierw przyjrzymy si naszym akapitom z wasnoci position
ustawion na static (rysunek 4.19).
Rysunek 4.19. Jeli wszystkie
cztery akapity maj zdefiniowan
wasno position jako static, ukadaj si jeden pod drugim zgodnie
ze standardowym rozkadem elementw na stronie

Rozdzia 4. Pozycjonowanie elementw

Pozycjonowanie statyczne polega na uoeniu elementw jeden pod

drugim. Odlego midzy nimi jest rwna ich domylnym marginesom.
Aby zmieni ten sekwencyjny ukad elementw pozycjonowania
statycznego na stronie, trzeba uy jednej z pozostaych trzech wartoci wasnoci position.

Pozycjonowanie wzgldne
Ustawiamy wasno position trzeciego akapitu na warto relative. Dziki temu moemy przesuwa ten element wzgldem jego
domylnego pooenia za pomoc wasnoci top, right, bottom
i left. Zazwyczaj wystarcz tylko wartoci top i left. Ponisza regua stylistyczna:
p#specialpara {position:relative; top:30px; left:20px;}

wywoa efekt widoczny na rysunku 4.20.

Rysunek 4.20. Element pozycjonowany wzgldnie mona przesuwa w stosunku do jego domylnego pooenia za pomoc wasnoci
top, right, bottom i left

Lewy grny rg akapitu zosta przesunity o 30 pikseli w d i 20

pikseli w prawo. Jak wida, mimo e trzeci akapit zosta przesunity,
nic wicej na stronie si nie zmienio. Miejsce zajmowane przez ten
akapit, kiedy by pozycjonowany statycznie, nie zostao zwolnione.
Podobnie pozostae elementy nadal s na swoich pierwotnych
miejscach.

135

136

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Aby przesun element do gry

i w lewo, naley uy wartoci
ujemnych.

Naley pamita, e przesuwajc element w ten sposb, trzeba

wczeniej wygospodarowa dla niego miejsce. W dokumencie zaprezentowanym na rysunku 4.19 naleao przesun czwarty akapit
w d o 30 pikseli lub wicej. To pozwolioby unikn naoenia si
na niego trzeciego akapitu po zmianie jego pooenia.

Pozycjonowanie bezwzgldne
Pozycjonowanie bezwzgldne to zupenie inna bajka ni pozycjonowanie statyczne i wzgldne. Pozwala cakowicie wytrci element
z normalnego ukadu dokumentu. Zmodyfikujemy kod z poprzedniego przykadu, zmieniajc tylko warto wasnoci position
z relative na absolute.
p#specialpara {position:absolute; top:30px; left:20px;}

Rezultat tego dziaania przedstawia rysunek 4.21.

Rysunek 4.21. Pozycjonowanie
bezwzgldne polega na cakowitym wytrceniu elementu z normalnego ukadu strony i pooeniu go
wzgldem innego elementu
w tym przypadku elementu body

Jak wida na rysunku 4.21, miejsce wczeniej zajmowane przez

trzeci akapit zostao zajte przez kolejny. Element pozycjonowany
bezwzgldnie jest cakowicie niezaleny od innych otaczajcych
go w kodzie XHTML elementw. Jego pooenie jest obliczane
wzgldem elementu najwyszego poziomu, czyli body. W ten sposb
dobrnlimy do etapu, kiedy musimy zapozna si z pojciem kontekstu pozycjonowania, ktre bdzie jeszcze wielokrotnie powraca
w tym rozdziale.
Zacznijmy od tego, e domylnym kontekstem pozycjonowania
elementu pozycjonowanego bezwzgldnie jest element body.
Jak wida na rysunku 4.21, wasnoci top i left przesuny aka-

Rozdzia 4. Pozycjonowanie elementw

pit wzgldem elementu body elementu najwyszego poziomu

w naszym dokumencie, zamiast wzgldem jego domylnej pozycji
w dokumencie.
Poniewa kontekstem pozycjonowania elementu pozycjonowanego
bezwzgldnie jest element body, pozycjonowany element przesuwa
si w miar przewijania strony, aby cay czas pozosta w tym samym
miejscu. Element body take przesuwa si w miar przewijania strony.
Zanim nauczymy si pozycjonowa bezwzgldnie elementy w odniesieniu do innych ni body elementw, przyjrzymy si ostatniej
z wartoci wasnoci position.

Pozycjonowanie stae
Pozycjonowanie stae (fixed) jest podobne do bezwzgldnego.
Rnica polega na tym, e element jest pozycjonowany w odniesieniu do okna przegldarki. Dziki temu dany element nie przesuwa
si w miar przewijania strony. Rysunki 4.22 i 4.23 przedstawiaj
efekt pozycjonowania staego.

Rysunek 4.22. Pozycjonowanie

stae jest podobne do pozycjonowania bezwzgldnego

Rysunek 4.23. Rnica midzy pozycjonowaniem staym a bezwzgldnym staje

si widoczna po przewiniciu strony

137

138

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Dziki przykuciu elementu do okna przegldarki mona symulowa odradzane ramki. Mona na przykad utworzy element nawigacyjny, ktry bdzie cay czas w tym samym miejscu, unikajc
jednoczenie problemw z wieloma dokumentami skadajcymi si
na jedn stron. Pozycjonowanie stae nie dziaa jednak w przegldarce IE 6, ale dziaa w IE 7. Elegancki sposb obejcia problemu
z pozycjonowaniem staym w przegldarce IE 6 zosta opisany na
stronie http://tagsoup.com/cookbook/css/fixed/.

Kontekst pozycjonowania
Poniewa kontekst pozycjonowania jest bardzo wany dla tych,
ktrzy chc zrezygnowa z tabel jako szkieletu strony, omwimy to
zagadnienie szerzej. Zasada jest prosta pozycjonowanie kontekstowe polega na przesuwaniu danego elementu wzgldem innego za
pomoc wasnoci top, right, left i bottom. Ten drugi element jest
wanie kontekstem pozycjonowania. Jak wiemy z podrozdziau
Pozycjonowanie bezwzgldne, kontekstem pozycjonowania elementw pozycjonowanych bezwzgldnie jest element body chyba
e go zmienimy. Na przykad element body zawiera wszystkie inne
elementy strony. Kontekstem pozycjonowania moe by jednak dowolny element bdcy przodkiem innego elementu, jeli jego wasnoci position nada si warto relative.
Przyjrzyjmy si poniszemu kodowi:
<body>
<div id=outer>Zewntrzny element div
<div id=inner>Troch tekstu...</div>
</div>
</body>

Kod CSS:
div#outer_div {width:250px; margin:50px 40px; border-top:3px
solid red;}
div#inner_div {top:10px; left:20px; background:#AAA;}

Rozdzia 4. Pozycjonowanie elementw

Rysunek 4.24. Dwa zagniedone
akapity. Grna krawd zewntrznego elementu div jest czerwona,
a wewntrzny element div jest
szary. Poniewa wewntrzny div
jest statyczny, wasnoci top i left
s ignorowane

Aby speni wymagania dotyczce

skadni dokumentw, tekst powinien znajdowa si w znaczniku p.
Dla uproszczenia jednak uyem
znacznika div.

Po dokadniejszym przeanalizowaniu tego kodu nasuwa si pytanie:

dlaczego wewntrzny element div nie jest odsunity o 10 pikseli w d
i 20 pikseli w lewo wzgldem zewntrznego elementu div? Zamiast
tego grne lewe rogi obu tych elementw znajduj si w tym samym
punkcie. Powodem jest pozycjonowanie statyczne obu elementw.
Oznacza to, e elementy te wpasowuj si w domylny rozkad elementw na stronie. Poniewa zewntrzny element nie ma adnej treci, element wewntrzny zaczyna si w tym samym miejscu. Wasnoci top,
right, bottom i left dziaaj tylko, jeli element jest pozycjonowany
wzgldnie, bezwzgldnie lub w sposb stay. Zobaczmy, co si stanie,
kiedy zmienimy pozycjonowanie na bezwzgldne (absolute).
div#outer_div {width:250px; margin:50px 40px; border-top:3px
solid red;}
div#inner_div {position:absolute; top:10px; left:20px;
background:#AAA;}

W odniesieniu do czego jest pozycjonowany ten element? Poniewa nie

ma adnego innego elementu pozycjonowanego wzgldnie, element ten
bdzie pozycjonowany bezwzgldnie w odniesieniu do elementu body.
Grna krawd zewntrznego elementu div jest czerwona, dziki
czemu wida, gdzie si znajduje. Marginesy odsuwaj j 50 pikseli
w d i 40 pikseli w prawo wzgldem grnego rogu okna przegldarki. Poniewa wewntrzny element div jest pozycjonowany
bezwzgldnie, jego pooenie jest okrelane w odniesieniu do elementu body, poniewa element body jest domylnym kontekstem
pozycjonowania. Element ten ignoruje swojego rodzica (zewntrzny
element div) i ustawia si zgodnie z wartociami wasnoci top
i left wzgldem elementu body, co wida na rysunku 4.25.

139

140

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Rysunek 4.25. Mimo e wewntrzny element div (szare to)
znajduje si w kodzie XHTML wewntrz zewntrznego elementu
div (z czerwon grn krawdzi),
dziki deklaracji position: absolute
ustawia si wzgldem elementu
body

Sprawnie posugujc si marginesami i dopenieniem, mona w wikszoci przypadkw przy projektowaniu ukadu strony poradzi sobie
tylko za pomoc pozycjonowania
statycznego. Wielu pocztkujcych
uytkownikw CSS zmienia rodzaj
pozycjonowania prawie wszystkich
elementw, przez co trudno jest
im nad nimi potem zapanowa. Nie
naley zmienia domylnego pozycjonowania elementu, jeli nie jest to
absolutnie konieczne.

Jeli teraz zmienimy pozycjonowanie zewntrznego elementu div na

wzgldne (relative), to kontekstem pozycjonowania pozycjonowanego bezwzgldnie wewntrznego elementu div bdzie zewntrzny
div, co wida na rysunku 4.26. Teraz wasnoci top i left wewntrznego elementu div ustawiaj go w odniesieniu do zewntrznego elementu div. Gdybymy obecnie zdefiniowali wasnoci top
i left zewntrznego elementu div na wartoci inne ni zero, wewntrzny element div przesunby si wraz z nim, poniewa to jest
jego kontekst pozycjonowania. Jasne?

Rysunek 4.26. Dziki nadaniu

zewntrznemu elementowi div
pozycjonowania wzgldnego jego
pozycjonowani bezwzgldnie potomkowie s rozmieszczani wzgldem niego zgodnie z wartociami
wasnoci top i left

Teraz przejdziemy do omawiania wasnoci display, a pniej przeanalizujemy praktyczny przykad zastosowania wasnoci position.

Rozdzia 4. Pozycjonowanie elementw

Wasno display
Poza wasnoci position kady element ma take wasno display. Mimo i wasno ta moe przyjmowa kilka wartoci, najczciej uywane s dwie: block i inline. Tym, ktrzy przespali
poprzednie rozdziay, przypominam rnic midzy elementami
blokowymi (block) a liniowymi (inline):
Elementy blokowe, na przykad akapity, nagwki czy listy, ukadaj si jeden nad drugim w oknie przegldarki.
Elementy liniowe, na przykad a, span czy img, ukadaj si jeden
obok drugiego w oknie przegldarki. Przechodz do nowej linii
dopiero wwczas, gdy w aktualnej nie ma dla nich wystarczajco
duo miejsca.
Moliwo zamiany elementw blokowych w liniowe i odwrotnie,
jak poniej:
domylnie element blokowy

p {display:inline;} domylnie element blokowy

domylnie element liniowy

a {display:block} domylnie element liniowy

bywa bardzo przydatna, poniewa pozwala zmusi element liniowy

do tego, aby zapeni zawierajcy go element. Zastosujemy t funkcj
pniej do odnonikw przy tworzeniu rozwijalnych menu.
Jeszcze jedn wartoci wasnoci display, o ktrej warto wspomnie, jest none. Powoduje ona, e element i wszystkie zagniedone
w nim elementy staj si niewidoczne na stronie. Miejsce normalnie
zajmowane przez ten element nie jest wtedy przez niego zajmowane.
Wyglda to tak, jakby kod XHTML tego elementu w ogle nie istnia (jest jeszcze wasno visibility, ktrej warto hidden powoduje, e element jest niewidoczny, ale nadal zajmuje przeznaczone
dla niego miejsce). Dalej nauczymy si przecza wasno display
elementw pomidzy wartociami none i block w odpowiedzi na najechanie na te elementy kursorem myszy lub opuszczenie ich. Dziki
temu bdziemy w stanie utworzy menu rozwijalne. Take jzyk
JavaScript pozwala zmienia warto tej wasnoci w odpowiedzi na
dziaania uytkownika. Zobaczmy przykadow stron wykorzystujc poznane ostatnio wasnoci position i display.

141

142

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Praktyczne uycie wasnoci

position i display
Latem 2007 roku pisaem arkusze stylw dla icyou.com, witryny, na
ktrej mona obejrze filmy wideo dotyczce tematyki zdrowotnej.
Jej wacicielem jest firma, w ktrej pracuj: Benefitfocus.com. Prawie
na kadej stronie tej witryny mona znale zestaw miniatur, ktrych kliknicie powoduje odtworzenie filmu. Aby zaoszczdzi nieco miejsca w oknie przegldarki, opisy filmw zdecydowalimy si
umieci w chmurkach, ktre pojawiaj si po najechaniu na miniatur kursorem (rysunek 4.27).

Rysunek 4.27. Po najechaniu

kursorem na miniatur w witrynie
icyou.com wywietla si chmurka
z informacj o filmie

Oto jak to zrobilimy. Najpierw przedstawiam kod XHTML jednej

miniatury:
<div class=video_selection>
<a href=#><img src=../images/23_diabetes_testimonial1.jpg alt=Blood pressure video /></a>

Rozdzia 4. Pozycjonowanie elementw

<p> Bobby is a #2 Diabetic who weighed 274 pounds. After a
change in diet he is no longer on medication. Runtime: 46
sec.</p>
<h2><a href=#>Living with Diabetes; Bobbys story</a></h2>
</div>

Kod ten pozbawiony regu stylistycznych daje w przegldarce nastpujcy efekt (rysunek 4.28).
Rysunek 4.28. Wszystkie elementy
potrzebne do utworzenia miejsca
na miniatur i zwizan
z ni chmurk

Dodajemy podstawowe style dla powyszego kodu XHTML:

div {width:92px; border:2px solid #069; padding:5px;}
h2, p {font-size:.7em; font-family:Arial, sans-serif;
margin:0;}
p {width:80px; border:1px solid gray; padding:.3em;
background-color:#FFD;}
Rysunek 4.29. Pierwszy krok
to odpowiednie sformatowanie
wygldu i szerokoci elementw

143

144

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Elementowi div, ktry peni funkcj kontenera, ustawilimy obramowanie oraz dodalimy dopenienie, aby odsun tekst od krawdzi (oczywicie zwikszajc rwnoczenie jego pierwotn szeroko). Teraz element ten ma szeroko 106 pikseli (92+2+2+5+5).
Dodatkowo zmienilimy wasnoci czcionki w elementach h2 i p
oraz usunlimy ich domylne marginesy.
Podobnie sformatowalimy akapit, ustawiajc mu dopenienie i obramowanie. Element ten bdzie nasz chmurk.
Teraz zaczyna si zabawa. Wyjmiemy nasz akapit z normalnego
ukadu elementw na stronie, zmieniajc jego wasno position na
absolute. Jednoczenie ustawimy t sam wasno elementu div na
relative, aby sta si kontekstem pozycjonowania akapitu. Naley
pamita, e przodkiem elementu pozycjonowanego bezwzgldnie
musi by element pozycjonowany wzgldnie. W tym przypadku element div jest rodzicem elementu p, a wic wszystko jest w porzdku
(rysunek 4.30).
div {position:relative; width:92px; border:2px solid #069;
padding:5px;}
h2, p {font-size:.7em; font-family:Arial, sans-serif;}
p {position:absolute; left:96px; top:15px; width:80px;
border:1px solid gray; padding:.3em; background-color:#FFD;}
Rysunek 4.30. Teraz bezwzgldnie pozycjonowany element reprezentujcy chmurk znajduje si
wzgldem elementu div w takiej
pozycji, jak chcemy

Wasnoci left i top akapitu przesuny go nieco w prawo i w d,

dziki czemu znajduje si on po prawej stronie obrazka.
Ostatni krok to ukrycie chmurki dopki uytkownik nie najedzie
kursorem na element div. Do

tego celu uyjemy pseudoklasy :hover

(rysunki 4.31a i b).

Rozdzia 4. Pozycjonowanie elementw

div {position:relative; width:92px; border:2px solid #069;
padding:5px;}
h2, p {font-size:.7em; font-family:Arial, sans-serif;
margin:0;}
p {position:absolute; display:none; width:80px; left:96px;
top:15px; border:1px solid gray; padding:.3em; backgroundcolor:#FFD;}
div:hover p, p:hover {display:block;}
Rysunki 4.31a i b. Dziki uyciu
pseudoklasy :hover w poczeniu
z wasnoci display uzyskalimy
efekt chmurki pojawiajcej si
w wyniku najechania kursorem na
obszar zajmowany przez element
div

Teraz akapit z opisem jest ukryty, poniewa jego wasno display

zostaa ustawiona na warto none. Jednak ostatni wiersz wyrnionego kodu mwi: jeli kursor znajdzie si nad elementem div,
wywietl akapit; dodatkowo jeli kursor znajdzie si nad akapitem
(co moe si zdarzy, kiedy uytkownik przesunie kursor z elementu div na akapit), nie ukrywaj tego akapitu. Gdy uytkownik usunie
kursor znad elementu div lub wywietlonego akapitu, regua przestaje dziaa i akapit znika.
W ten sposb utworzylimy prosty efekt chmurki przy uyciu
samego kodu CSS. Jest jednak pewien problem z przegldark
IE 6. Obsuguje ona pseudoklas :hover tylko dla elementu a.

145

146

CSS. Witryny internetowe szyte na miar. Autorytety informatyki

Dlatego aby przegldarka ta dziaaa zgodnie z naszymi oczekiwaniami, musimy doczy plik JavaScript csshover.htc (zobacz ramk
Pseudoklasa :hover w przegldarce IE 6).
body {behavior:url(csshover.htc);}

Naley zauway, e powysza regua przyjmuje, i plik csshover.htc

znajduje si w tym samym folderze co plik XHTML. Zazwyczaj
plik ten umieszcza si w osobnym folderze, razem z innymi plikami
zawierajcymi kod JavaScript doczanymi do strony za pomoc
adresw wzgldnych.
Pseudoklasa :hover w przegldarce IE 6
Przed powstaniem CSS 2 funkcj reagowania na najechanie kursorem miay
tylko odnoniki. Pseudoklasa :hover pozwala na okrelenie zachowania
dowolnego elementu w chwili najechania na niego kursorem. Na przykad
ponisze reguy CSS powoduj, e niebieskie to elementu po najechaniu na
niego kursorem zmieni si w czerwone.
div#respond {background-color:blue;}
div#respond:hover {background-color:red;}
Jest to bardzo przydatna funkcja, ktra stanowi podstaw menu rozwijanych opartych na CSS. Niestety, IE 6 obsuguje t pseudoklas tylko dla elementu a. Na szczcie bystry programista Peter Nederlof wpad na pomys,
jak rozwiza ten problem. Utworzy plik o nazwie csshover.htc, ktry trzeba
doczy do arkusza stylw za pomoc specjalnej wasnoci behavior
(www.xs4all.nl/~peterned/hovercraft.html):
body {font:1em verdana, arial, sans-serif; behavior:
url(css/csshover.htc);}
W tym przypadku, jak wskazuje adres URL podany w regule, utworzyem
nowy folder o nazwie css i w nim umieciem plik csshover.htc. Aby umieci
ten plik w innym miejscu, naley zmodyfikowa odpowiednio adres URL.

Po doczeniu pliku csshover.htc do arkusza stylw przegldarka IE 6

poprawnie obsuguje pseudoklas :hover .
Plik csshover.htc znajduje si wrd
plikw dotyczcych tego rozdziau
na FTP oraz w katalogu Stylib CSS
w folderze JavaScript.

Dziki temu rozdziaowi czytelnik powinien opanowa nastpujce

umiejtnoci:
Tworzenie kolumny z wewntrznym elementem div i zagniedonymi elementami.
Czyszczenie elementw pywajcych (wasno clear).
Pozycjonowanie i wywietlanie elementw za pomoc wasnoci
position i display.
Techniki te s podstaw tworzenia ukadw stron w CSS, co jest
tematem kolejnego rozdziau.