DHTML0121

DHTML0121



Rozdział 7.

Stosowanie pozycjonowania


Stosowanie pozycjonowania statycznego

jako statyczne, chyba że zdefiniujesz je jako umiejscowione względnie lub bezwzględnie. Elementy statyczne, podobnie jak elementy względne omówione w poprzedniej części, są umieszczane w treści dokumentu jeden za drugim. Jednak umiejscawianie statyczne różni się tym, że element statyczny nie może być jawnie umiejscowiony lub przesunięty w inne położenie. Na rysunku 7.5 przedstawiony został dokument wykorzystujący jednocześnie wszystkie trzy' metody umiejscawiania do stworzenia tekstowego kolażu.

Aby zdefiniować element statyczny

1.    stat {

Rozpocznij regułę od podania selektora i otwierającego nawiasu klamrowego.

W przykładzie pokazanym na listingu 7.5 zdefiniujemy klasę stat.

2.    position:

Podaj właściwość position i dwukropek.

3.    static

Aby stworzyć element, którego pozycja nie będzie mogła zostać zmieniona, przypisz właściwości position wartość static.

4.    ; font:45pt helvetica;}

Zakończ definicję za pomocą średnika. Następnie podaj wszelkie inne definicje, które chcesz zastosować, i zakończ regułę za pomocą nawiasu klamrowego.

S Rady

■    Element potomny umiejscowiony jako względny lub bezwzględny nie będzie traktował elementu statycznego jako swojego elementu rodzicielskiego.

■    Nie musisz jawnie definiować elementu jako statycznego; jeśli właściwość position nie zostanie zdefiniowana, to umiejscowienie elementu będzie automatycznie traktowane jako statyczne. Jednak wszystkich zapaleńców ucieszy wiadomość, że jeśli naprawdę chcą, to mogą to zrobić.

Listing 7.5. W tym przykładzie definiujemy trzy klasy, z których każda będzie umiejscowiona w inny sposób

<html>

crr.eta http-eąuiy^Conter.t-Type'*

->conteril "text/html; charset=ISC-8859-2"> <title>Listina 7.5</title>

<style type="text/css">

.stat { position: static; font: bold 25pt. ->Verdana, arial }

.rei { position: relative; top:0px;

->left: 45px; font: bold ISpt times; color: ->red; }

. abs ( position: absoiute; top:25px;

->left:175px; width:150px; font: bo:d 25pt ->Verdana; color: pink; }

</style>

</head>

<body bgcolori-"#FFFFFF”>

<div class*Mstat”>Jest tylko cieńka czerwona linia pomiędzy rozsądkiem i szaleństwem.</div>

<div class="abs">Jest tylko cieńka czerwona linia pomiędzy rozsądkiem i szaleństwem.</div>

<div class-"rel">Jest tylko cieńka czerwona linia pomiędzy rozsądkiem i szaleństwem.</div>

</body>

</html>

element statyc2ny element wrolądny element bezwzględny

Rysunek 7.5. Oto wyniki wykonania kocili z listingu 7.5 - tekst statyczny wyświetlony jest poniżej wierzchołka strony, tekst względny poniżej niego, a tekst bezwzględny ponad oboma poprzednimi tekstami

124


Wyszukiwarka

Podobne podstrony:
DHTML0115 Rozdział 7. Stosowanie umiejscawianiaStosowanie umiejscawiania bezwzględnego Umiejscawiani
Obraz9 (23) Rozdział 8Wskaźniki pozycji społecznej Rozdział siódmy był wprowadzeniem do ogólnej pro
Obraz1 (19) Rozdział 8. Wskaźniki pozycji społecznej Siegel 1971; Treiman 1977; Featherman, Hauser
Obraz3 (18) Rozdział 8. Wskaźniki pozycji społecznej a)    robotników rolnych, b)
Obraz5 (13) Rozdział 8. Wskaźniki pozycji społecznej ładu, porządku i socjalizację jednostek (minis
22330 Strona00212 - 213 - 198. Czujnik stanu wejściowego Jeżeli oznaczymy stan przełęcznika w pozy
DHTML0117 Rozdział 7. Rozdział 7. Stosowanie umiejscawianiaStosowanie umiejscawiania względnego Elem

więcej podobnych podstron