Elementy pozycjonowania Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.








Pozycjonowanie absolutne Pozycjonowanie względne Pozycjonowanie ustalone Odległości Pionowe wyrównanie Pozycja w stosie Kadrowanie

Pozycjonowanie absolutne Przykład:

Elementy pozycjonowane w sposób "absolutny" są wlewane do zarezerwowanych obszarów i zajmują tam miejsce bez względu na pozycję innych elementów. W taki właśnie sposób jest ustawiony obrazek "Enter". Elementy te mogą się nakładać na inne elementy absolutne lub względne, które akurat się tutaj znalazły. Element pozycjonowany absolutnie wypada niejako z normalnego przepływu dokumentu ustawionych kolejno elementów. Polecenie pozycjonowania absolutnego może mieć przykładową postać: position:absolute; left:800px; top:20px Zalecane jest bardzo uważne i ostrożne stosowanie definicji absolutnych, aby nie popsuć widoku strony, zwłaszcza przy zmianach wielkości okna przeglądarki.

1

Pozycjonowanie względne Pozycjonowanie względne odnosi się do miejsca wstawienia definicji. Na przykład akapit mógłby mieć nadane pozycjonowanie: position:relative; left: 200px; top: 50px

czyli przesunięcie o 200 pikseli w prawo i 50 pikseli w dół. Gdybyśmy zastosowali wartość ujemną, np. top: -50px, akapit zostałby przesunięty w górę. Przykłady: Ten akapit...

Ten akapit ma pozycję względną (relative), jest odsunięty od lewego marginesu o 200 pikseli i o 50 pikseli w dół. Pole akapitu ma 400 pikseli szerokości. W rzeczywistości powinien być wyświetlany zaraz pod podaną wyżej definicją, ale pozycjonowanie spowodowało przesunięcie w prawo i w dół. Aby nie nakładał się na następny akapit, umieszczono pod nim kilka znaczników
.

Wykaz odsunięty o 300 pikseli i mający 400 pikseli szerokości • • •

To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu

Kod pozycjonowania możemy umieszczać bezpośrednio w znaczniku elementu lub obejmować element znacznikami lub .

Pozycjonowanie ustalone Pozycjonowanie ustalone (fixed) pozwala utrzymywać element w stałej pozycji w okienku przeglądarki, np. grafikę. Polecenie jest interpretowane przez Netscape'a i Operę (z uchybieniami), ale nie przez Internet Explorera. Ciekawym sposobem wykorzystania może być symulacja strony ramkowej w dokumencie nie zawierającym ramek. Możliwe jest bowiem wstawienie definicji, która rozdzieli stronę na odseparowane od siebie bloki, przy czym jeden blok będzie tkwił w miejscu, gdy drugi będzie można przewijać. W ten sposób możemy na przykład utrzymywać widoczny cały czas spis treści, gdy zawartość dokumentu jest przewijana. Spis treści PCkurier
Chip


2

Tekst główny to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst

I ilustracja w Netscape 6:

Jak widać, dokument jest przewijany (widać to na suwaku), natomiast część ze spisem tkwi w miejscu.

Odległości Pozycjonowanie absolutne i względne jest realizowane za pomocą parametrów left, right, top i bottom, którym przypisujemy jednostki miary, np. piksele, centymetry czy procenty. Jak widzieliśmy to już w podanych przykładach, możemy zastosować takie definicje, jak: Przykładowy akapit

Przykładowy akapit

3

Za pomocą pozycjonowania względnego (ale i absolutnego) możemy łatwo uzyskiwać "efekty specjalne", np. nakładanie elementów:

