Kursy

Pozycjonowanie w CSS

Wstęp do pozycjonowania

Witam w kolejnej części kursu CSS. Jak na razie nauczyliśmy się tworzyć prawidłowo sformatowany tekst, nagłówki itp. Jednak nasuwa się pytanie, jak umieścić to wszystko w odpowiednich miejscach na stronie?

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ć (oczywiście :) 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.

 

Zaczynamy...

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; 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>


Zobacz przykład: http://www.webinside.pl/materialy/rozne/p7.htm

Twoje zadanie domowe to przeanalizować powyższy przykład.

Temat pozycjonowania jest bardzo obszerny. Dzięki temu możemy tworzyć niesamowite efekty! Ale o tym kiedy indziej :).