Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00354 006896 11242574 na godz. na dobę w sumie
CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie III - książka
CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie III - książka
Autor: Liczba stron: 528
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-0956-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Autorem książki jest Eric A. Meyer, guru CSS, jeden z najbardziej cenionych specjalistów w dziedzinie projektowania stron WWW. Odkrywa granice możliwości zastosowania CSS-a. Występuje na wielu konferencjach poświęconych standardom internetowym, zastosowaniu CSS oraz projektowaniu witryn.


Kompendium wiedzy o kaskadowych arkuszach stylów

Kaskadowe arkusze stylów (CSS), to technologia, która zrewolucjonizowała proces tworzenia witryn internetowych. Projektanci stron WWW dostali do ręki potężne narzędzie pozwalające na definiowanie wyglądu tekstu, tabel, ramek, łączy i innych elementów dokumentu za pomocą prostych parametrów zamieszczonych w odrębnym pliku lub wydzielonym miejscu kodu strony. Dzięki arkuszom stylów możliwe jest całkowite rozdzielenie procesu edycji treści strony od określania jej aspektów typograficznych i kolorystycznych, co niezwykle ułatwia dostosowanie serwisu WWW do przeglądania na różnych urządzeniach -- monitorach komputerów, wyświetlaczach telefonów komórkowych i terminali Blackberry.

Książka 'CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie III' to kompleksowe źródło informacji o wszystkich aspektach stosowania kaskadowych arkuszy stylów zgodnie z najnowszymi specyfikacjami konsorcjum W3C -- CSS2 oraz CSS2.1. Czytając ją, dowiesz się, jak definiować style dla tekstu, formatować tabele i tworzyć funkcjonalne interfejsy użytkownika. Poznasz różnice pomiędzy elementami pływającymi i pozycjonowanymi, zasady stosowania jednostek miar w definicjach stylów oraz metody przystosowywania treści i układu strony do druku czy odczytywania przez oprogramowanie ułatwiające korzystanie z sieci osobom niepełnosprawnym. Znajdziesz tu także informacje o tym, które elementy specyfikacji CSS są obsługiwane przez przeglądarki obecne dziś na rynku.

Wykorzystaj doświadczenie Erica Meyera
i poznaj wszystkie aspekty stosowania CSS.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

