DHTML0119

DHTML0119



Rozdział 7.

Dodawanie elementów


Dodawanie elementów bezwzględnych do elementów względnych

Zobaczyliśmy już, w jaki sposób elementy mogą zostać umieszczone na ekranie w ściśle określonym (bezwzględnym) miejscu. Element umiejscowiony bezwzględnie może być zagnieżdżony wewnątrz innego elementu, umiejscowionego względnie. W takim przypadku element bezwzględny będzie umiejscawiany nie względem lewego, górnego wierzchołka okna przeglądarki, lecz lewego górnego wierzchołka elementu względnego.

Na rysunku 7.4 słowo „Tabele” zostało umiejscowione bezwzględnie, jednak jest ono zagnieżdżone w elemencie umiejscowionym względnie. A zatem słowo to nie będzie wyświetlone na samej górze strony, lecz opuszczone o 15 pikseli w dół, razem ze swoim elementem rodzicielskim.

Aby zdefiniować element umiejscowiony bezwzględnie wewngtrz elementu umiejscowionego względnie

1.    .relElement {position: relative;

->margin-top:15px;}

W arkuszu stylów stwórz klasę umiejscowioną względnie, jak pokazano

na listingu 7.4. Przedstawiona klasa będzie

miała górny margines o wysokości 15 pikseli.

2.    .title {position :absolute; font-size:

->36px; color: #999999;}

Zgodnie ze swoimi potrzebami zdefiniuj elementy umiejscawiane bezwzględnie. Przykładowa reguła spowoduje wyświetlenie elementu w lewym górnym rogu elementu rodzicielskiego, poza tym tekst elementu będzie duży i szary.

Listing 7.4. W tym przykładzie została stworzona klasa o nazwie relElement, która może zostać umiejscowiona względnie w stosunku do innych elementów na ekranie, nawet pomimo tego że jej własna zawartość będzie umiejscowiona bezwzględnie

<html>

<head>

<meta http-equiv="Content-Type" -»content="text/html; charset«ISO-8859-2,,> <title>Listinq 7.4</title>

<style type»"text/css">

.relElement { position: relative; margin-—»top: 15px; )

.tytuł { position: absolute; font-size: -*36pt; color: #AA9999; }

</style>

</head>

cbody bgcolor="#FFFFFF">

<div class="relElement">

<span class="tytuł">Tabe1e</span>

<p>W języku HTML definiuje się po kolei wszystkie wiersze tabeli, a każdy z wierszy zawiera definicję wszystkich zawartych w nim komórek. Definiowanie tabeli zaczynamy od górnego wiersza i określamy wszystkie jego komórki, następnie drugi wiersz i jego komórki, itd. Kolumny obliczane są automatycznie w oparciu o liczbę komórek w każdym z wierszy.</p> </div>

</body>

</ntml>

122


Wyszukiwarka

Podobne podstrony:
DHTML0036 Rozdział 1. Dodawanie CSS do dokumentu HTML-owego Głównym zastosowaniem CSS jest definiowa
DHTML0111 Rozdział 6.Informowanie elementu • nonę, które spowoduje, że w przeglądarkach CSS element
DHTML0125 Rozdział 7. Przycinanie elementuPrzycinanie elementu W odróżnieniu od określania właściwoś
DHTML0115 Rozdział 7. Stosowanie umiejscawianiaStosowanie umiejscawiania bezwzględnego Umiejscawiani
DHTML0089 Rozdział 6.Pojęcie bloku elementu Określenie element jest używane do odwoływania się do ró
DHTML0040 Rozdział 1. Rozdział 1. Dodawanie komentarzy do CSSDodawanie komentarzy do CSS Arkusze sty
DHTML0091 Rozdział 6. Określanie marginesów elementuOkreślanie marginesów elementu Właściwość margin
DHTML0095 Rozdział 6. Określanie wypełnieniaOkreślanie wypełnienia wokół elementu Na pierwszy rzut o
DHTML0117 Rozdział 7. Rozdział 7. Stosowanie umiejscawianiaStosowanie umiejscawiania względnego Elem
DHTML0127 Rozdział 7. Definiowanie porządku wyświetlaniaDefiniowanie porządku wyświetlania Różne ele
5 (1790) Rozdział 6. ♦ Okienka dialogowe z karty Dialogs 85 //zapisanie elementów listy do pliku pro
7 1.2. CIAŁO LICZB ZESPOLONYCH dodawania jest (0,0), a mnożenia (1,0). Elementem przeciwnym do (a, b
Elementy psychoterapii1 Rozdział XIIELEMENTY PSYCHOTERAPII Psychoterapia należy do najstarszych spo
ALG2 192 Rozdział 7. Algorytmy przeszukiwani; gdy maksymalna ilość elementów należących do pewnej d

więcej podobnych podstron