|
Napisał Patryk Jar (2061 odsłon)
|
|
11.01.2006 13:10 |
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!
|
