Czasy, kiedy formularze musiały straszyć użytkowników swoim szarym, często niepasującym do reszty strony wyglądem dawno minęły - na szczęście! Teraz prawie każdy obiekt może by pięknie zabarwiony, po najechaniu może się zmieniać kursor itp. Ogólnie wszystko co do tej pory poznałeś przyda się na tej lekcji. Właściwie teraz zaczyna się część kursu, w której będziesz poznawał coraz mniej nowych właściwości, a coraz więcej sposobów ich wykorzystania.

Pola formularza:

{codecitation}<input type="text" name="poletxt" value="To jest pole"> // 1

<input type="submit" name="wyslka" value="Wyślij form"> // 2

<input type="radio" name="wybor" value="opcja1"> // 3

<input type="radio" name="wybor" value="opcja2"> // 3

<input type="checkbox" name="sprawdz" value="ok"> // 4

<textarea name="wpis" cols="12" rows="5">Wielowierszowe pole textowe</textarea> // 5 Wielowierszowe pole textowe{/codecitation}

Opis:
1 - Jednowierszowe pole textowe. Służy do wpisywania krótkich textów, takich jak imię nazwisko, miejscowość itp.
2 - Przycisk submit, służy do wysyłania wypełnionej zawartości formularza. // w tym wypadku kliknięcie na niego niczego nie spowoduje - powyżej widzisz przykładowe pola - nie formularz.
3 - Przyciski typu radio służą do wybierania jednej opcji z całego wachlarza możliwości.
4 - checkbox służy do zaznaczania więcej niż jednej możliwości z całego ich zbioru.
5 - I teraz wielowierszowe pole textowe. Służy do wprowadzania dłuższych łańcuchów znaków - wpisy do księgi gości, czy też wysyłanie e-maila ze strony.

Być może dla kogoś, kto nigdy wcześniej nie miał styczności z formularzami, powyższe wyjaśnienia mogą nie mieć sensu. Jednak jest to kurs CSS, nie html - dlatego będę pokazywał jak zmienić wygląd powyższych obiektów - nie jak tworzyć formularze. Dla zainteresowanych [ kurs tworzenia stron www -> Krok6 -> Formularze ]

Teraz skoro już przypomniałeś sobie krótko sposób budowania pól formularzy czas zacząć je zmieniać.

Zacznijmy od pola textowego:

/* będę tworzył klasę, od ciebie zależy sposób umieszczenia tego na stronie. */
input.przycisk {// 1
border-right: #9B0000 1px solid; // 2
border-top: #9B0000 1px solid;
border-bottom: #9B0000 1px solid;
border-left: #9B0000 1px solid;
font-size: 11px; // 3
background-color: black; // 4
cursor: hand; // 5
color: white; // 6
font-family: tahoma,sans-serif; // 7
height: 19px;} // 8

Opis:
1 - tworzę klasę 'przycisk'
2 - obramowanie - to już było przy tabelach
3 - Określam rozmiar czcionki na 11 px [pixeli]
4 - kolor tła na czarny
5 - jeśli myszka znajdzie się nad tym obiektem, to zmieni wygląd na rączkę [przykład] - nie we wszystkich przeglądarkach
6 - color textu ma być biały
7 - użyj czcionki 'tahoma'
8 - określ wysokość na 19 px [pixeli]
przykład:

Tym sposobem szybko i przyjemnie zmieniliśmy kolor jednowierszowego pola textowego. Jak widziałeś przed klasą wpisałem 'input' oznacza to, że tą klasą mogą być opisane wszystkie obiekty 'input', czyli - patrz na górę strony - pierwsze cztery. Wielowierszowe pole textowe nie zostanie opisane, ponieważ nie jest 'input' (mówiąc najprościej jak się da). A więc trzeba dla niego stworzyć nową klasę:

textarea.pole { // 1
border:0; // 2
font-size: 11px; // 3
color: white; // 4
scrollbar-arrow-color:#9B0000; // 5
scrollbar-base-color: white;
scrollbar-dark-shadow-color: white;
scrollbar-face-color: black;
scrollbar-shadow-color: silver;
background-color: black; }

Opis:
1 - w tym wypadku użylem klasy 'pole' (możesz nie zrobić klasy, ale wtedy będziesz miał wszystkie 'textarea' jednakowe).
2 - obramowanie na zero, czyli nie ma być w ogólne widoczne
3 - rozmiart textu na 11px [pixeli]
4 - kolor textu biały
5 - w wielowierszowych polach textowych występują paski przewijania, ustalmy więc ich kolor. Jeśli tego nie zrobimy przyjmie kolor taki jak scrollbar na stronie (w przykładzie u góry - biały).
6 - tło ma być czarne
przykład:

