Wcięcia w tekście

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

szukaj: wciecie tekstu kurs css

Póki co potrafisz sprawić, by tekst był wyjustowany lub dosunięty do jednej z krawędzi. 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łaśnie 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>Superważna wiadomość // 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 początku znajduje się element 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ę. 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 linii 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ć po eksperymentuj trochę. To bardzo przydatna funkcja.
4 - ustalam pływanie dla obiektów img zawartych w 'srodek' na 'left'.
5 - grafiki będą umieszczane jedna pod drugą. Dzięki temu właśnie otrzymamy ten ciekawy efekt.
6 - ustalam jednakową wysokość 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. Po eksperymentuj z minusowymi wartościami mergines-ów i padding-u - 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!

Patryk 'yarpo' Jar

szukaj: wciecie tekstu kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!