CSS. Kaskadowe arkusze styl(cid:243)w. Przewodnik encyklopedyczny. Wydanie III Autor: Eric A. Meyer T‡umaczenie: Anna Trojan ISBN: 978-83-246-0956-7 Tytu‡ orygina‡u: CSS: The Definitive Guide Format: B5, stron: 528 Kompendium wiedzy o kaskadowych arkuszach styl(cid:243)w (cid:149) Opis struktury arkusza styl(cid:243)w (cid:149) Sposoby definiowania charakterystyk czcionek (cid:149) Tworzenie efektownych interfejs(cid:243)w u¿ytkownika (cid:149) Pozycjonowanie element(cid:243)w Kaskadowe arkusze styl(cid:243)w (CSS), to technologia, kt(cid:243)ra zrewolucjonizowa‡a proces tworzenia witryn internetowych. Projektanci stron WWW dostali do rŒki potŒ¿ne narzŒdzie pozwalaj„ce na definiowanie wygl„du tekstu, tabel, ramek, ‡„czy i innych element(cid:243)w dokumentu za pomoc„ prostych parametr(cid:243)w zamieszczonych w odrŒbnym pliku lub wydzielonym miejscu kodu strony. DziŒki arkuszom styl(cid:243)w mo¿liwe jest ca‡kowite rozdzielenie procesu edycji tre(cid:156)ci strony od okre(cid:156)lania jej aspekt(cid:243)w typograficznych i kolorystycznych, co niezwykle u‡atwia dostosowanie serwisu WWW do przegl„dania na r(cid:243)¿nych urz„dzeniach (cid:150) monitorach komputer(cid:243)w, wy(cid:156)wietlaczach telefon(cid:243)w kom(cid:243)rkowych i terminali Blackberry. Ksi„¿ka (cid:132)CSS. Kaskadowe arkusze styl(cid:243)w. Przewodnik encyklopedyczny. Wydanie III(cid:148) to kompleksowe (cid:159)r(cid:243)d‡o informacji o wszystkich aspektach stosowania kaskadowych arkuszy styl(cid:243)w zgodnie z najnowszymi specyfikacjami konsorcjum W3C (cid:150) CSS2 oraz CSS2.1. Czytaj„c j„, dowiesz siŒ, jak definiowa(cid:230) style dla tekstu, formatowa(cid:230) tabele i tworzy(cid:230) funkcjonalne interfejsy u¿ytkownika. Poznasz r(cid:243)¿nice pomiŒdzy elementami p‡ywaj„cymi i pozycjonowanymi, zasady stosowania jednostek miar w definicjach styl(cid:243)w oraz metody przystosowywania tre(cid:156)ci i uk‡adu strony do druku czy odczytywania przez oprogramowanie u‡atwiaj„ce korzystanie z sieci osobom niepe‡nosprawnym. Znajdziesz tu tak¿e informacje o tym, kt(cid:243)re elementy specyfikacji CSS s„ obs‡ugiwane przez przegl„darki obecne dzi(cid:156) na rynku. (cid:149) £„czenie styl(cid:243)w z dokumentami XHTML (cid:149) Stosowanie selektor(cid:243)w (cid:149) Struktura definicji styl(cid:243)w (cid:149) Jednostki miary stosowane w definicjach styl(cid:243)w (cid:149) Korzystanie z r(cid:243)¿nych kroj(cid:243)w czcionek (cid:149) Formatowanie tekstu (cid:149) Marginesy i obramowania (cid:149) Kolory (cid:149) Pozycjonowanie element(cid:243)w (cid:149) Korzystanie z tabel (cid:149) Definiowanie styl(cid:243)w dla medi(cid:243)w nieekranowych Wykorzystaj do(cid:156)wiadczenie Erica Meyera i poznaj wszystkie aspekty stosowania CSS Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści Przedmowa ....................................................................................................................9 1. CSS i dokumenty .......................................................................................................... 15 15 17 21 25 35 Upadek Internetu CSS przychodzi na ratunek Elementy Łączenie CSS i XHTML Podsumowanie 2. Selektory ......................................................................................................................37 37 41 45 51 56 63 72 Podstawowe reguły Grupowanie Selektory klas oraz identyfikatorów Selektory atrybutów Wykorzystywanie struktury dokumentu Pseudoklasy oraz pseudoelementy Podsumowanie 3. Struktura oraz kaskada ...............................................................................................73 73 78 81 86 Specyficzność Dziedziczenie Kaskada Podsumowanie 4. Wartości oraz jednostki ...............................................................................................87 87 87 88 93 99 Wartości liczbowe Wartości procentowe Kolory Jednostki długości Adresy URL 5 Jednostki CSS2 Podsumowanie 101 102 5. Czcionki ...................................................................................................................... 103 104 108 114 121 125 127 132 134 Rodziny czcionek Waga czcionki Rozmiar czcionki Style i warianty Rozciąganie i dostosowywanie czcionki Właściwość font Dobieranie czcionek Podsumowanie 6. Właściwości tekstu .....................................................................................................137 137 142 151 154 156 160 161 163 165 Wcięcia oraz wyrównanie poziome Wyrównanie w pionie Odstępy pomiędzy słowami oraz literami Transformacja tekstu Dekoracja tekstu Cień tekstu Obsługa białych znaków Kierunek tekstu Podsumowanie 7. Podstawowe formatowanie wizualne ..................................................................... 167 167 170 188 207 214 Podstawowe pojemniki Elementy blokowe Elementy wewnętrzne Zmiana wyświetlania elementu Podsumowanie 8. Dopełnienie, obramowanie oraz marginesy ............................................................ 215 215 219 231 245 251 Podstawowe pojemniki elementów Marginesy Obramowanie Dopełnienie Podsumowanie 9. Kolory i tła ..................................................................................................................253 253 254 260 287 Kolory Kolory pierwszego planu Tło Podsumowanie 6 | Spis treści 10. Pływanie oraz pozycjonowanie ................................................................................289 289 307 342 Pływanie Pozycjonowanie Podsumowanie 11. Układ tabel .................................................................................................................343 343 355 363 372 Formatowanie tabel Obramowanie komórek tabeli Rozmiar tabeli Podsumowanie 12. Listy oraz zawartość generowana ............................................................................373 373 381 395 Listy Zawartość generowana Podsumowanie 13. Style interfejsu użytkownika ....................................................................................397 397 402 406 412 Czcionki oraz kolory systemowe Kursory Obrysy Podsumowanie 14. Media nieekranowe ................................................................................................... 413 413 414 431 448 Przydzielanie arkuszy stylów dla określonego medium Media stronicowe Style dźwiękowe Podsumowanie A Przewodnik po właściwościach ............................................................................... 449 B Selektory, pseudoklasy oraz pseudoelementy .........................................................493 C Przykładowy arkusz stylów HTML 4 ......................................................................... 501 Skorowidz .................................................................................................................505 Spis treści | 7 ROZDZIAŁ 10. Pływanie oraz pozycjonowanie CSS rzeczywiście umożliwia atrakcyjny wygląd zawartości dokumentu dzięki zmianom czcio- nek, tła i pozostałych elementów, jednak jak można osiągnąć podstawowe możliwości wpły- wające na układ elementów? Dzieje się to dzięki pływaniu (ang. floating) oraz pozycjonowaniu (ang. positioning). Są to narzędzia, które pozwalają uzyskać układ kolumnowy, nakładać jeden fragment dokumentu na drugi i, ogólnie mówiąc, otrzymać wszystko to, do czego przez długie lata wykorzystywane były ogromne ilości tabel. Idea przyświecająca pozycjonowaniu jest względnie prosta. Pozycjonowanie pozwala dokładnie określić, w którym miejscu powinien znajdować się pojemnik elementu w stosunku do miej- sca, w jakim normalnie by się pojawił — lub w stosunku do elementu rodzica, innego ele- mentu albo nawet względem samego okna przeglądarki. Możliwości tej cechy są jednocześnie i oczywiste, i zaskakujące. Nie będzie zaskakującą wiadomością to, że przeglądarki imple- mentują ten element CSS2 o wiele lepiej od innych. Z kolei pływanie pojawiło się już w CSS1 — w oparciu o możliwość dodaną przez Netscape we wczesnych latach istnienia Internetu. Pływanie nie jest dokładnie pozycjonowaniem, jednak z pewnością nie należy również do standardowego, normalnego układu. W dalszej części ni- niejszego rozdziału zostanie wytłumaczone, na czym ono dokładnie polega. Pływanie Koncepcja elementów pływających (ang. floated elements) jest z pewnością znana. Już od czasu Netscape 1 możliwe było zadeklarowanie — na przykład — img src= b5.gif align= right w celu uzyskania pływających obrazków. Powodowało to, że obrazek „spływał” na prawą stronę i pozwalał na to, by inna treść (taka jak tekst) „opływała” go. Nazwa „pływanie” po- chodzi zresztą z dokumentu Extensions to HTML 2.0, w którym napisano: Dodatki do opcji ALIGN wymagają dużej dozy wyjaśnień. Na początek — wartości „left” oraz „right”. Obrazki z takim wyrównaniem stanowią zupełnie nowy, pływający typ obrazków. W przeszłości możliwe było jedynie uzyskanie pływających obrazków oraz w niektórych przeglądarkach również tabel. CSS z kolei pozwala na to w przypadku dowolnego elementu, od obrazków i akapitów aż po listy. W CSS takie zachowanie można uzyskać dzięki właści- wości float. 289 float left | right | none | inherit Wartości: Wartość początkowa: none Stosuje się do: Dziedziczona: Wartość wyliczona: Wszystkich elementów Nie Jak określono Żeby na przykład uzyskać obrazek pływający do lewa, można wykorzystać poniższy kod: img src= b4.gif style= float: left; alt= b4 Jak wyraźnie widać na rysunku 10.1, obrazek „spływa” do lewej strony okna przeglądarki, natomiast tekst go opływa. Dokładnie tego można się było spodziewać. Rysunek 10.1. Pływający obrazek W przypadku elementów pływających w CSS pojawiają się pewne interesujące kwestie. Elementy pływające Kiedy ma się do czynienia z elementami pływającymi, należy pamiętać o kilku sprawach. Po pierwsze, element pływający jest w pewnym sensie wyłączany z normalnego układu doku- mentu, choć nadal na niego wpływa. W sposób całkowicie unikalny dla CSS elementy pły- wające istnieją jakby na swojej własnej płaszczyźnie, jednak w dalszym ciągu wpływają na resztę dokumentu. Ten wpływ bierze się z faktu, iż kiedy element jest pływający, pozostała treść dokumentu opływa go. Jest to zachowanie znane z pływających obrazków, jednak tak samo dzieje się na przykład w przypadku pływającego akapitu. Na rysunku 10.2 widać ten efekt dość wyraźnie dzięki marginesowi dodanemu do pływającego akapitu: p.aside {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em; border: 1px solid;} Jedną z pierwszych interesujących kwestii, na które warto zwrócić uwagę, jest fakt, iż margi- nesy wokół elementów pływających nie ulegają składaniu. Jeśli elementem pływającym jest obrazek z marginesami o wartości dwudziestu pikseli, wokół tego obrazka znajdzie się pusta przestrzeń o szerokości co najmniej dwudziestu pikseli. Jeśli inne elementy przylegające do tego obrazka — zarówno w poziomie, jak i w pionie — również mają marginesy, te marginesy nie będą się składać z marginesami pływającego obrazka, jak widać na rysunku 10.3: p img {float: left; margin: 25px;} 290 | Rozdział 10. Pływanie oraz pozycjonowanie Rysunek 10.2. Pływający akapit Rysunek 10.3. Pływające obrazki z marginesami Wracając do analogii z papierem i plastikiem z rozdziału 7. — plastikowe marginesy wokół obrazka nigdy nie będą się nakładać na plastik otaczający inne elementy pływające. Jeśli element pływający jest elementem niezastępowanym, należy zadeklarować wartość jego właściwości width. W przeciwnym razie, zgodnie ze specyfikacją CSS, szerokość tego ele- mentu będzie dążyła do zera. W ten sposób szerokość pływającego akapitu może wynosić dosłownie jeden znak — przy założeniu, że jest to minimalna wartość właściwości width w in- terpretacji przeglądarki. Jeśli nie zadeklaruje się wartości width dla elementów pływających, można otrzymać coś podobnego do efektu zaprezentowanego na rysunku 10.4 (jest to fak- tycznie mało prawdopodobne, ale jednak możliwe). Brak pływania Istnieje jeszcze jedna wartość właściwości float poza left oraz right. Wartość float: none wykorzystywana jest do wykluczenia możliwości pływania dla danego elementu. Pływanie | 291 Rysunek 10.4. Pływający tekst bez jawnie zadeklarowanej szerokości Może się to wydawać nieco niedorzeczne, skoro najprostszym sposobem wykluczenia moż- liwości pływania wydaje się po prostu uniknięcie deklarowania właściwości float, prawda? Cóż, przede wszystkim domyślną wartością właściwości float jest none. Innymi słowy, wartość ta musi istnieć, żeby możliwe było normalne, niepływające zachowanie. Bez niej wszystkie elementy musiałyby w jakiś sposób pływać. Po drugie, można chcieć nadpisać pewien styl z importowanego arkusza stylów. Można sobie wyobrazić, że dla całego serwera wykorzystuje się jeden arkusz stylów, w którym obrazki są pływające. Na jednej wybranej stronie nie chce się jednak, by obrazki były pływające. Zamiast pisać zupełnie nowy arkusz stylów, wystarczy umieścić regułę img {float: none;} w osa- dzonym arkuszu stylów dokumentu. Poza tymi okolicznościami nie istnieje jednak raczej inne zastosowanie dla deklarowania float: none. Pływanie — szczegóły Przed przejściem do szczegółów związanych z pływaniem warto wyjaśnić koncepcję bloku zawierającego element (ang. containing block). Blokiem zawierającym element pływający jest najbliższy element blokowy będący przodkiem tego elementu. Dlatego też w poniższym frag- mencie kodu blokiem zawierającym element pływający jest element akapitu, który go zawiera: h1 Test /h1 p To jest tekst akapitu, co widać wyraźnie. Wewnątrz zawartości tego akapitu znajduje się pływający obrazek. img src= testy.gif style= float: right; Blokiem zawierającym pływający obrazek jest akapit. /p Do koncepcji bloków zawierających element wraca się w dalszej części niniejszego rozdziału, poświęconej pozycjonowaniu. Elementy pływające generują ponadto pojemnik blokowy bez względu na typ samego ele- mentu. Jeśli więc odnośnikowi (traktowanemu zazwyczaj jako element wewnętrzny i tworzą- cemu pojemnik wewnętrzny) przypisze się wartość właściwości float, to jako element pły- wający wygeneruje on pojemnik blokowy. Jego układ i zachowanie będą podobne do — na przykład — elementu div. Nierzadko spotyka się deklarowanie display: block dla ele- mentu pływającego, jednak nie jest to konieczne. 292 | Rozdział 10. Pływanie oraz pozycjonowanie Umieszczeniem elementu pływającego rządzi pewien zbiór ścisłych zasad, które warto omó- wić przed przejściem do konkretnych przykładów zachowań. Są one nieco podobne do za- sad, które zajmują się wyliczaniem marginesów i szerokości, gdyż mają ten sam zdroworoz- sądkowy punkt wyjścia. A zasady są następujące: 1. Lewy (lub prawy) zewnętrzny brzeg elementu pływającego nie może znajdować się po lewej (lub prawej) stronie wewnętrznego brzegu elementu rodzica. Jest to wystarczająco proste. Wysunięta najdalej w lewo pozycja, w jakiej może zostać umieszczony lewy zewnętrzny brzeg pływającego po lewej stronie elementu, znajduje się na wewnętrznym lewym brzegu elementu rodzica; podobnie wysunięta najdalej w pra- wo pozycja, w której może zostać umieszczony prawy zewnętrzny brzeg pływającego po prawej stronie elementu, znajduje się na wewnętrznym prawym brzegu elementu rodzi- ca. Przedstawiono to na rysunku 10.5. Na tym i na następnych rysunkach liczby w kół- kach pokazują pozycję, w której faktycznie znajduje się element kodu względem źródła, natomiast ponumerowane prostokąty pokazują widziane pozycje oraz rozmiary elemen- tów pływających. Rysunek 10.5. Pływanie do lewa (bądź prawa) 2. Lewy (lub prawy) zewnętrzny brzeg elementu pływającego musi znajdować się po pra- wej (lewej) stronie prawego (lewego) zewnętrznego brzegu pływającego z lewej (prawej) elementu, który pojawia się wcześniej w źródle dokumentu, chyba że górny brzeg później- szego elementu znajduje się poniżej dolnego brzegu pierwszego. Zasada ta zapobiega zachodzeniu pływających elementów na siebie. Jeśli element ma pływać po lewej stronie, ale znajduje się tam już inny pływający element ze względu na jego wcześniejsze umieszczenie w źródle dokumentu, to późniejszy element umieszczany jest obok zewnętrznego prawego brzegu wcześniejszego elementu pływającego. Jeśli jednak góra pływającego elementu znajduje się poniżej dołu wcześniejszego elementu pływają- cego, to może on płynąć aż do wewnętrznego lewego brzegu elementu rodzica. Przykłady tego zachowania pokazane są na rysunku 10.6. Pływanie | 293 Rysunek 10.6. Zapobieganie nakładaniu się elementów pływających Istnieje pewna zaleta tej zasady — skoro nie trzeba martwić się o przysłanianie jednego pływającego elementu drugim, to można mieć pewność, że wszystkie pływające ele- menty dokumentu będą widoczne. Dzięki temu pływanie jest dosyć bezpiecznym efek- tem. Sytuacja jest wyraźnie inna niż przy zastosowaniu pozycjonowania, w którym bardzo łatwo spowodować zasłonięcie jednego elementu drugim. 3. Prawy zewnętrzny brzeg pływającego z lewej elementu nie może znajdować się po pra- wej stronie lewego zewnętrznego brzegu żadnego pływającego w prawo elementu, który umieszczony jest po jego prawej stronie. Lewy zewnętrzny brzeg pływającego z prawej elementu nie może znajdować się po lewej stronie prawego zewnętrznego brzegu żadnego pływającego w lewo elementu umieszczonego z jego lewej strony. Zasada ta zapobiega zachodzeniu pływających elementów na siebie. Załóżmy, że element body ma pięćset pikseli szerokości, a jego jedyną zawartością są dwa obrazki o szerokości trzystu pikseli. Pierwszy pływa z lewej, drugi z prawej strony. Powyższa zasada unie- możliwi drugiemu obrazkowi zasłonięcie stu pikseli pierwszego obrazka. Drugi obrazek zostanie zepchnięty w dół tak, że jego górny brzeg znajdzie się poniżej dołu pływającego z lewej strony obrazka, jak przedstawiono na rysunku 10.7. Rysunek 10.7. Dalsze zapobieganie nakładaniu się elementów pływających 294 | Rozdział 10. Pływanie oraz pozycjonowanie 4. Górny brzeg elementu pływającego nie może znajdować się wyżej niż wewnętrzny górny brzeg rodzica. Jeśli element pływający znajduje się pomiędzy dwoma składającymi się marginesami, umieszczany jest w taki sposób, jakby posiadał on element blokowy rodzi- ca znajdujący się pomiędzy tymi dwoma elementami. Pierwsza część tej zasady jest stosunkowo prosta i powstrzymuje elementy pływające przed przedostaniem się na samą górę dokumentu. Poprawne zachowanie przedstawione jest na rysunku 10.8. Druga część tej zasady dostosowuje wyrównanie w sytuacjach, w których na przykład środkowy z trzech akapitów jest pływający. W takim przypadku akapit pływający pływa tak, jakby miał on rodzica będącego elementem blokowym (takim jak div). Zapobiega to przesuwaniu się pływającego akapitu na górę elementu rodzica, który dzielą ze sobą wszystkie trzy akapity. Rysunek 10.8. W przeciwieństwie do balonów elementy pływające nie mogą odpłynąć do góry 5. Górny brzeg elementu pływającego nie może znaleźć się wyżej niż górny brzeg innego wcześniejszego elementu pływającego lub blokowego. Podobnie jak w przypadku zasady 4., pozwala to uniknąć wypłynięcia elementów pływają- cych na samą górę elementów rodziców. Jest także niemożliwe, aby górny brzeg elementu pływającego znalazł się powyżej górnego brzegu elementu pływającego, który w kodzie źródłowym dokumentu pojawił się wcześniej. Rysunek 10.9 jest tego przykładem; widać na nim, że ponieważ drugi element pływający został zmuszony do przesunięcia się poniżej pierwszego, góra trzeciego elementu pływającego jest równa z górą drugiego elementu, a nie pierwszego. 6. Górny brzeg elementu pływającego nie może być wyświetlony wyżej niż góra jakiego- kolwiek pojemnika wiersza zawierającego pojemnik wygenerowany przez element, który poprzedza element pływający w źródle dokumentu. Podobnie jak zasady 4. i 5., zasada ta dalej ogranicza wypływanie elementu w górę po- przez uniemożliwienie wyświetlenia go powyżej górnego brzegu wiersza zawierającego treść poprzedzającą element pływający. Powiedzmy, że w samym środku akapitu znaj- duje się pływający obrazek. Najwyższe miejsce, w którym może się znaleźć górny brzeg tego obrazka, to góra pojemnika wiersza, z którego wywodzi się obrazek. Jak widać na rysunku 10.10, powstrzyma to obrazek przed uniesieniem się zbyt wysoko. Pływanie | 295 Rysunek 10.9. Utrzymywanie elementów pływających poniżej ich poprzedników Rysunek 10.10. Utrzymanie elementów pływających na wysokości ich otoczenia 7. Element pływający z lewej (prawej) strony mający inny pływający element po swojej lewej (prawej) stronie nie może mieć swojego prawego (lewego) zewnętrznego brzegu po pra- wej (lewej) stronie prawego (lewego) brzegu zawierającego go bloku. Innymi słowy — element pływający nie może wystawać poza brzeg elementu go zawie- rającego, chyba że sam jest zbyt szeroki. Zapobiega to sytuacji, w której seria następują- cych po sobie elementów pływających mogłaby się pojawić w jednej linii poziomej i wy- chodziłaby zbyt daleko poza brzegi bloku je zawierającego. Zamiast tego — jeśli element pływający miałby wystawać poza zawierający go blok przez to, że występuje obok in- nych elementów — zostanie przesunięty niżej (pod poprzednie elementy pływające), jak przedstawia to rysunek 10.11 (na którym elementy pływające zaczynają się w następnym wierszu w celu wyraźniejszego zilustrowania działania zasady). Zasada pojawiła się po raz pierwszy w CSS2 i zniwelowała niedociągnięcia z CSS1. 296 | Rozdział 10. Pływanie oraz pozycjonowanie Rysunek 10.11. Jeśli nie ma miejsca, elementy pływające spychane są do nowego „wiersza” 8. Element pływający musi zostać umieszczony najwyżej jak to tylko możliwe. Zasada ta podlega oczywiście ograniczeniom przedstawionym w poprzednich siedmiu zasadach. Historycznie rzecz biorąc, przeglądarki wyrównywały górę elementu pływają- cego z górą pojemnika wiersza znajdującego się za tym, w którym pojawiał się znacznik elementu. Jednak zasada 8. sugeruje, że jego górny brzeg powinien być na równi z górą pojemnika tego wiersza, w którym znajduje się jego znacznik (przy założeniu, że jest wy- starczająco dużo miejsca na wykonanie takiej operacji). Teoretycznie poprawne zacho- wania pokazane zostały na rysunku 10.12. Rysunek 10.12. Uwzględniając pozostałe ograniczenia, należy umieścić element pływający tak wysoko, jak jest to możliwe Jako że nie ma precyzyjnej definicji określenia „najwyżej, jak to jest możliwe” (co mogłoby oznaczać „najwyżej, jak jest to dogodnie możliwe”), nie można polegać na konsekwentnym zachowaniu przeglądarek (nawet uważanych za zgodne z CSS). Niektóre przeglądarki będą stosować się do historycznego zwyczaju i wyświetlać pływający obrazek w następnym wierszu, podczas gdy inne wyświetlą go w danym wierszu, jeśli tylko będzie na to miejsce. Pływanie | 297 9. Pływający z lewej element musi być umieszczony najbardziej z lewej strony jak tylko to możliwe, a pływający z prawej element — najbardziej z prawej strony jak tylko to możliwe. Preferowane jest raczej przesunięcie w górę niż przesunięcie w lewo lub prawo. Również ta zasada podlega ograniczeniom wynikającym z poprzednich zasad. Istnieją podobne zastrzeżenia, jak w przypadku zasady 8., chociaż nie są one tak mętne. Jak wi- dać na rysunku 10.13, stosunkowo łatwo można określić, czy element posunął się najdalej, jak to było możliwe, w lewo lub w prawo. Rysunek 10.13. Uwzględniając pozostałe ograniczenia, należy umieścić element pływający tak wysoko, jak jest to możliwe Rzeczywiste zachowanie Z powyższych zasad wynika kilka ciekawych konsekwencji, które wiążą się z tym, co mówią oraz czego nie dopowiadają owe zasady. Najpierw należy powiedzieć, co dzieje się, gdy ele- ment pływający jest wyższy od elementu rodzica. Właściwie zdarza się tak dość często. Weźmy za przykład dokument składający się z nie więcej niż kilku akapitów i elementów h3, w którym pierwszy akapit zawiera pływający obrazek. Dalej okazuje się, że pływający obrazek ma margines wielkości pięciu pikseli (5px). Można się spodziewać, że dokument zostanie wyświetlony tak, jak na rysunku 10.14. Nie ma w tym oczywiście nic niezwykłego, ale rysunek 10.15 pokazuje, co się dzieje, jeśli do pierwszego akapitu doda się tło. Drugi przykład nie różni się od pierwszego niczym innym niż to, że widoczne jest tło. Jak widać, element pływający wystaje poza dolny brzeg elementu rodzica. Oczywiście tak samo wystawał w pierwszym przykładzie, ale ponieważ nie widać było tła, nie było to aż takie oczywiste. Omówione wcześniej reguły pływania dotyczą jedynie lewych, prawych oraz gór- nych brzegów elementów pływających i ich rodziców. Zamierzone pominięcie dolnych brzegów w zasadach pływania wiąże się z zachowaniem przedstawionym na rysunku 10.15. 298 | Rozdział 10. Pływanie oraz pozycjonowanie Rysunek 10.14. Oczekiwane zachowanie pływania Rysunek 10.15. Tło a elementy pływające W praktyce niektóre przeglądarki nie zachowują się poprawnie i zwiększają wysokość elementu rodzica tak, by zmieścił się w nim element pływający (nawet jeśli spowoduje to wyświetlenie olbrzymiej ilości pustej przestrzeni wewnątrz elementu rodzica). Specyfikacja CSS2.1 wyjaśniła jeden z aspektów zachowania elementów pływających: element pływający rozszerza się tak, by zmieścić wszystkie pływające elementy będące jego potomkami. W poprzednich wersjach specyfikacji CSS nie było jasne, co powinno się stać w takiej sytuacji. Pływanie | 299 W ten sposób można umieścić element pływający wewnątrz jego elementu rodzica poprzez uczynienie rodzica pływającym, jak w poniższym przykładzie: div style= float: left; width: 100 ; img src= hay.gif style= float: left; Element div będzie się rozszerzał wokół elementu pływającego, ponieważ sam jest elementem pływającym. /div Pokrewnym tematem jest zagadnienie dotyczące tła i jego związku z elementami pływający- mi, które pojawiają się wcześniej w strukturze dokumentu. Zostało to zobrazowane na ry- sunku 10.16. Rysunek 10.16. Tło elementów „wślizguje się” pod elementy pływające Ponieważ element pływający znajduje się jednocześnie w układzie zawartości dokumentu i poza nim, takie rzeczy muszą się zdarzać. Co się dzieje? Zawartość nagłówka jest „wypierana” przez element pływający. Szerokość elementu nagłówka pozostaje jednak równa szerokości elementu rodzica, dlatego obszar zawartości elementu rozciąga się na całą szerokość obszaru rodzica (a z nim także i tło). By uniknąć zasłonięcia przez element pływający, rzeczywista zawartość elementu nie płynie przez całą szerokość swojego obszaru zawartości. Marginesy ujemne Marginesy ujemne mogą spowodować, że element pływający zostanie wysunięty poza obszar elementu rodzica. Wydaje się, że jest to sprzeczne z wyjaśnionymi wcześniej zasadami, ale tak nie jest. W taki sam sposób, w jaki elementy mogą przy użyciu marginesów ujemnych okazać się szersze od swoich rodziców, elementy pływające mogą wystawać na zewnątrz ob- szaru rodziców. Raz jeszcze można rozważyć przypadek obrazka pływającego z lewej strony, który ma górny i lewy margines o wartości -15px. Obrazek umieszczony jest wewnątrz elementu div, który nie posiada dopełnienia, obramowania ani marginesów. Rezultat zaprezentowano na rysunku 10.17. 300 | Rozdział 10. Pływanie oraz pozycjonowanie Rysunek 10.17. Pływanie z marginesami ujemnymi Wbrew pozorom z technicznego punktu widzenia nie narusza to ograniczeń związanych z umiesz- czeniem elementów pływających poza obszarem elementu rodzica. Dokładne wczytanie się w zasady wymienione w poprzednim podrozdziale pozwoli odkryć, skąd bierze się takie zachowanie: zewnętrzne brzegi elementu pływającego muszą znajdować się wewnątrz elementu rodzica. Jednak marginesy ujemne mogą przemieścić zawartość ele- mentu pływającego w taki sposób, że zachodzić ona będzie na jego zewnętrzny brzeg, jak przedstawiono to na rysunku 10.18. Rysunek 10.18. Szczegóły pływania do góry i w lewo dzięki marginesom ujemnym Rachunki w tej sytuacji wyglądają następująco: załóżmy, że górny wewnętrzny brzeg elementu div znajduje się w pozycji stu pikseli. Przeglądarka — aby dowiedzieć się, gdzie powinien znajdować się górny wewnętrzny brzeg elementu pływającego — wykona następujące obli- czenia: 100px + (-15px) marginesu + 0 dopełnienia = 85px. Zatem górny wewnętrzny brzeg pływającego elementu powinien znajdować się w pozycji osiemdziesięciu pięciu pikseli. Pływanie | 301 Pomimo że znajduje się ona powyżej górnego wewnętrznego brzegu rodzica elementu, matema- tyka rozwiązuje to tak, że reguły specyfikacji nie zostają naruszone. Podobny sposób rozu- mowania wyjaśnia, w jaki sposób lewy wewnętrzny brzeg elementu pływającego może zo- stać umieszczony na lewo od lewego wewnętrznego brzegu rodzica. W tej chwili wiele osób może mieć nieodpartą ochotę, żeby krzyknąć: „Faul!”. Osobiście nie obwiniam ich za to. Przyzwolenie na umieszczenie górnego brzegu wewnętrznego nad górnym brzegiem zewnętrznym wydaje się całkowicie błędne, ale przy ujemnym górnym marginesie jest dokładnie tym, co się otrzymuje. Używając marginesów ujemnych dla normalnych ele- mentów niepływających, można sprawić, że będą one wizualnie szersze niż ich przodkowie. To samo sprawdza się w przypadku wszystkich czterech boków pojemnika elementu pły- wającego. Wystarczy, że ustawi się ujemną wartość marginesów, a zawartość wysunie się poza zewnętrzny brzeg, formalnie nie naruszając przy tym specyfikacji. W tym miejscu pojawia się jedno ważne pytanie — co się stanie z wyglądem dokumentu, je- śli dzięki użyciu marginesów ujemnych element wypłynie poza obszar elementu rodzica? Obrazek może na przykład wypłynąć tak daleko, że przykryje akapit, który został już wcze- śniej wyświetlony przez przeglądarkę. W takim przypadku to od przeglądarki zależy, czy dokument zostanie ponownie przerysowany. Specyfikacje CSS1 oraz CSS2 wyraźnie stwier- dzają, że przeglądarki nie muszą przystosowywać wyświetlonej wcześniej zawartości do tego, co później dzieje się w dokumencie. Innymi słowy — jeśli obrazek wpłynie na obszar poprzed- niego akapitu, to może po prostu zasłonić to, co już się tam znajduje. Z drugiej strony prze- glądarka może inaczej rozwiązać taki problem (na przykład poprzez „oblanie” elementu za- wartością, mimo że takie zachowanie nie jest wymagane). Raczej nie należy liczyć na szczególne zachowanie przeglądarki, co sprawia, że przy pływaniu przydatność marginesów ujemnych jest ograniczona. Zawieszone (czyli wysunięte poza obrys akapitu) elementy pływające są prawdopodobnie stosunkowo bezpieczne, ale próby wypchnięcia elementu w górę strony są, ogólnie rzecz biorąc, złym pomysłem. Istnieje jeszcze jeden sposób, w jaki element pływający może przekroczyć wewnętrzny lewy lub prawy brzeg elementu rodzica — dzieje się tak wtedy, gdy element pływający jest szerszy niż rodzic. W takim przypadku element pływający— aby jak najlepiej wyświetlić swoją zawar- tość — po prostu będzie wystawał poza prawy lub lewy wewnętrzny brzeg (w zależności od tego, z której strony pływa). Doprowadzi to do rezultatu przedstawionego na rysunku 10.19. Rysunek 10.19. Element pływający, który jest szerszy od swojego rodzica 302 | Rozdział 10. Pływanie oraz pozycjonowanie Pływanie, zawartość i nakładanie się Jeszcze bardziej interesującą kwestią jest to, co się stanie, kiedy element pływający nałoży się na zawartość w normalnym układzie dokumentu. Może się tak zdarzyć na przykład wtedy, gdy element pływający ma ujemny margines po stronie, którą opływa zawartość (czyli na przykład w przypadku ujemnego marginesu lewego w elemencie pływającym z prawej). Po- kazane zostało już, co stanie się w przypadku obramowania oraz tła elementów blokowych. Jednak co z elementami wewnętrznymi? Ze specyfikacji CSS1 oraz CSS2 nie wynika zbyt jasno, co w takim przypadku będzie zachowa- niem oczekiwanym. Specyfikacja CSS2.1 wyjaśniła to zagadnienie za pomocą następujących reguł: • Obramowanie, tło oraz zawartość pojemnika wewnętrznego, który nakłada się na ele- ment pływający, wyświetlane są „na wierzchu” elementu pływającego. • Obramowanie oraz tło pojemnika blokowego, który nakłada się na element pływający, wyświetlane są „pod” elementem pływającym, natomiast jego zawartość wyświetlana jest „na wierzchu” tego elementu. W celu zilustrowania tych reguł można rozważyć następującą sytuację: img src= testy.gif class= sideline p class= box This paragraph, unremarkable in most ways, does contain an inline element. This inline contains some strong strongly emphasized text, which is so marked to make an important point /strong . The rest of the element s content is normal anonymous inline content. /p p This is a second paragraph. There s nothing remarkable about it, really. Please move along. /p h2 id= jump-up A Heading! /h2 Kiedy do powyższego kodu zastosuje się poniższe style, otrzyma się rezultat widoczny na rysunku 10.20: img.sideline {float: left; margin: 10px -15px 10px 10px;} p.box {border: 1px solid gray; padding: 0.5em;} p.box strong {border: 3px double black; background: silver; padding: 2px;} h2#jump-up {margin-top: -15px; background: silver;} Rysunek 10.20. Zachowanie układu dokumentu przy nakładających się elementach pływających Element wewnętrzny (strong) całkowicie nakłada się na pływający obrazek — wraz z tłem, obramowaniem i zawartością. Z kolei w przypadku elementów blokowych na wierzchu elementu Pływanie | 303 pływającego wyświetlana jest jedynie zawartość. Ich tło oraz obramowanie umieszczane są pod elementem pływającym. Opisane tutaj zachowanie polegające na nakładaniu się elementów jest niezależne od ich kolejności w źródle dokumentu. Nie ma znaczenia, czy element pojawia się przed czy po elemencie pływającym; zawsze pojawia się to samo zachowanie. Właściwość clear Pływanie zostało już omówione dość szczegółowo, jednak przed przejściem do pozycjono- wania należy wspomnieć o jeszcze jednej kwestii. Nie zawsze będzie się chciało, by zawar- tość opływała element pływający — w niektórych przypadkach specjalnie będzie się chciało temu zapobiec. Jeśli mamy dokument podzielony na części, może się zdarzyć, że nie chcemy, by elementy pływające z jednej części nakładały się na kolejne części dokumentu. W takim przypadku trzeba by ustawić pierwszy element każdej z części w taki sposób, by zabronić elementom pływającym pojawiania się obok niego. Gdyby pierwszy element w jakiś sposób miał zostać umieszczony obok elementu pływającego, zostałby on zepchnięty na dół, do momentu aż pojawi się poniżej elementu pływającego, a cała następująca po nim treść pojawi się dopiero po nim, jak pokazano na rysunku 10.21. Rysunek 10.21. Wyświetlanie elementu z zastosowaniem właściwości clear Można to uzyskać dzięki właściwości clear. clear left | right | both | none | inherit Wartości: Wartość początkowa: none Stosuje się do: Dziedziczona: Wartość wyliczona: Elementów blokowych Nie Jak określono 304 | Rozdział 10. Pływanie oraz pozycjonowanie Żeby na przykład upewnić się, iż żaden element h3 nie zostanie umieszczony na prawo od elementów pływających w lewo, należy zadeklarować h3 {clear: left;}. Regułę tę można przetłumaczyć w następujący sposób: „Upewnij się, że lewa strona elementu h3 jest wolna od pływających obrazków”; ma ona efekt podobny do konstrukcji HTML br clear= left . Ironicznym zbiegiem okoliczności jest to, że zachowaniem domyślnym w większości prze- glądarek jest zmuszenie elementów br do generowania pojemników wewnętrznych, dlatego clear nie stosuje się do nich, dopóki nie zmieni się ich właściwości display! Poniższa reguła wykorzystuje właściwość clear w celu zapobieżenia opływaniu elementów pływających po lewej stronie: h3 {clear: left;} Choć reguła ta zepchnie elementy h3 poniżej elementów pływających w lewo, pozwoli na poja- wienie się elementów pływających po prawej stronie elementów h3, jak widać na rysunku 10.22. Rysunek 10.22. Właściwość clear ustawiona na left — po prawej stronie mogą pojawić się elementy pływające By zapobiec tego rodzaju zachowaniu i upewnić się, że elementy h3 nie występują w jednej linii z żadnymi elementami pływającymi, należy skorzystać z wartości both: h3 {clear: both;} Co jest zrozumiałe, wartość ta zapobiega pojawieniu się elementów pływających po obu stronach elementu h3, jak zademonstrowano na rysunku 10.23. Gdyby wskazane było jedynie spychanie elementów h3 w dół przez elementy pływające znajdujące się po ich prawej stronie, należałoby zadeklarować h3 {clear: right;}. Wreszcie istnieje wartość clear: none, która pozwala elementom na pływanie po obu stro- nach elementu. Tak jak w przypadku float: none, wartość ta istnieje głównie po to, by po- zwolić na normalne zachowanie w dokumentach, w których elementy zezwalają na pojawie- nie się elementów pływających po obu ich stronach. Wartość none może oczywiście zostać wykorzystana do nadpisania innych stylów, jak widać na rysunku 10.24. Pomimo istnienia obowiązującej w całym dokumencie reguły zabraniającej pojawienia się elementów pływają- cych po obu stronach nagłówka h3, jeden z takich nagłówków został ustawiony w taki spo- sób, by na takie zachowanie zezwolić: h3 {clear: both;} h3 style= clear: none; What s With All The Latin? /h3 Pływanie | 305 Rysunek 10.23. Właściwość clear ustawiona na both Rysunek 10.24. Właściwość clear o wartości none W CSS1 oraz CSS2 właściwość clear działała poprzez zwiększenie marginesu górnego ele- mentu w taki sposób, by element ten znalazł się poniżej elementu pływającego, w praktyce ignorując szerokość marginesu ustawioną dla góry takiego elementu. W ten sposób zamiast na przykład zadeklarowanej wartości 1.5em, szerokość marginesu mogła być zwiększona do 10em, 25px czy 7.133in — czy do innej wielkości, która była wymagana do przesunięcia elementu w dół na tyle, by jego obszar zawartości znalazł się poniżej dolnego brzegu elementu pływa- jącego. W CSS2.1 wprowadzono pojęcie prześwitu (ang. clearance). Prześwit jest dodatkowym odstę- pem dodawanym ponad marginesem górnym elementu, który ma na celu zepchnięcie go poniżej wszystkich elementów pływających. Oznacza to, że margines górny takiego elementu w tej sytuacji nie zmienia się. Przesunięcie elementu w dół jest natomiast spowodowane przez prześwit. Warto zwrócić uwagę na umieszczenie obramowania nagłówka na rysunku 10.25, które wynika z następujących reguł: 306 | Rozdział 10. Pływanie oraz pozycjonowanie img.sider {float: left; margin: 0;} h3 {border: 1px solid gray; clear: left; margin-top: 15px;} img src= boxer.gif class= sider height= 50 width= 50 img src= stripe.gif height= 10 width= 100 h3 Why Doubt Salmon? /h3 Rysunek 10.25. Właściwość clear i jej wpływ na marginesy Obramowanie górne nagłówka h3 oraz obramowanie dolne pływającego obrazka nie są od siebie oddzielone, ponieważ prześwit o wielkości dwudziestu pięciu pikseli został dodany powyżej marginesu górnego o wartości piętnastu pikseli w celu zepchnięcia krawędzi obra- mowania górnego elementu h3 tuż poniżej dolnego brzegu elementu pływającego. Będzie tak, dopóki margines górny h3 nie będzie miał wielkości czterdziestu pikseli bądź więcej — w tej sytuacji h3 w sposób naturalny zostanie umieszczony poniżej elementu pływającego, a wartość clear będzie nieistotna. W większości przypadków nie wiadomo jednak, jak bardzo przesunięty musi zostać element. Sposobem na zapewnienie tego, by element taki miał jakiś odstęp pomiędzy swoim górnym brzegiem a dołem elementu pływającego, jest dodanie marginesu dolnego do samego ele- mentu pływającego. Jeśli zatem chce się uzyskać przestrzeń o wysokości przynajmniej pięt- nastu pikseli poniżej elementu pływającego z poprzedniego przykładu, należy zmienić arkusz stylów CSS w następujący sposób: img.sider {float: left; margin: 0 0 15px;} h3 {border: 1px solid gray; clear: left;} Margines dolny elementu pływającego zwiększa rozmiar jego pojemnika, a tym samym rów- nież punkt, poniżej którego zepchnięte muszą zostać przesuwane w dół elementy. Dzieje się tak oczywiście dlatego, że — jak widać było wcześniej — brzegi marginesów elementu pływają- cego definiują krawędzie pojemnika tego elementu. Pozycjonowanie Idea przyświecająca pozycjonowaniu jest względnie prosta. Pozycjonowanie pozwala do- kładnie określić, w którym miejscu powinny znajdować się pojemniki elementów w stosunku do miejsca, w jakim normalnie by się pojawiły — lub w stosunku do elementu rodzica, innego elementu albo nawet względem samego okna przeglądarki. Podstawowe koncepcje Przed zagłębieniem się w różne rodzaje pozycjonowania dobrym pomysłem będzie przyjrze- nie się istniejącym typom pozycjonowania oraz różnicom pomiędzy nimi. Konieczne będzie również zdefiniowanie pewnych podstawowych koncepcji, które są kluczowe dla zrozumienia sposobu działania pozycjonowania. Pozycjonowanie | 307 Typy pozycjonowania Poprzez użycie właściwości position można wybrać jeden z czterech różnych typów pozy- cjonowania, które wpływają na sposób generowania pojemnika elementu. position static | relative | absolute | fixed | inherit Wartości: Wartość początkowa: static Stosuje się do: Dziedziczona: Wartość wyliczona: Wszystkich elementów Nie Jak określono Wartości właściwości position mają następujące znaczenia: static Pojemnik elementu tworzony jest w zwykły sposób. Elementy blokowe tworzą pojemnik prostokątny, który jest częścią układu dokumentu, natomiast elementy wewnętrzne po- wodują utworzenie jednego bądź większej liczby pojemników wiersza, które są umieszczane wewnątrz ich elementów rodzica. relative Pojemnik elementu zostaje przesunięty o pewną odległość. Element zachowuje taki kształt, jaki by miał, gdyby nie był pozycjonowany, a ponadto zachowana zostaje przestrzeń, którą normalnie zajmowałby element. absolute Pojemnik elementu jest całkowicie usuwany z układu dokumentu i jest pozycjonowany w sto- sunku do bloku go zawierającego, którym może być inny element w dokumencie bądź też początkowy blok zawierający (opisany w kolejnym podrozdziale). Usuwana jest wszelka przestrzeń zajmowana normalnie przez ten element, tak jakby element nie istniał. Każdy element pozycjonowany bezwzględnie generuje pojemnik blokowy bez względu na to, ja- ki typ pojemnika by wygenerował, gdyby pozostał w układzie normalnym dokumentu. fixed Pojemnik elementu jest pozycjonowany tak, jakby był on pozycjonowany bezwzględnie, ale blokiem go zawierającym jest cały widoczny obszar dokumentu. Nie należy się teraz przejmować szczegółami, gdyż każdy rodzaj pozycjonowania omówiony zostanie w dalszej części rozdziału. Najpierw jednak należy przyjrzeć się blokom zawierają- cym elementy. Blok zawierający element Bloki zawierające elementy omówione zostały już wcześniej w kontekście elementów pływa- jących. W takim przypadku blokiem zawierającym element pływający był najbliższy element blokowy będący przodkiem elementu. W przypadku pozycjonowania sytuacja nie jest aż tak prosta. W CSS2.1 zdefiniowano następujące zasady: 308 | Rozdział 10. Pływanie oraz pozycjonowanie • Blok zawierający element główny (zwany także początkowym blokiem zawierającym) two- rzony jest przez przeglądarkę. W języku HTML elementem głównym jest element html, cho- ciaż niektóre przeglądarki uważają za element główny element body. W większości prze- glądarek początkowym blokiem zawierającym jest prostokąt o wielkości widocznego obszaru dokumentu. • Dla elementów niebędących elementem głównym, których wartość właściwości position równa jest relative bądź static, blok je zawierający tworzony jest przez brzeg obszaru zawartości najbliższego pojemnika przodka, który jest elementem blokowym, komórką tabeli bądź elementem typu inline-block. • Dla elementów niebędących elementem głównym, których wartość właściwości position równa jest absolute, blokiem je zawierającym jest najbliższy przodek (dowolnego rodzaju), który ma wartość właściwości position inną niż static. Odbywa się to w następujący sposób: • Jeśli przodkiem jest element blokowy, to blokiem zawierającym zostaje brzeg dopełnie- nia tego elementu (innymi słowy — obszar, który zostałby ograniczony obramowaniem). • Jeśli przodkiem jest element wewnętrzny, to blokiem zawierającym staje się brzeg ob- szaru zawartości tego elementu. W językach pisanych od lewa do prawa górny oraz lewy brzeg bloku zawierającego są górnym i lewym brzegiem zawartości pierwszego po- jemnika elementu przodka, a dolny oraz prawy brzeg są jednocześnie dolnym i pra- wym brzegiem zawartości ostatniego pojemnika przodka. W językach pisanych od prawej do lewej prawy brzeg bloku zawierającego pokrywa się z prawym brzegiem zawartości pierwszego pojemnika, a lewy brzeg pobierany jest z ostatniego pojemnika. Góra i dół pozostają takie same. • Jeśli nie występuje element będący przodkiem, to do ustalenia bloku zawierającego wykorzystywany jest brzeg początkowego bloku zawierającego. Ważną informacją dotyczącą bloków zawierających elementy jest fakt, że elementy mogą być pozycjonowane na zewnątrz bloku je zawierającego. Przypomina to sposób, w którym przy użyciu marginesów ujemnych można umieścić elementy pływające poza obszarem zawarto- ści rodzica. Z tego powodu może się wydawać, iż określenie „blok zawierający” powinno ra- czej nazywać się „kontekst pozycjonowania”. Ponieważ jednak specyfikacja używa wyrażenia „blok zawierający”, również w niniejszej książce zostanie on tak nazwany (naprawdę staram się zminimalizować zamieszanie!). Właściwości przesunięcia Trzy z przedstawionych w poprzednim podrozdziale typów pozycjonowania — relative, absolute oraz fixed — wykorzystują cztery różne właściwości w celu opisania przesunięcia brzegów elementu pozycjonowanego względem brzegów bloku go zawierającego. Te cztery właściwości, które nazywa się właściwościami przesunięcia (ang. offset properties), składają się na spory zakres tego, co umożliwia działanie pozycjonowania (ramka z opisem znajduje się na następnej stronie). Właściwości te opisują przesunięcie od najbliższego boku bloku zawierającego element (stąd określenie przesunięcie). Na przykład właściwość top opisuje odległość brzegu marginesu górnego pozycjonowanego elementu od górnej krawędzi bloku go zawierającego. W przy- padku top wartości dodatnie przesuwają krawędź marginesu górnego pozycjonowanego elementu w dół, podczas gdy wartości ujemne przesuwają go ponad górny brzeg bloku go Pozycjonowanie | 309 top, right, bottom, left Wartości: length | percentage | auto | inherit Wartość początkowa: auto Stosuje się do: Elementów pozycjonowanych (czyli elementów, w których właściwość position ma wartość inną od static) Nie Dziedziczona: Wartość procentowa: Odnosi się do wysokości bloku zawierającego element dla top oraz Wartość wyliczona: Uwaga: bottom i do szerokości bloku zawierającego dla right oraz left Dla elementów pozycjonowanych względnie — należy zobaczyć część „Uwaga”; dla elementów o wartości static — auto; dla wartości długości — odpowiednia długość bezwzględna; dla wartości procentowych — określona wartość. W innym przypadku — auto Wartości wyliczone uzależnione są od różnych czynników; więcej przykładów na ten temat we wpisach z Dodatku A zawierającego. Podobnie left opisuje, jak daleko z prawej (przy wartościach dodatnich) lub z lewej (przy wartościach ujemnych) strony lewego brzegu bloku zawierającego znajdzie się brzeg marginesu lewego pozycjonowanego elementu. Wartości dodatnie powodują przesu- nięcie krawędzi marginesu elementu pozycjonowanego w prawo, natomiast wartości ujemne — w lewo. Działanie wszystkich czterech właściwości można przedstawić tak: dodatnie wartości powo- dują przesunięcie do wnętrza, przesuwając brzegi w kierunku środka bloku zawierającego ele- ment, natomiast wartości ujemne powodują odsunięcie brzegu na zewnątrz. Oryginalna specyfikacja CSS2 w rzeczywistości mówiła, że odsuwane są brzegi obszaru zawartości elementu, a nie krawędzie marginesów, jednak było to niespójne z innymi częściami CSS2. Błąd ten został poprawiony w opublikowanej później erracie oraz w CSS2.1. Brzegi marginesów wykorzystywane są do obliczania przesunięcia we wszyst- kich obecnie rozwijanych przeglądarkach (w momencie pisania niniejszej książki). Wynikiem przesunięcia krawędzi marginesów pozycjonowanego elementu jest to, że w pro- cesie pozycjonowania przesuwany jest cały element — marginesy, obramowanie, dopełnienie oraz zawartość. Innymi słowy — elementowi pozycjonowanemu można dodać marginesy, obramowanie oraz dopełnienie. Zostaną one zachowane i utrzymane wraz z pozycjonowa- nym elementem oraz będą zawarte wewnątrz obszaru zdefiniowanego przez właściwości przesunięcia. Należy pamiętać, że właściwości przesunięcia definiują je od analogicznego brzegu bloku zawierającego element (na przykład left określa przesunięcie od lewego brzegu), a nie od lewego górnego rogu bloku zawierającego. Dlatego na przykład jednym ze sposobów na wypełnienie prawego dolnego rogu bloku zawierającego element jest użycie następujących wartości: top: 50 ; bottom: 0; left: 50 ; right: 0; 310 | Rozdział 10. Pływanie oraz pozycjonowanie W analizowanym przykładzie brzeg marginesu lewego pozycjonowanego elementu umiesz- czony jest w połowie szerokości bloku go zawierającego. Jest to przesunięcie od lewego brzegu bloku zawierającego. Brzeg marginesu prawego elementu pozycjonowanego nie jest jednak przesunięty od prawego brzegu bloku zawierającego element, a więc oba brzegi są zbieżne. Podobne rozumowanie sprawdza się dla górnego i dolnego brzegu elementu pozycjonowa- nego — brzeg marginesu górnego umieszczony jest w połowie wysokości bloku zawierającego element, ale brzeg marginesu dolnego nie jest przesunięty od dolnego brzegu bloku zawierają- cego. Prowadzi to do efektu pokazanego na rysunku 10.26. Rysunek 10.26. Wypełnienie prawej dolnej ćwiartki bloku zawierającego element To, co przedstawione jest na rysunku 10.26, jak również w większości przykładów z ni- niejszego rozdziału, oparte jest na pozycjonowaniu bezwzględnym. Ponieważ pozy- cjonowanie bezwzględne jest najprostszym typem, na podstawie którego można za- demonstrować działanie właściwości top, right, bottom oraz left, na razie przykłady ograniczą się do niego. Warto zwrócić uwagę, że element pozycjonowany ma nieco inny kolor tła. Patrząc na rysu- nek 10.26, można zauważyć, że pozycjonowany element nie posiada marginesów. Gdyby jednak je posiadał, to pomiędzy obramowaniem a brzegami przesunięcia pojawiłby się pasek pustej przestrzeni. Wyglądałoby to tak, jakby element nie wypełniał dokładnie prawej dolnej ćwiartki bloku go zawierającego. W rzeczywistości wypełniałby ją, ale nie byłoby to natych- miast widoczne dla oka obserwatora. Innymi słowy — poniższe dwa zestawy deklaracji sty- lów dałyby mniej więcej taki sam efekt wizualny przy założeniu, że blok zawierający element ma 100em wysokości i 100em szerokości: top: 50 ; bottom: 0; left: 50 ; right: 0; margin: 10em; top: 60 ; bottom: 10 ; left: 60 ; right: 10 ; margin: 0; Podobieństwo będzie znowu tylko wizualne. Element można umieścić na zewnątrz bloku go zawierającego poprzez użycie wartości ujem- nych. Na przykład poniższe wartości doprowadzą do rezultatów zaprezentowanych na ry- sunku 10.27: top: -5em; bottom: 50 ; left: 75 ; right: -3em; Poza wartościami długości oraz wartościami procentowymi właściwości przesunięcia mogą również zostać ustawione na auto, co jest wartością domyślną. Wartość ta nie zachowuje się jednak tak samo w każdym przypadku; zmienia się to w zależności od wykorzystywanego typu pozycjonowania. Sposób działania wartości auto zostanie omówiony w dalszej części rozdziału, wraz z omawianiem kolejnych typów pozycjonowania. Pozycjonowanie | 311 Rysunek 10.27. Pozycjonowanie elementu poza blokiem go zawierającym Szerokość oraz wysokość Zapewne w wielu przypadkach (po określeniu tego, gdzie element ma zostać umieszczony) będziemy chcieli pójść jeszcze dalej i zadeklarować wysokość oraz szerokość tego elementu. Prawdopodobnie dodatkowo pojawią się okoliczności, w których będziemy chcieli ograni- czyć to, jak wysoki lub szeroki może stać się element pozycjonowany, nie wspominając już o przypadkach, w których pragnie się, aby przeglądarka automatycznie obliczyła szerokość lub wysokość, a może nawet obydwie wartości. Ustawianie szerokości oraz wysokości Jeśli chce się nadać elementom pozycjonowanym określoną szerokość, to oczywiste jest, że najlepszą właściwością, którą należy wykorzystać, będzie właściwość width. Podobnie wła- ściwość height pozwoli zadeklarować dokładną wysokość pozycjonowanego elementu. Mimo że czasami ważne jest ustawienie szerokości i wysokości elementu, przy pozycjono- waniu elementów nie zawsze jest to konieczne. Jeśli na przykład umieszczenie wszystkich czterech boków opisane jest przy użyciu właściwości top, right, bottom oraz left, to wyso- kość i szerokość elementu wynika w sposób niejawny z rozmieszczenia jego boków. Zakła- dając, że chce się, by element pozycjonowany bezwzględnie wypełnił od góry do dołu lewą połowę bloku go zawierającego, można użyć poniższych stylów, aby otrzymać rezultat przedstawiony na rysunku 10.28: top: 0; bottom: 0; left: 0; right: 50 ; Ponieważ domyślna wartość właściwości width i height wynosi auto, rezultat przestawiony na rysunku 10.28 jest dokładnie taki sam, jaki by był, gdyby użyto stylów wypisanych poniżej: top: 0; bottom: 0; left: 0; right: 50 ; width: 50 ; height: 100 ; Obecność width oraz height w powyższym przykładzie nie dodaje nic do umieszczenia elementu. 312 | Rozdział 10. Pływanie oraz pozycjonowanie Rysunek 10.28. Ustawienie pozycjonowania oraz rozmiaru elementu za pomocą samych właściwości przesunięcia Oczywiście gdyby należało dodać do elementu dopełnienie, obramowanie bądź marginesy, obecność jawnie zadeklarowanych wartości właściwości height oraz width dużo by zmieniła: top: 0; bottom: 0; left: 0; right: 50 ; width: 50 ; height: 100 ; padding: 2em; Dzięki takiej deklaracji otrzyma się element pozycjonowany, który rozszerza się poza blok go zawierający, jak widać na rysunku 10.29: Rysunek 10.29. Pozycjonowanie elementu częściowo poza blokiem go zawierającym Dzieje się tak, ponieważ — jak widać było w poprzednich rozdziałach — dopełnienie doda- wane jest do obszaru zawartości elementu, natomiast rozmiar obszaru zawartości elementu zależy od wartości właściwości height oraz width. Aby otrzymać pożądane dopełnienie i mimo to zmieścić element w bloku go zawierającym, należy albo usunąć deklaracje height oraz width, albo w jawny sposób ustawić je na auto. Ograniczanie szerokości oraz wysokości Jeśli będzie to konieczne lub pożądane, można ustanowić limit szerokości lub wysokości elementu, używając następujących właściwości CSS2, które będą w niniejszej książce określane mianem właściwości min-max. Minimalny rozmiar obszaru zawartości elementu można zdefi- niować za pomocą właściwości min-width oraz min-height. Pozycjonowanie | 313 min-width, min-height length | percentage | inherit Wartości: Wartość początkowa: 0 Stosuje się do: Wszystkich elementów z wyjątkiem niezastępowanych elementów wewnętrznych oraz elementów tabeli Nie Dziedziczona: Wartość procentowa: Odnosi się do wysokości (min-height) oraz szerokości (min-width) Wartość wyliczona: bloku zawierającego element Dla wartości procentowych — jak określono; dla wartości długości — długość bezwzględna; w innym przypadku — none W podobny sposób rozmiar elementu może być ograniczany dzięki właściwościom max-width oraz max-height. max-width, max-height length | percentage | none | inherit Wartości: Wartość początkowa: none Stosuje się do: Wszystkich elementów z wyjątkiem niezastępowanych elementów wewnętrznych oraz elementów tabeli Nie Dziedziczona: Wartość procentowa: Odnosi się do wysokości (max-height) oraz szerokości (max-width) Wartość wyliczona: bloku zawierającego element Dla wartości procentowych — jak określono; dla wartości długości — długość bezwzględna; w innym przypadku — none Nazwy tych właściwości mówią same za siebie. Co może na pierwszy rzut oka wydawać się nieco mniej oczywiste, jednak po chwili staje się jasne, to to, że żadna z wartości tych wła- ściwości nie może być ujemna. Właściwości min-height, min-width, max-height oraz max-width nie były obsługi- wane przez przeglądarkę Internet Explorer dla systemu Windows aż do wersji IE7. Poniższe style wymuszą, by element pozycjonowany miał przynajmniej 10em szerokości i 20em wysokości, jak widać na rysunku 10.30: top: 10 ; bottom: 20 ; left: 50 ; right: 10 ; min-width: 10em; min-height: 20em; Nie jest to zbyt ciekawe rozwiązanie, ponieważ zmusza ono element do tego, by miał co najmniej pewien rozmiar bez względu na wielkość bloku go zawierającego. Poniżej znajduje się lepsze rozwiązanie: top: 10 ; bottom: auto; left: 50 ; right: 10 ; height: auto; min-width: 15em; 314 | Rozdział 10. Pływanie oraz pozycjonowanie Rysunek 10.30. Ustawienie minimalnej wysokości oraz szerokości dla elementu pozycjonowanego Oto przypadek, w którym element powinien mieć przynajmniej 40 szerokości bloku go za- wierającego, ale nigdy nie może mieć jej mniej niż 15em. Zmieniono również wartości bottom i height tak, by były one ustalane automatycznie. Takie ustawienia pozwolą na to, by ele- ment był tak wysoki, jak jest to konieczne do wyświetlenia zawartości (bez względu na to, jak wąski się stanie; oczywiście nie może być węższy niż 15em). W kolejnym podrozdziale omówiona zostanie rola, jaką w wysokości oraz szerokości elementu pozycjonowanego odgrywa wartość auto. Można jeszcze odwrócić sytuację i zabezpieczyć element przed zbyt dużym rozciągnięciem wszerz lub wzdłuż, używając do tego kolejnych dwóch właściwości: max-width oraz max- height. Zastanówmy się nad sytuacją, w której z pewnych powodów chce się, by szerokość elementu wynosiła trzy czwarte szerokości bloku go zawierającego, ale nie stała się większa niż czterysta pikseli. Style odpowiednie do osiągnięcia tego efektu są następujące: left: 0 ; right: auto; width: 75 ; max-width: 400px; Ogromną zaletą właściwości min-max jest to, że pozwalają one względnie bezpieczne łączyć różne jednostki. Można ustawiać rozmiary oparte na wartościach procentowych, używając jednocześnie ograniczeń bazujących na miarach długości i odwrotnie. Warto wspomnieć, że właściwości min-max mogą być bardzo użyteczne również w połącze- niu z elementami pływającymi. Można na przykład pozwolić, aby szerokość elementu pły- wającego była określona względem szerokości elementu rodzica (który jest blokiem go za- wierającym), jednocześnie zapewniając, że szerokość elementu pływającego nigdy nie spadnie poniżej 10em. Odwrotne podejście także jest możliwe: p.aside {float: left; width: 40em; max-width: 40 ;} Ustawi to szerokość elementu pływającego na 40em, chyba że byłoby to więcej niż 40 szero- kości bloku zawierającego element — w takim przypadku element pływający zostanie zwę- żony. Pozycjonowanie | 315 Do zagadnienia nadawania rozmiarów elementom powrócimy przy omawianiu po- szczególnych rodzajów pozycjonowania. Wypływanie oraz przycinanie zawartości Jeśli zawartość elementu będzie zbyt duża w stosunku do jego wielkości, może to zagrozić wypłynięciem jej z elementu. W takich sytuacjach istnieje kilka rozwiązań, a CSS2 pozwala autorom wybrać jedno z nich. Pozwala także określić obszar elementu, na zewnątrz którego zaczną działać właściwości przycinania i wypływania. Wypływanie Powiedzmy, że mamy element, który z jakiegoś powodu został ograniczony do pewnej wiel- kości, a jego zawartość nie mieści się w określonym obszarze. Można przejąć kontrolę nad taką sytuacją, stosując właściwość overflow. overflow visible | hidden | scroll | auto | inherit Wartości: Wartość początkowa: Visible Stosuje się do: Dziedziczona: Wartość wyliczona: Elementów blokowych oraz zastępowanych Nie Jak określono Domyślna wartość visible oznacza, że zawartość elementu może być widoczna na zewnątrz jego pojemnika. Zazwyczaj prowadzi to do wylania się zawartości na zewnątrz własnego pojemnika elementu, ale nie zmienia kształtu pojemnika. Poniższe style mają efekt taki, jak przedstawiono na rysunku 10.31: div#sidebar {position: absolute; top: 0; left: 0; width: 25 ; height: 7em; background: #BBB; overflow: visible;} Rysunek 10.31. Zawartość elementu w sposób widoczny wypływająca poza pojemnik elementu 316 | Rozdział 10. Pływanie oraz pozycjonowanie Jeśli właściwość overflow ma wartość scroll, zawartość elementu jest przycinana (to znaczy jej część jest niewidoczna), ale zapewniony jest sposób na to, aby użytkownik miał dostęp do niewidocznej zawartości. W przeglądarce będzie to oznaczało zastosowanie suwaka (bądź zestawu suwaków) lub innej metody dostępu do zawartości bez zmiany kszt
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie III
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: