| Kurs CSS cz. 7 - Wstęp do pozycjonowania | Array Drukuj Array |
| Kursy Webmastera - CSS - kurs | ||||||||||||||||||
| Czwartek, 17 Sierpień 2006 17:05 | ||||||||||||||||||
Wstęp do pozycjonowaniaWitam 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:
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:
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>
|
||||||||||||||||||
| LAST_UPDATED2 |

