Kurs CSS cz. 7 - Wstęp do pozycjonowania PDF  Array Drukuj Array  Email
Kursy Webmastera - CSS - kurs
Czwartek, 17 Sierpień 2006 17:05

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>
 

Autor: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. / www.webinside.pl
LAST_UPDATED2
 
Witamy Serdecznie na naszej stronie webmaster to strona zawierająca skrypty, generatory
i programy,tutoriale do budowy stron oraz wszystkie
informacje jakie potrzebne są do budowy serwisów i
portali, posiadamy obszerne forum oraz rozbudowany
download w którym znajdziesz skrypty i programy nasz
serwis rozwija się bardzo prężnie jeśli chciałbyć do
nas dołączyć po prostu napisz do nas Pozdrawiamy www.webmaster.nietykalni.biz

Szukaj w serwisie