Wyjaśnienie konstrukcji: Obrazki mają 80 pikseli szerokości i 114 pikseli wysokości. Blok DIV powoduje ustawianie ich jeden pod drugim. Chcemy jednak, aby kolejne obrazki były przesunięte o 30 pikseli w dół i w prawo w stosunku do poprzedniego. Pierwszy obrazek można wstawić bez definiowania pozycji. Drugi obrazek jest ustawiany pod pierwszym, Musimy więc "cofnąć" go o 84 piksele w górę (114-30), a także przesunąć w prawo o 30 pikseli. Trzeci obrazek musimy przesunąć w górę już o 114+114-60 pikseli, czyli top: -168px. Trzeba go także przesunąć w prawo o 60 pikseli, czyli left: 60px. Jak widać, powstaje jednak "dziura", którą można zlikwidować, podciągając do góry pozostałe elementy na stronie.

4

W analogiczny sposób można nakładać na siebie bloki tekstu: To jest jakiś tam tekst To jest inny tekst

To jest jakiś tam tekst To jest inny tekst Pionowe wyrównanie Parametr vertical-align pozwala ustalać pionowe relacje elementów strony. Do dyspozycji mamy wartości: baseline, sub, super, top, text-top, middle, botom, text-bottom, długość, procent.

Wartością domyślną jest baseline. tekścik

middle tekścik

baseline Normalny akapit podniesienie tekstu dalszy ciąg akapitu.

5

Normalny akapit

podniesienie tekstu o 3mm

dalszy ciąg akapitu.

Normalny akapit opuszczenie tekstu dalszy ciąg akapitu.

Normalny akapit opuszczenie tekstu o 20% dalszy ciąg akapitu. Normalny akapit użycie sub dalszy ciąg akapitu.

Normalny akapit użycie sub dalszy ciąg akapitu. Normalny akapit użycie super dalszy ciąg akapitu.

Normalny akapit użycie super dalszy ciąg akapitu.

Pozycja w stosie Możemy regulować pionową pozycję w stosie nałożonych na siebie elementów (tzw. z-order). Służy do tego polecenie z-index: n.

Obrazki są układane w kolejności od z-index: 1 (na spodzie) do z-index: 3 (na wierzchu).

6

Analogicznie, w przypadku tekstu: To jest jakiś tam tekst To jest inny tekst

To jest jakiś tam tekst To jest inny tekst Kadrowanie Polecenie kadrowania (Internet Explorer, Netscape 6) pozwala przycinać obraz, kolejno, góry, prawej strony, dołu i lewej strony (pozycje linii tnących liczone zawsze od góry, od lewej, od góry, od lewej). Jest to obecnie możliwe jedynie dla pozycji absolutnej - position:absolute. Wycinkiem może być jedynie prostokąt rect. Na ilustracjach pokazujemy oryginał i obraz wykadrowany. Wartości określają de facto rogi prostokąta: górny-prawy i dolny-lewy.



7

Wypływanie treści Gdy "pudełko", czyli naturalny obszar jakiegoś elementu jest zbyt małe, aby zawrzeć w sobie całą zawartość elementu, wypływa ona z niego. Fakt ten możemy obsłużyć za pomocą polecenia overflow. Jeśli określiliśmy pudełko, ale nie zdefiniowaliśmy wartości overflow, treść wypływa ze zdefiniowanego obszaru i rozszerza faktyczny obszar jej występowania - zdefiniowana szerokość jest zachowywana, natomiast poszerza się wysokość. Jest to naturalne zachowanie elementu, np. treści akapitu czy tytułu. zawartość tytułu stopnia 1

zawartość tytułu stopnia 1 zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Możemy jednak określić, jak ma się zachować przeglądarka, gdy nastąpi owo "przelanie" tekstu. W poleceniu overflow możemy przyjąć jedną z czterech wartości: scroll, visible, auto i hidden. Scroll powoduje

wyświetlenie pionowego i poziomego paska przewijania obejmujących zdefiniowany obszar występowania.

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...

8

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Visible powoduje wyświetlenie całej zawartości elementu, bez względu na zdefiniowany obszar występowania. W Internet Explorerze wylana zawartość nie nakłada się na inne elementy, w Netscape 6 - nakłada się. Wydaje się, że poprawna (i logiczna) jest interpretacja Netscape'a. zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Auto powoduje

