Metody pozycjonowania elementów na stronie www

Prezentacja na temat: "Metody pozycjonowania elementów na stronie www"— Zapis prezentacji:

1 Metody pozycjonowania elementów na stronie www
Przygotowali: Rafał Bajno Tomasz Baryłowicz Metody pozycjonowania elementów na stronie www

2 Metody pozycjonowania elementów
Część I: Pozycjonowanie Div’ów Pozycjonowanie Relatywne (Relative) Pozycjonowanie Absolutne (Absolute) Pozycjonowanie Ustalone (Fixed) Nakładanie elementów (z-index) Oblewanie elementów tekstem (float)

3 Metody pozycjonowania elementów
Pozycjonowanie Div’ów: left: wartość; odległość od lewej krawędzi strony right: wartość; odległość od prawej krawędzi strony top: wartość; odległość od górnej krawędzi strony bottom: wartość; odległość od dolnej krawędzi strony height: wartość; wysokość bloku width: wartość; szerokość bloku przykład

4 Metody pozycjonowania elementów
Pozycjonowanie Relatywne (Relative): selektor { position: relative; parametry } *Selektorem może być praktycznie dowolny znacznik Parametry: left: wartość odległość od lewej krawędzi położenia spoczynkowego top: wartość odległość od górnej krawędzi położenia spoczynkowego right: wartość odległość od prawej krawędzi położenia spoczynkowego bottom: wartość odległość od dolnej krawędzi położenia spoczynkowego

5 Metody pozycjonowania elementów
Pozycjonowanie Relatywne (Relative): Kolejność ustawiania parametrów: left: 1cm; right: 3cm; top: 2cm; bottom: 4cm Poprawna kolejność dla wszystkich wartości left: 1cm; top: 2cm; right: 3cm; bottom: 4cm wartości right oraz bottom zostaną zignorowane.

6 Metody pozycjonowania elementów
Pozycjonowanie Relatywne (Relative): Przykład: Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px.

7 Metody pozycjonowania elementów
Pozycjonowanie Absolutne (absolute): selektor { position: absolute; parametry } *Selektorem może być praktycznie dowolny znacznik Parametry: left: wartość odległość od lewej krawędzi bloku obejmującego top: wartość odległość od górnej krawędzi bloku obejmującego right: wartość odległość od prawej krawędzi bloku obejmującego bottom: wartość odległość od dolnej krawędzi bloku obejmującego

8 Metody pozycjonowania elementów
Pozycjonowanie Absolutne (absolute): Utwórzmy w tym miejscu (pozycjonowanie względne) blok zdefiniowany w: <div style="position: relative; width: 400px; height: 150px; border: 1px dotted black;"></div> Umieśćmy w nim grafikę, pozycjonowaną w następujący sposób: <img src="sufi.jpg" width="56" height="51" alt="Sufi w kwiatach" style="position: absolute; left: 20px; top:20px"> oraz akapit spozycjonowany następująco: <p style="position: absolute; bottom: 10%; right: 10%; border: 1px solid green; width: 200px; padding:10px;">To jest jakiś akapit.</p> . <div style="position: relative; width: 400px; height: 150px; border: 1px dotted black;"></div> <img src="sufi.jpg" width="56" height="51" alt="Sufi w kwiatach" style="position: absolute; left: 20px; top:20px"> <p style="position: absolute; bottom: 10%; right: 10%; border: 1px solid green; width: 200px; padding:10px;">To jest jakiś akapit.</p>.

9 Metody pozycjonowania elementów
Pozycjonowanie Absolutne (absolute): I oto efekt - zwróć uwagę, że grafika i akapit są pozycjonowane w stosunku do nadrzędnego bloku div, czyli swojego rodzica, a nie w stosunku do strony, czyli odległego w hierarchii przodka

10 Metody pozycjonowania elementów
Pozycjonowanie Ustalone (fixed): selektor { position: fixed; parametry } *Selektorem może być praktycznie dowolny znacznik Parametry: left: wartość odległość od lewej krawędzi okna top: wartość odległość od górnej krawędzi okna right: wartość odległość od prawej krawędzi okna bottom: wartość odległość od dolnej krawędzi okna

11 Metody pozycjonowania elementów
Pozycjonowanie Ustalone (fixed): Przykład

12 Metody pozycjonowania elementów
Nakładanie elementów (z-index): selektor {position: rodzaj; parametry; z-index: numer } Selektorem może znacznik poddany pozycjonowaniu rodzaj relative, absolute Numer pojedyncza liczba, określającą, kolejność nakładania elementów (nr 1 będzie na samym spodzie - zakryty przez inne). Polecenie to pozwala określić, w jaki sposób mają się nakładać elementy pozycjonowane, Czyli…

13 Metody pozycjonowania elementów
Nakładanie elementów (z-index): Wartość najmniejsza z-index znajduję się na samym spodzie, natomiast wartośc największa n samym wierzchu :>

14 Metody pozycjonowania elementów
Nakładanie elementów (z-index): Oto przykład normalnego pozycjonowania (bez użycia z-index): <img style="width: 100px; height: 75px; position: relative" src="obrazek.jpg" alt="..." /> <img style="position: relative; left: 84px; bottom: 91px" src="punkt.gif" alt="..." /> Otrzymujemy  <img style="width: 100px; height: 75px; position: relative" src="obrazek.jpg" alt="..." /> <img style="position: relative; left: 84px; bottom: 91px" src="punkt.gif" alt="..." />

15 Metody pozycjonowania elementów
Nakładanie elementów (z-index): Oto przykład z użyciem z-index: <img style="width: 100px; height: 75px; position: relative; z-index: 2" src="obrazek.jpg" alt="..." /> <img style="position: relative; left: 84px; bottom: 91px; z-index: 1" src="punkt.gif" alt="..." /> Otrzymujemy  <img style="width: 100px; height: 75px; position: relative; z-index: 2" src="obrazek.jpg" alt="..." /> <img style="position: relative; left: 84px; bottom: 91px; z-index: 1" src="punkt.gif" alt="..." />

16 Metody pozycjonowania elementów
Nakładanie elementów (z-index): Kontekst stosu: Dla Kontekstu 1 „z-index: 2” Dla Kontekstu 2 „z-index: 1” Brak przypisanych wartości dla obydwu Kontekstów Z uwagi na wyższy z-index dla kontekstu 1 jego elementy będą przewyższały elementy w Kontekście 2 Brak przypisania z-index’ów powoduje poprawną kolejność elementów

17 Metody pozycjonowania elementów
Oblewanie elementów tekstem (float) selektor { float: sposób } jako "sposób" należy podać: left element ustawiony po lewej stronie, względem elementów sąsiadujących Right element ustawiony po prawej stronie, względem elementów sąsiadujących none element nie sąsiaduje z innymi Polecenia nie można zastosować do elementów pozycjonowanych absolutnie!

18 Metody pozycjonowania elementów
Oblewanie elementów tekstem (float) Przykład: float: none... float: none... float: none... float: none... float: none...float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...