Jak już pewnie zauważyłeś wiele rzeczy z poprzednich lekcji się powtarza. Ale to jeszcze nic! Poczekaj do lekcji o akapitach(!).

Zadanie dla ciebie:

- stworz stronę 'formularz.htm' [skopiu stronę index i zmień nazwę]
- umieść ją w folderze, w którym masz wszystkie inne strony z tego kursu
- popróbuj na wszystkich obiektach, niech każdy ma swoją własną klasę, ale te właściwości, które się powtarzają umieść w jednym 'input' - skorzystaj z dziedziczenia - miejsce trzeba oszczędzać!

Na stronach wykonanych przy użyciu html-a często text nie jest zbyt piękny; przyssany do krawędzi, mały, nieczytelny. Gdy zaglądamy w kod okazuje się, że jego wygląd w ogóle nie jest zdefiniwany:-( Nie wygląda to dobrze. I tu po raz koleny z pomocą przychodzi CSS. Może to stwierdzenie jest już nudne, ale w sposób szybki i łatwy można to zmienić:-).
Jak sądzisz, ile tabelek jest na tej stronie? Policz. A oto wynik=2+2-4+1 :-)
tak tylko jedna! Jedna tabelka z jedną komórką, reszta zrobiona w CSS w 5 min. Może nie jest to najpiękniejsza strona jaką w życiu widziałem, ale na pewno jest przejżysta i schludna - a to dwie podstawowe cechy dobrej strony.

Więc czas by pokazać Ci co zrobić, by równie szybko twoja strona nabrała rumieńców.

Na początek określimy wygląd pierwszej kolumy drugiej tabeli (o przypisanej klasie 'menu'). Zrobimy to wg mojego projektu. Potrzebujemy zatem 2 nowych klas:

P.menu1 { // 1
margin: 10px 10px 0 10px; // 2
font-size: 9pt; // 3
padding: 2px 20px 2px 0; // 4
font-weight: bold; // 5
text-align: right; // 6
font-family: verdana,tahoma,helvetica,sans-serif; // 7
background-color:#B1BBBE; // 8
border-left: 1px solid white; // 9
border-right: 1px solid white;
border-bottom: 1px solid white;
border-top: 1px solid white;}

P.menu2 {// 1
margin:0 10px 0 0; // 2
font-size: 9pt; // 3
padding: 0; // 4
text-align: right; // 6
font-family: verdana,tahoma,helvetica,sans-serif; // 7
border-right: 1px solid white;} // 9

Opis:
1 - Tworzę dwie klasy 'menu1' i 'menu2'.
2 - Coś nowego - margin, oznacza odległość od obramowania (text także może je mieć!) na zewnątrz. W przeciwieństwie do padding, które określa odległość od obramowania do wewnątrz (patrz rys.3).
3 - określam rozmiar czcionki czcionka[font]-rozmiar[size]. Najczęściej podaje się w pixelach[px] lub punktach[pt] (zaleca się jednak stosowanie innych jednostek niż punkty).
4 - o tym było już wcześniej - padding - odległość obiektu od obramowania - prawie każdy obiekt może mieć obramowanie (nawet text, link, grafika). Opisywane w kolejności: góra prawa dół lewa lub jeśli wszystkie wartości są takie same jedną liczbą. Pamiętaj, że tylko 0 może nie mieć jednostki.
5 - określam jakiej "wagi" [weight] ma być text [font] na pogrubiony [bold]. Inne możliwości: normal, bolder, lighter.
6 - wyrównanie textu do prawej.
7 - określam rodzaj czcionki: czcionka[font]-rodzaj[family]: pierwsza, druga, trzecia. Podaje się kilka czcionek, po to by w przypadku, kiedy jakaś czcionka nie była zainstalowana na komputerze internauty nie wchodziła standardowa Times New Roman, tylko następna z kolejki.
8 - kolor tła zabarwi powierzchnię pod textem i pod padding. Miejsca pod marginesami [margin] nie zabarwi.
9 - obramowanie textu(!) Też się zdziwiłem kiedy o tym usłyszałem. Efekt możesz ocenić na tej stronie. Spójrz na lewą lub prawą (podwójną) ramkę - jedna linia z tabeli, druga z textu.