wyświetlenie jedynie tego paska przewijania, który jest w danej sytuacji potrzebny. W przypadku akapitu będzie to jedynie pasek pionowy.

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Hidden powoduje

przycięcie widocznej zawartości akapitu do obszaru zdefiniowanego pudełka. Wylana część akapitu nie będzie widoczna. zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu

Pływanie elementów Polecenie float pozwala przepływać elementom we wskazanym kierunku w danej linii i opływać go sąsiadującym elementom z przeciwnego kierunku. Float może przyjmować wartości left, right i none.

9

Obrazek przepływający na lewo i tekst opływający go z prawej strony.

Obrazek przepływający na lewo i tekst opływający go z prawej strony.

Obrazek przepływający na prawo i tekst opływający go z lewej strony

Obrazek przepływający na prawo i tekst opływający go z lewej strony

Obrazek ustawiony bez opływania.

Obrazek ustawiony bez opływania. Gdybyśmy chcieli natomiast "skontrować" opływanie elementów, możemy się posłużyć parametrem clear, który zrzuca w dół element. Przyjmuje on wartości left, right i both. Akapit bez clear

Akapit bez clear

10

Zrzucony akapit

Zrzucony akapit Akapit bez clear

Akapit bez clear Zrzucony akapit

Zrzucony akapit

Wyświetlanie elementów Parametr display reguluje sposób wyświetlania elementów, tworząc z nich elementy blokowe, liniowe czy punkty wykazu. Lista wartości jest bardzo obszerna, ale jest interpretowana przez przeglądarki w sposób szczątkowy. Lista obejmuje: none, block, inline, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption. Kilka działających przykładów: Dwa akapity mogą być ustawione w jednym wierszu, gdy obu nadamy wartość inline (IE5). Normalnie nie jest możliwe, gdyż akapit jest blokiem rezerwującym dla siebie odrębne "pudełko". 11

Akapit pierwszy Akapit drugi

Akapit pierwszy Akapit drugi Podobnie, w jednym rzędzie z tekstem możemy ustawić tabelę, dodając w niej parametr display:inline.: tekst przed tabelką 111 222 333 444 tekst za tabelką Element nie będący z natury blokiem, jak obrazek, możemy oznaczyć jako blok, wskutek czego nie będzie sąsiadował poziomo z innym elementem. Przykład obrazka i tekstu bez display:block

jakiś tam tekst Przykład oznaczenia obrazka jako bloku. jakiś tam tekst

12

jakiś tam tekst display:none powoduje

niewyświetlanie elementu, chociaż w źródle dokumentu w dalszym ciągu

istnieje. Tutaj ma się pojawić obrazek, ale display:none usuwa go z ekranu.

Widzialność elementów Parametr visibility pozwala decydować o tym, czy element jest widoczny na ekranie, czy też nie. Parametr przyjmuje wartości visible, hidden i collapse. Wartość hidden ukrywa element, zostawiając puste miejsce. Przykład: schowanie całego akapitu. Ten akapit ma być niewidoczny.

Ten akapit ma być niewidoczny. Przykład: schowanie fragmentu akapitu objętego wycinkiem span.

13

John Fitzerald Kennedy został zastrzelony przez no, widzę, że jesteście ciekawi..., ale mało kto o tym wie. Wartość visible wymusza wyświetlenie elementu. Wartość collapse wymusza ukrycie elementu - obsługuje ją jedynie Netscape 6 i Opera 7. tego akapitu nie widać w Netscape 6 i Operze 7.

Jednostki miary Do dyspozycji mamy dwa rodzaje jednostek miary - absolutne i relatywne. Przykładem miary absolutnej jest centymetr, relatywnej - piksel. Jednostkę miary podajemy zawsze bezpośrednio po liczbie, np. 1cm, 0,1in itd. Miary absolutne






in - cale, 1in = 2.54cm cm - centymetry, 1cm mm - milimetry, 1mm pt - punkty, 1pt = 1/72in pt - pika, 1pc = 12pt

