Unieszkodliwianie jest jednym z kluczowych koncepcji CSS. Bez zrozumienia tego zasady nie można tworzyć stron internetowych opartych na CSS. Unieszkodliwianie można ładnie przetłumaczyć jako „pływanie”, co dobitnie to ujmuje. Ostatecznie unieszkodliwianie oznacza po prostu, że element układa się z lewej lub prawej strony obok innego elementu (normalnie element znajdowałby się poniżej innego elementu).
Pierwszy przykład ma to zilustrować.
<p><img src="obraz.jpg" /> W tym zestawie znajduje się 12 form własnych, które możecie użyć w swoich ulotkach, tłach itp. Formy dzielą się na 18, 21 i 24 pasy oraz różne szerokości promieni. Te predefiniowane ustawienia są dobrym fundamentem do uzyskania ładnych efektów w swoich układach i obrazach.</p>
Tutaj zdefiniowano akapit. Wewnątrz tego akapitu znajduje się obraz i zwykły tekst.
Podgląd wyniku pokazuje, że obraz jest osadzony w tekście.
Teraz wchodzi do gry cecha float.
img { float: left;}
Ponownie spójrzmy na wynik.
Tutaj obraz został unieszkodliwiony. Tekst płynie zatem wokół obrazu.
Atrybutowi float można przypisać wartości left i right, aby pozostawić element unoszący się na lewo (float: left) lub prawo (float: right). "Możecie także od razu zastosować float: right do obrazka.
W tym przypadku zachodzą trzy rzeczy:
• Grafika jest wyciągnięta z normalnego przepływu.
• Zostaje przeniesiona w elementie p całkowicie na górę.
• Wyświetlana jest tak daleko w prawo, jak to możliwe.
Spójrzmy na dotychczasowe wyniki, które wyraźnie pokazują, że to jeszcze wygląda niezbyt ładnie. Faktycznie brakuje odstępów między obrazem a otaczającym go tekstem. Dostosujmy syntaksę w ten sposób:
img {
float: left;
margin-right: 20px;
}
Obrazowi przypisano margines prawy równy 20 pikselom. To daje taki efekt optyczny:
Trochę poeksperymentujcie z odstępami marginesu.
Zakończenie unieszkodliwiania
Znowu wracając do przykładu z obrazem. Rozszerzam składnię o dodatkowy akapit tekstu.
<p><img src="obraz.jpg" />W tym zestawie znajduje się 12 form własnych, które możecie użyć w swoich ulotkach, tłach itp. Formy dzielą się na 18, 21 i 24 pasy oraz różne szerokości promieni. Te predefiniowane ustawienia są dobrym fundamentem do uzyskania ładnych efektów w swoich układach i obrazach.</p> <p>W tym zestawie znajdują się 12 form własnych, które możecie użyć w swoich ulotkach, tłach itp. Formy dzielą się na 18, 21 i 24 pasy oraz różne szerokości promieni. Te predefiniowane ustawienia są dobrym fundamentem do uzyskania ładnych efektów w swoich układach i obrazach.</p>
Wynik wygląda następująco:
Faktycznie nie tylko pierwszy akapit otacza grafikę. To samo dotyczy również drugiego akapitu tekstu. Po prostu dlatego, że grafika wystaje poza pierwszy akapit na dół. Dla lepszego zrozumienia po prostu nadajmy tłu podziałce, w której znajduje się grafika, kolory tła.
Po obejrzeniu wyniku jasne staje się, że grafika faktycznie wystaje poza akapit na dół. W tej formie oczywiście nie zawsze jest to pożądane. W tym momencie interesującą cechą jest atrybut clear. Dzięki niemu można zakończyć unieszkodliwienie. clear zmusza do rozpoczęcia elementu na dole elementu unoszącego się, a nie obok niego. Wartości atrybutu clear to:
• left – kończy float: left
• right – kończy float: right
• both – kończy zarówno float: right, jak i float: left
W poniższym przykładzie nadaję drugiemu akapitowi atrybut clear: left, aby zakończyć unieszkodliwianie.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="obraz.jpg" />W tym zestawie znajduje się 12 form własnych, które możecie użyć w swoich ulotkach, tłach itp. Formy dzielą się na 18, 21 i 24 pasy oraz różne szerokości promieni. Te predefiniowane ustawienia są dobrym fundamentem do uzyskania ładnych efektów w swoich układach i obrazach.</p>
<p style="clear:left;">W tym zestawie znajduje się 12 form własnych, które możecie użyć w swoich ulotkach, tłach itp. Formy dzielą się na 18, 21 i 24 pasy oraz różne szerokości promieni. Te predefiniowane ustawienia są dobrym fundamentem do uzyskania ładnych efektów w swoich układach i obrazach.</p>
</body>
</html>
Za pomocą pokazanej składni drugi akapit zostanie teraz faktycznie wyświetlony poniżej obrazu.
W większości przypadków zamiast clear: left lub clear: right można po prostu użyć clear: both. Dlatego zaleca się po prostu utworzenie odpowiedniej klasy w arkuszu stylów, którą można następnie wywołać, gdy zajdzie taka potrzeba.
.clearing {
clear: both;
}
Tej klasy można zawsze używać, gdy chce się zakończyć przesunięcie elementu.
<p class="clearing">Zawartość ...</p>
Do czego służy przesunięcie
Oczywiście przesunięcie nie jest potrzebne tylko do przepływu tekstu w kontekście obrazów. Faktycznie stanowi ono podstawową koncepcję stron internetowych opartych na CSS. Dzięki przesunięciu można na przykład bardzo łatwo implementować układy wielokolumnowe. Zobacz sobie poniższy przykład:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Tutaj znajduje się treść strony.
</div>
</body>
</html>Tu jest budowany układ dwukolumnowy. Co w nim wyjątkowe: Kolumny są obok siebie.
I właśnie to obok siebie stanie jest realizowane za pomocą koncepcji przesunięcia. Szczegółowe informacje na temat budowy stron opartych na przesunięciu znajdziesz w dalszej części tego cyklu.