Wstaw teraz akapity, z tymi klasami na stronę wg przykładu:
Dodaj teraz te dwie nowe klasy do pliku 'style.css'. Na razie nie wiele zmienią, ale będą niezbędne do przejścia przez nastepną lekcję.

Zmiany w 'index.htm':

<tr>
<td class="menu">
<p class="menu1">Menu:</p>
<p class="menu2">To miejsce wypełnisz na następnej lekcji</p>
</td>

dalsza część strony

Jeśli włączasz teraz swoją stronę 'index.htm' to na dole jest jeszcze tak brzydko wykończona (właściwie, niewykończona). Zaraz to zmienimy - tu zrozumiesz po co (m.in) stworzono możliwość obramowania textu.

P.stopka { // 1
margin: 0;
padding: 10px 1px 1px 1px;
font-family: arial;
font-size: 7pt;
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid white;
background-color: #AFB4C0;}

Opis:
* - nie będę tu się za wiele rozpisywał, bo przed chwilką dokładnie opisywałem każdy element. Tu jedynie wartości są inne.
1 - nowa klasa 'stopka'.
Teraz możesz wykończyć swoją stronę. W ostatnią - najniższą tabelę (jej jedyną komórkę) wpisz dowolny text typu
<p class="stopka">(c) yarpo2004</p>

Teraz kolej na określenie wyglądu głównego txtu na stronie. Do tego będą potrzebne także 2 klasy (oczywiście możnaby było to zrobić w jednej, ale tak poznasz ciekawy efekt).

p.tytul {
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333;
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: justify;
margin: 10px 0 0 10px;
padding: 5px 10px 5px 10px; }

Opis:
Wszystkie właściwości powinieneś już znać. Zauważ, że nie określiłem dolnego obramowania, a dolny margines [margin:10px 0 0 10px;] ustaliłem na zero. Dzięki temu boczne obramowania (tej i niższej klasy) jakby "skleją" się ze sobą.

P.tresc {
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #333333;
font-family: arial;
font-size: 9pt;
text-align: justify;
margin: 0 0 10px 10px;
padding: 5px 10px 5px 10px; }

Opis:
Tu już możesz zauważyć jak to będzie zrobione. Można to porównać do garnka z pokrywką - klasa 'tytul' jest "pokrywką" klasy 'tresc'. Może teraz jeszcze za bardzo nie rozumiesz, ale kiedy popróbujesz to zrozumiesz. Pozmieniaj wartości 'border' i 'margin'. Po przeanalizowaniu rezultatów powinieneś już wszystko zrozumieć.

Mam nadzieję, że już dokonałeś zmian w pliku 'style.css', ale nadal trzeba uzupełnić zawartość 'index.htm'.
Wykonaj wg przykładu:

<td class="txt">
<p class="tytul">Tu nagłówek</p>
<p class="tresc">wpisz tu dowolny własny text</p>
</td>
</tr>

Jest jeszcze jedno miejsce, które przeważnie na stronach wypełnia grafika - miejsce na banner. Na twojej stronie tworzonej podczas tego kursu jest to jedyna komórka pierwszej tabeli (z przypisaną klasą 'gorna'). Stwórz teraz nową klasę i wpisz w komórkę: <p class="gora">WWW.TwojaStrona.pl</p> - lub dowolny inny txt.

Kod CSS

p.gora { // 1
font-size: 15pt;
padding: 25px 0 25px 0;
font-family: verdana,tahoma,helvetica,sans-serif;
text-align: center;}

Opis:
1 - Nowa klasa 'gora'.
Text bedzie dosyć duży - 15pt, wyśrodkowany. Odległość od górnej granicy wynosi 25, prawe - 0, dolej 25, lewej - 0 [pixeli], rodzaj czcionki 'verdana', jeśli nie będzie takiej czytaj tahoma itd.

Teraz masz baaardzo trudne zadanie - musisz wprowadzić zmiany na (aż) trzech stronach! Ale sobie poradzisz. Oczywiści możesz pozmienić pewne fragmety, dostosowując je do własnego gustu - to przecież twoja strona. (nie zmieniaj jednak struktury strony - rozmieszczenia i ilości tabel, bo będzie Ci potem trudno się odnaleźć).

W linku do tej lekcji widnieje napis 'akapit, czcionka'. O akapicie napisałem już wiele - teraz czas na czcionkę.

Może najpierw wyjaśnię na czym polega różnica między nimi. Otóż akapit <p> odnosi się do pewnej spójnej całości. W akapit nie można wstawić w innego akapitu, ale można wstawić <font>[czcionkę]. Czcionka opisuje jedynie jakiś wybrany fragment textu. Akapit (o ile nie zostanie to zmienione) automatycznie zajmuje 100% dostepnego miejsca, podczas gdy font zajmuje jedynie (jeśli nie zostanie to zmienione) fragment szerokości strony, na którym jest text. Font posiada prawie wszystkie właściwości akapitu, dlatego nie będę tu omawiał żadnego przykładu, bo myślę, że wszystko jasne. Popróbuj:-)

