Wstęp do Pozycjonowania
Często możemy spotkać się ze stronami, gdzie zastosowano mnóstwo tabel
w celu umieszczenia wybranego obrazka w odpowiednim miejscu. Przyznam
się, że sam czasami robię coś takiego. Aby osiągnąć upragniony efekt
tworzony jest ogromny obrazek, który pocięty na kawałki tworzy puzzle.
Co zrobić, aby obrazek lub tekst umieścić w wybranym przez nas miejscu
na stronie? Wystarczy wykorzystać CSS. Umiejscawianie w
stylach nazywa się CSS Positioning czyli CSS-P. Elementy HTML możemy
pozycjonować względem strony lub wybranego elementu.
Znajomość CSS-P może znacznie uatrakcyjnić Twoją stronę. Pomoże także
w tworzeniu DHTML.
We wcześniejszych częściach kursu wspomniałem Ci już o "bloku" w CSS.
Blokiem takim może być dowolny znacznik np. <P></P> i cały tekst
zawarty w nim. Wyobraź sobie teraz, że możesz umieścić taki blok w
dowolnym miejscu na stronie. Na tym właśnie polega CSS-P.
Na samym początku powinien zostać określony sposób umiejscawiania
elementu na stronie. Dzięki temu przeglądarka będzie wiedziała jak
traktować dany element. Możemy wybrać jedną z trzech możliwości
przedstawionych poniżej:
- STATIC - położenie elementu nie może być zmienione
- RELATIVE - pozwala na przesuwanie elementu w obrębie naturalnego
położenia elementu na ekranie.
- ABSOLUTE - element jest umieszczany w ściśle określonej pozycji
Właściwości te przypisujemy elementowi POSITION, np. position:
absolute;
Następnie możemy do woli eksperymentować z właściwościami podanymi w
tabeli:
| WŁAŚCIWOŚĆ |
WARTOŚĆ |
UWAGI |
| LEFT, TOP |
auto
dowolna długość (Np. 50px)
wartość procentowa (Np. 25%) |
Właściwość Left lub Top można zastosować gdy position ma
wartość absolute lub relative |
| CLIP |
Auto
Kształt (Przycinanie elementu np. Rect(60 50)) |
Właściwość można zastosować gdy position posiada wartość
absolute lub relative |
| VISIBILITY |
inherit
visibility
hidden |
VISIBILITY określa czy element ma być widoczny na stronie |
| Z-INDEX |
Auto
Dowolna liczba |
Z-INDEX zmienia oryginalny porządek wyświetlania elementów na
stronie - deklaruje kolejność warstw. |
Tak właśnie przedstawia się zestawienie właściwości i wartości
dotyczących pozycjonowania elementów.
Wskazówka...
Aby ułatwić sobie zabawę z pozycjonowaniem najlepiej stworzyć klasy w
stylach. W takich klasach możemy zamieścić tekst lub obrazki np.
<HTML>
<HEAD>
<TITLE>Przykład</TITLE>
<STYLE TYPE="text/css">
.element {
position:absolute;
visibility: visibility;
top: 20px;
left:30px;
z-index: 2;
}
.tekst {
position:absolute;
visibility: visibility;
font-family: verdana;
font-weight: bold;
z-index: 1;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="element">
<IMG SRC="kotek.jpg">
</SPAN>
<SPAN CLASS="tekst">
<P> Witam w kolejnej...</P>
</SPAN>
</BODY>
</HTML>
