|
Na tej lekcji odejdziemy od wykonywanego projektu [potem wrócisz do niego sam
i pozmieniasz, co będziesz uważał za konieczne], aby dokładniej zapoznać się z
zastosowaniem "DIVów".
Spróbujemy wykonać stronę z tabelą, ale nie tą zdefiniowaną w HTML -
<TABLE> - tylko taką z DIV.
Kod HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="styleshet" href="style.css" type="text/css">
</head>
<body>
<div>
// 1
<div class="linia">
// 2
<div class="komorka">To jest jedna komorka</div> //
3
<div class="komorka">To jest druga komorka</div> //
3
</div>
// 4
</div>
// 5
</body>
</html>
|
Opis:
1 - Otwieram pierwszą warstwę - możnaby to przetłumaczyć na 'TABLE', gdyż
będzie pełnić identyczne funkcje
2 - Otwieram kolejną warstwę - będzie zastepować tr
3 - Warstwy zastępujące td
4, 5 - zamykam warstwę 'linia' i ogólną
Póki co - bez kodu css to jest to będzie to jedna warstwa - posiadająca w
sobie warstwę, która ma dwie warstwy w sobie - jedna pod drugą. I gdzie ten
efekt! To nie wygląda jak tabela.. Ale dodajmy trochę CSS.
Plik CSS:
div {
border: 1px solid black; // 1
margin:
0;
// 1
padding:
2px;
// 1
width:
300px;
// 1
vertical-align: top;} // 1
div.linia
{
// 2
width: inherit;
// 3
padding: 4px 0 4px 0; // 2
border: 0;
}
// 2
div.komorka
{
// 4
display: inline;
// 5
width: 142px;
} // 4
|
Opis:
1 - tworzę regułę dla zwykłego div. Właśnie ten div "zastępuje"
nam <TABLE>
2 - tworzę regułę dla klasy 'linia', która ma zastąpić <tr>
3 - nowość 'właściwość: inherit' oznacza, że ten element ma
mieć identyczną właściwość jak element nadrzędny dla niego - w tym
wypadku zwykły div [i tak odziedziczył by to, ale chciałem pokazać inną możliwość
- w ten sposób można nadawać kolor linkom <a> umieszczonym
w akapicie. W regule opisującej akapit musi być zawarta definicja koloru textu]
4 - tworzę regułę dla klasy 'komorka'
5 - zmieniam sposób wyświetlania na 'inline', czyli w lini. Dzięki temu dwa
divy będą umieszczone obok siebie.
Popróbuj jeszcze dodając po raz kolejny cały div 'linia' zaraz po zamknięciu
tego pierwszego, ale jeszcze w obszarze warstwy ogólnej. Powinieneś otrzymać
efekt identyczny do dodania nowego wiersza do tabeli.
Mam nadzieję, że już teraz widzisz, że DIV jest jakby pustą kartką na
której możemy narysować co chcemy - tworzyć jakby własne tagi! Powyższy
przykład nie stworzył żadnego nowego tagu - bo przecież tabele już są, ale
dobrze zobrazował możliwości warstw - a to dopiero początek. Zapraszam
dalej.
PS. Jeśli chcesz wprowadzić jakiekolwiek zmiany w poprzednim projekcie możesz
to teraz zrobić. Tamten projekt jest już zamknięty. Teraz zajmiemy się czym
innym.
|