Uwaga: Znacznik <font> został usunięty ze specyfikacji HTML. Oznacza to, że nie należy go używać. W jego zastępstwie należy stosować <span>. O tym znaczniku więcej w dalszej części kursu.

Będzie to dział, który chyba najbadziej się każdemu z was przyda. Pamiętam, że pierwszy raz użyłem CSS do zmiany wyglądu linków. Na tej lekcji nauczysz się nie tylko jak można spowodować zmianę koloru textu, ale również jak można osiągać bardzo wciekawe efekty, jak zawsze, przy minimalnym nakładzie pracy.

Będziemy dalej kontynuować pracę nad twoją stronką.
Stwórzmy więc najpierw bazę dla naszych linków, czyli zdefiniujmy wygląd samego a [bez klasy].

Dodaj do pliku 'style.css':

a {
text-decoration:none; // 1
color: black} // 2

Opis:
1 - Określam dekorację textu [text-decoration] na 'żadna[none]'. Domyślnie linki są podkreślone [underline]. Inne możliwości: line-trough[przekreślnenie], overline[linia nad].
2 - Określam kolor linków na 'czarny'. Gdybym tego nie zrobił przyjęłyby kolor określony ustawieniami przeglądarki (najczęściej fioletowy).

Dzięki temu, że nie użyłem tu klasy wszystkie 'a' będą miały te właściwości wyżej opisane - dziedziczenie.

Teraz czas, aby opisać linki, które będą w menu po lewej w lewej komórce środkowej tabeli.

Dodaj do pliku 'style.css':

a.lewe { // 1
border-left: 1px solid white; // 2
border-bottom: 1px solid white;
width:90%; // 3
background-color:#CBD1D3; // 4
display: block; } // 5

a.lewe:hover { // 6
background-color: white;} // 7

Opis:
1 - Tym razem tworzę klasę o nazwie 'lewe' - odziedziczy ona jednak wszystkie właściwości 'a'.
2 - Obramowanie (jak widzisz wszędzie je stosuję)
3 - Określam szerokość tego linku na 90% dotępnego dlań miejsca. Gdybym tego nie zrobił zająłby tylko powierzchnię pod textem ujętym między <a> txt</a>
4 - Okreslam kolor tła.
5 - Określam typ wyświetlania na 'block' [element blokowy]. Domyślnie jest 'in-line' [wyświetlane w lini]
6 - tworzę pseudoklasę ':hover', która będzie wywołana, kiedy użytkownik najedzie nad obszar linku. Pseudoklasa ta, odziedziczy wszystkie właściwości od 'a' i klasy 'lewe'...
7 - ... dlatego mogą przypisać tylko jedną właściwość zmieniającą kolor tła. Po najechaniu na link (text/grafikę lub na obszar ujęty 'width: 90%' kolor tła ulegnie zmianie).

Nadszedł czas, aby to wszystko jakoś ze sobą połączyć(twoją stronę i nowe klasy).

Otwórz plik 'index.htm' i znajdź pierwszą od lewej komórkę drugiej (środkowej tabeli).
Powinno to wyglądać mniej-więcej tak:

<td class="menu">
<tr>
<p class="menu1">Menu:</p>
<p class="menu2">
<A href="index.htm" class="lewe">O mnie</a>
<A href="index.htm" class="lewe">Ważne</a>
<A href="index.htm" class="lewe">Formularz</a>
<A href="index.htm" class="lewe">Kontakt z autorem</a>
<A href="index.htm" class="lewe">www.yarpo.prv.pl</a></p>
</td>
<td class="txt">

Fragmenty kodu o kolorze czarnym powinny się już znajdować w kodzie stron [jest to druga tabela, pierwsza komórka od lewej]. Nowe fragmenty są niebieskie. Podobnych zmian dokonaj na wszystkich stronach, które dotąd zrobiłeś. Powinny wyglądać prawie tak samo. Liczba linków jest zależna od twojej woli. Poprobuj. Zrób jedną stronę o sobie (skopiuj 'index.htm' zmień jego nazwę i napisz kilka zdań o własnej osobie), drugą z listami - np. lista zakupów (tu nie chodzi o treść), kolejną z formularzami (nie będą działać, gdyż wstawisz jedynie pola, ale popróbuj), następny link niech uruchamia program pocztowy [ <a href="mailto:twoj@adres.pl class="lewe">Kontakt</a> ]. Możesz oczywiście zrobić jeszcze więcej stron, ale sądzę, że starczy jeśli będzie ich 3-4. Oczywiście, aby linki odnosiły się do nich musisz wpisać href="xxx", gdzie xxx - nazwa strony.

>------Rada-----<

Nie musisz za każdym razem pisać od nowa kodu. Stwórz jedną stronę, która będzie mieć wszystko na swoim miejscu, a nastepnie skopiuj ją x razy i pozmieniaj jedynie nazwy nowootrzymanych plików.
>---------------<

SPAN i DIV używa się dziś już bardzo często. Są to dla tagi, które prawie nie mają własnych właściwości. Znacznik DIV jest często używany przy tworzeniu stron opartych o warstwy [w dalszej części kursu]. Znacznik SPAN właściwie nie posiada własnych właściwości [np. <b> pogrubia]. Aktualnie stosuje się go zamiast <font>, a także w innych przypadkach, gdy chcemy określić jakiś fragment strony. DIV stosuje się do większych części witryny.

Przykład:

<span
style="color: red;
background-color: blue;">
</span>

Efekt: Hello world!

Gdyby to był div zająłby 100% szerokości i nie "zmieściłby" się w akapicie. Zostałby jakby wypchniety. A to dlatego, że jest nadrzędnym tagiem dla P - to akapit powinien być na warstwie, nie warstwa na akapicie. Podobnie byłoby, gdybyśmy spróbowali umieścić na akapicie formularz <form>).

Oczywiście dla span i div także można tworzyć klasy.

Na tej lekcji nauczyłeś się bardzo przydatnych tagów html, które są strasznie przydatne w tworzeniu stron za pomocą CSS - o tym się jeszcze przekonasz.
Na twojej stronie nic się nie zmieniło, ale wiedza, którą tu zdobyłeś będzie wykorzystana w dalszej części kursu.

Naprawdę warto poszukać trochę więcej nt. budowania stron przy pomocy warstw - to jest przyszłość.

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.

Inne podejście do menu

Już raz na tym kursie tematem przewodnim były hiperłącza - teraz jednak poznasz nowe - bardzo ciekawe efekty, a także najnowsze sposoby na tworzenie list nawigacyjnych. Zobaczmy przykłady:

Kod XHTML:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div id="prawa"></div>
<div id="lewa">
<h2>_menu:</h2>
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul> 
</div>
<div id="srodek">
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul>
</div>

</body>
</html>

Opis:
1 - do warstwy 'lewa' wstawiam nagłowek drugiego stopnia <h2>, a także listę. Każda pozycja tej listy to kolejna pozycja naszego menu.
2 - w warstwie 'srodek' także wstawiłem identyczną listę. Wydawałoby się, że muszą wyglądać tak samo... Poczekajmy na kod CSS:-)

Plik CSS:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2 {
background-color: silver;
letter-spacing: 0.5em;       // 6
margin: 0 0 2px 0;
padding: 5px;
font-weight: bold;
font-size: 13px;
font-family: verdana;
border: 1px solid black;}

div#lewa ul {               // 1
padding: 0;                 // 2
margin: 0;                  //
width: 150px;               //
list-style-type: none;      //
font-weight: bold;          //
font-size: 12px;            //
font-family: verdana; }     // 2

div#lewa ul li {             // 3
margin: 0 0 2px 0;           //
border: 1px solid black;     //
background-color: silver; }  // 3

div#lewa ul a {              // 4
display: block;              //
color: black;                //
padding: 5px 15px 5px 15px;  //
text-decoration: none; }     // 4

div#lewa ul a:hover {           // 5
color: gray;                    //
background-color: #cdcdcd;      //
background-image: url(1.gif);   //
background-position: 120px 50%; //
background-repeat: no-repeat; } // 5 

Opis:
1 - jest to dla Ciebie coś nowego. Zamiast tworzyć klasy, opisuję położenie danego obiektu. Ta reguła jest ważna dla wszystkiech ul [list], które są zawarte w warstwie 'lewa'. Liczba selektorów może być większa, np. 'div#cd table tr td p' - w tym wypadku opisywane byłyby właściwości <p>.
2 - reguła dla ul w 'lewa': odległości na 0, szerokość 150px, brak wypunktowania listy, czcionka pogrubiona, rozmiar 12px, rodzaj verdana.
3 - reguła dla li znajdującego się w ul w 'lewa': marginesy (dól 2px, reszta 0), obramowanie 1px, tło siwe.
4 - reguła dla hiperłącza w liście w 'lewa': wyświetlane jako element blokowy, czarną czcionką, padding 5px góra i dół, 15px lewa i prawa; bez dekoracji.
5 - reguła dla hiperłączy najechanych: tekst szary, kolor tła jasny siwy, wczytaj grafikę w tło, umieść ją 120px od lewej granicy <a> i 50% wysokości, wyświetl tylko raz - nie powtarzaj [domyślnie tło się powtarza]. Jest to bardzociekawy efekt - po najechaniu w tle pojawia się grafika - wcześniej jej tam nie było. Grafikę możesz pobrać tu.
6 - odległość między literami w wyrazie. Ustawiona na 0.5em.

W taki oto sposób mamy opisane lewe menu. Ale w kodzie mamy jeszcze raz cos podobnego - tylko w innej warstwie, a nasze opisy nie będą działać na listę z warstwy 'lewa'. Trzeba więc dodać trochę kodu:

Uzupełnij plik css:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2, div#lewa ul li {   // 1
margin: 0 0 2px 0;
border: 1px solid black;
background-color: silver;}

div#lewa h2 {                                    // 2
letter-spacing: 0.5em;
padding: 5px;
font: bold 13px verdana; }                       // 3

div#lewa ul, div#srodek ul {                     // 4
padding: 0;
margin: 0;
list-style-type: none;
font: bold 12px verdana; }

div#lewa ul {                                    // 5
width: 150px; }

div#lewa ul a {
display: block;
color: black;
padding: 5px 15px;
text-decoration: none; }

div#lewa ul a:hover, div#srodek ul a:hover {
color: gray;
background-color: #cdcdcd; }

div#lewa ul a:hover {
background-image: url(1.gif);
background-position: 120px 50%;
background-repeat: no-repeat; }

div#srodek ul li {
background-color: #cdcdcd;
border: 1px solid black;
display: inline; }                                              // 6

div#srodek ul a {                                               // 7
color: black;
padding: 0px 15px 1px 15px;
text-decoration: none; }

Opis:
1 - jednocześnie opisuje właściwości dla dwóch elementów. elementów tych może być znacznie więcej np. 'p, h1, h2, u, ul { } '. Każdy kolejny element nalezy wpisać po przecinku. Pozwala to zaoszczędzić kilka linijek kodu - warto skorzystać:-).
2 - ponieważ h2 miał tylko 3 właściwości zbieżne z li w nowej regule wpisuję te właściwości - czesto stosowany zabieg. Pamietaj, że ani li od h2 ani odwrotnie nie przejmuje jego właściwości domyslnych czy opisanych gdzie indziej.
3 - teraz bardzo ciekawy skrót. Zastępuje on: font-weight; font-size; font-family'. Więcej nt. skrótów w lekcj.i Skrótowy zapis właściwości
4 - kolejna reguła dla dwóch elementów na raz. Własciwoe można by ją zastąpić regułą dla samego <ul>, ale to mogłoby Cię lekko zbić z tropu.
5 - ponieważ tylko ul z 'lewa' miało określoną szerokość wyrzuciłem tą właściwość do osobnej reguły.
6 - w opisie pozycji listy [li] z 'srodek' zmieniłem z domyslego 'display: list-item' na 'inline', czyli w lini. dzięki temu z listy pionowej wyjdzie ładna lista pozioma - to menu będzei ułożone w poziomie...
7 - ...dlatego z opisu hiperłaczy musiałem wyrzycić 'display: block'

Jeśli już wszystko pozapisywałeś i włączyłes tą stronę zapewne widzisz, że na środku jakby brakuje treści, a po prawej w ogóle jej nie ma... To sie zmieni juz na następnej lekcji. Zapraszam dalej!