webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 5

Budujemy tabelę - tworzenie nowych tagów

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: div div kurs css kurs css

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="stylesheet" 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:

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:

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.

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Szukasz profesjonalnej firmy?
Projektowanie stron www.
Zobacz nasze realizacje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org