Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/36-wciecia-w-tekscie.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Wcięcia w tekście |
Wpisany przez Patryk yarpo Jar | |||
piątek, 18 września 2009 02:55 | |||
Wcięcia w tekściePó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 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. 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! Tags:
|