webmaster webmastering webdesign

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

Wcięcia w tekście

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

szukaj: wciecie tekstu wciecie tekstu kurs css 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:

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:

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

Zagadnienia poruszane w tej części kursu:

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

 

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