DHTML0122

Umiejscawianie w CSS

Listing 7.6. Pierwszy akapity został umiejscowiony względnie i ustawiony przy lewej krawędzi okna przeglądarki, natomiast drugi akapit został umiejscowiony bezwzględnie

hŁmi>

<head>

' TT;s z a h r; t p-equ i v= "Gon t:en t -Type " ->conl:erit="teKli/htTni; charser=IS0-8859-2"> <titl.e>Listing 7.6</title>

</head>

body bgcolor^^u#FFFFFF">

ięiiyku HTML definiuje s.ię po kolei wszystkie wiersze tabeli, a każdy wierszy zawiera definicję wszystkich zawartych w nim komórek. Definiowanie tabeli zaczynamy od jórnego wiersza i określamy wszystkie jego komórki, następnie ... </p>

•P sv.yle=”position: absolute;">

Paro znaczników TR i /TR służy do tworzenia wiersza. Każdy wiersz ma komórki, które definiuje się za pomocą pary znaczników TD . /TD, zawartych między znacznikami TH i /TR

... </p>

</bcdy>

/htmi>

Eile Edit Yfcw Qa Coir,n**ijtć.tor

i / \ 4 c * ',m

Homr 5fy..ti fint Sticuńy MŚtH

W języku HTML definiuje się

po.tolci wszystkie wiersze

tabeli, a każdy z wierszy ^para mączników TR i /TR. służy do

zawiera definicję wszystkich tworzenia wiersza. Każdy wiersz ma zawartych w mm komórek. komórki które definiuje się za Definiowanie tabeli zaczynamy Pomocą, par; znaczników TD i /ID. od górnego wiersza i określamy zawartych między znacznikami TR i f wszystkie jego komórki. R*. ^w przypadku komórek

następnie dn® 'nera i jego nagłówka używamy znaczniltów H i

komórki, ltd Kolumny /TH (ramiast It>) Zawartość

obleśne są automatycznie w komórek nagłówków jest zwykle j oparciu o liczbę komórek w wyświetlana pogrubioną czcionką J każdym z wierszy.

Jim ^

Rysunek 7.6. Akapit bezwzględny cały czas jest zawijany wokół akapitu względnego, gdyż w kodzie przedstawionym na listingu 7.6 nie ustawiono marginesów

Tworzenie

pływających elementów

0 określonym położeniu

W rozdziale 6. dowiedzieliśmy się, w jaki sposób można tworzyć pływające elementy. Możliwości te pozwalają na zawijanie tekstu w jednym elemencie wokół innego elementu. Jednak zdefiniowanie położenia elementu jako bezwzględnego (patrz poprzednia część rozdziału) określi, czy tekst będzie mógł otaczać ten element.

Działanie otaczania elementów umiejscowionych

Poniżej podane zostały informacje dotyczące interakcji elementów pływających

1 umiejscawianych, które warto zapamiętać:

• jeśli podana została właściwość position:absolute; i określone zostały marginesy (left, top) lub właściwość width, to tekst w elemencie umiejscowionym nie będzie otacza! innych elementów;

• jeśli podana została właściwość

po5ition;absolute; lecz nie zostały określone

ani marginesy, ani właściwość width, to inne elementy będą otaczały dany element, jak to pokazano na rysunku 7.6;

• inne elementy nigdy nie będą otaczały elementu umiejscowionego bezwzględnie. (Nie jest to niestety dobre, gdyż byłoby to przydatnym narzędziem projektowania, pozwalającym na umieszczanie cytowanych fragmentów pomiędzy kolumnami tekstu.

Tworzenie pływających elementów

125