Rozdział 7.
Dodawanie elementów
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
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