Miary relatywne




em - wysokość czcionki elementu ex - x-height - wysokość litery x px - piksele, w odniesieniu do rozdzielczości tła

Oddzielnie wyróżnia się wielkości procentowe oraz absolutne (np. x-large) i relatywne (np. smaller) miary czcionek.

Przykłady wielkości absolutnych Tytuł stopnia 1

Tytuł stopnia 1 Akapit 2 pika

Akapit 2 pika punkt 1 punkt 2 punkt 3 14

• • •

punkt 1 punkt 2 punkt 3

Przykłady wielkości relatywnych Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki. Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki. Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.

Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.

Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery. Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery. Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.

Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.

Akapit z czcionką 12-punktową, o wcięciu 100 pikseli. Akapit z czcionką 12-punktową, o wcięciu 100 pikseli. Stosowanie miar relatywnych ma sens przede wszystkim w sytuacjach, w których chcemy zachować proporcje wyświetlania różnych elementów. Na przykład na 14-calowym monitorze piksel ma inną wartość w centymetrach w rozdzielczości 800x600 niż 1024x768.

Kursory Internet Explorer od wersji 4, Netscape 6 i Opera 7 interpretują definicje kursorów. Zauważmy, że przesunięcie kursora nad jakiś element strony WWW powoduje niekiedy zmianę jego kształtu. Na przykład kursor nad odsyłaczem ma kształt "łapki", nad tekstem - kształt wielkiej litery I, nad grafiką - kształt strzałki. Okazuje się, że możemy sami wybrać kształt kursora, dając dodatkową informację czytelnikowi strony. Definicja taka nie wpływa na wyświetlanie strony w innych przeglądarkach, więc jej użycie jest bezpieczne. Kursor możemy definiować w stylach, przypisując jakiś kształt każdemu elementowi określonego rodzaju na danej stronie, czy też doraźnie tworzyć styl i przypisywać go wybranej grafice, tytułowi itd. 15

Definicje są niezmiernie proste. Wystarczy jedynie napisać w stylu cursor:styl_kursora. Zaprezentujmy pierwszy z brzegu przykład, w którym przesunięcie kursora myszki nad grafikę spowoduje wyświetlenie kursora ze znakiem zapytania.

Oczywiście definiowanie kursorów nie jest tylko zwykłą zabawą. Jeśli jakiś element powoduje wyświetlenie kursora ze znakiem zapytania, może to sugerować istnienie jakiejś pomocy. Podobnie, strzałka zwrócona we wskazanym kierunku może zwracać uwagę na inny obiekt na stronie. Oto cała lista kursorów, wraz z przykładami. Aby zobaczyć dany styl kursor, wystarczy przesunąć kursor myszki nad wyraz PRZYKŁAD. Przy "resize" n=north, s=south, w=west, e=east.

cursor:crosshair

PRZYKŁAD

cursor:hand

PRZYKŁAD

cursor:move

PRZYKŁAD

cursor:e-resize

PRZYKŁAD

cursor:ne-resize

16

PRZYKŁAD

cursor:nw-resize

PRZYKŁAD

cursor:n-resize

PRZYKŁAD

cursor:se-resize

PRZYKŁAD

cursor:sw-resize

PRZYKŁAD

cursor:s-resize

PRZYKŁAD

cursor:w-resize

PRZYKŁAD

cursor:text

PRZYKŁAD

cursor:wait

PRZYKŁAD

cursor:help

PRZYKŁAD

17

cursor:default

PRZYKŁAD

cursor:auto

PRZYKŁAD

Default, jeśli dobrze zauważyłem, generuje zawsze typowy kształt kursora myszki, czyli strzałkę. Auto jest zgodne z domyślnymi wartościami przeglądarki. Możliwe jest też wykorzystanie kursora w formacie .cur (statyczny) lub .ani (animowany). Oto przykłady (przesuń kursor myszki nad odsyłacz) - efekt działa na pewno w Internet Explorerze 6: Kurs HTML Kod definicji: