Wcięcia w tekście

Póki co potrafisz sprawić, by tekst był wyjustowany lub dopsunięty do jednej z krawęddzi. Możesz także nadać całemu akapitowi większy lub mniejszy margines - ale nie potrafisz sprawić, aby kilka linijek tekstu było lekko wciętych... I tego włanie teraz się nauczysz.

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">
<p><span>Superważna wiadomość</span>  // 1
To jest naprawdę ważna wiadomośc, tak ważna,
że nawet nie moge jej tu napisać:-)</p>
<p><span>Imieniny:</span>
Dziś imieniny obchodzą Bonifacy i Kunegunda</p>
</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>

<h1>To jest strona</h1>                   // 2
<p><img src="i.gif" alt="" width="40" />  // 3
To jest tekst - skopiuj go 40 razy, albo daj jakiś długi własny</p>
</div>

</body>
</html>

Opis:
1 - do warstwy 'prawa' wstawiam 2 akapity. W obu na poczatku znajduje się lement span.
2 - do warstwy 'srodek' wstawiam nagłówek 1 stopnia. Będzie się bardzo ładnie łączył z menu [ale nie w MSIE - ta przeglądarka nie obsługuje poprawnie CSS].
3 - Wstawiam akapit. Na samym początku tego akapitu wstawiam grafikę [pobierz]. Skopiuj kod odpowiedzialny za wstawienie tej grafiki i wklej go jeszcze z kilka razy, za każdym razem jednak zmniejszaj wartość 'width'. Aby efekt był widoczny umieść także więcej tekstu w tym akapicie [co najmniej z 10 linijek].

Plik CSS:

/* znajdź regułę div#lewa i zmień */
div#lewa {
float: left;
width: 200px;
position: absolute; }   // 1

/* a nastepnie dodaj na końcu pliku: */
div#srodek h1 {
background-color: silver;
margin: 0 0 2px 0;
padding: 5px;
font: bold 15px verdana;        // 2
border: 1px solid black; }

div#srodek p {
background-color: silver;
margin: 10px 0 4px; 0;
padding: 5px;
font: normal 11px verdana;
border: 1px solid black; }

div#prawa p {
background-color: silver;
margin: 10px 0 4px; 0;
padding: 5px;
font: bold 11px verdana;
border: 1px solid black; }

div#prawa p span {
margin: -3px -5px 3px -5px;     // 3
padding: 3px;
border: 0;
background-color:  #cdcdcd;
display: block;
text-align: center; }

div#srodek img {
float: left;             // 4
clear: left;             // 5
margin: 0 3px 0 0;
height: 14px; }          // 6

Opis:
* - opisuję jedynie rzeczy świeże i całkowicie nowe */ 1 - nadając warstwie 'lewa' position: absolute sprawiłem, że została ona jakby wycięta z układu strony [na razie nie zastanawiaj się jak to działa - o tym na następnych lekcjach]. Musiałem to zrobić, gdyż grafiki także miały ustawione float na 'left', przez co były spychane poniżej lini końca 'lewa'.
2 - czcionka pogrubiona, 15px, verdana.
3 - ustalam minusowe marginesy. Normalnie marginesy oddalają, jednak jeśli przyjmują wartości minusowe przybliżają - aby to lepiej zrozumieć poeksperymentuj trochę. To bardzo przydatna funkcja.
4 - ustalam pływanie dla obietów img zawartych w 'srodek' na 'left'.
5 - grafiki będą umieszczane jedna pod drugą. Dzięki temu właśnie otrzymmy ten ciekawy efekt.
6 - ustalam jednakową wysokośc dla wszystkich grafik 14px. W kodzie strony deklarujesz jedynie szerokość grafik.

Pousuwaj niepotrzebną numeracją lini i zapisz to do odpowiednich plików. Następnie uruchom przeglądarkę [na MSIE efekt nie będzie pełny] i obserwuj wyniki swojej pracy. Poeksperymentuj z minusowymi wartościami merginesów i padding - to naprawdę bardzo przydatne [znowu w MSIE nie jest to poprawnie czytane..]. Jeśli już wszystko zostało poprawnie zrobione - zapraszam dalej. A na następnej lekcji to co w warstwach najlepsze - pozycjonowanie!