Samouczek: Układ elementów na stronie - Kurs HTML i CSS
Autor: Piotr Bubacz
Opublikowano: 2011-09-22
Jedną z podstawowych umiejętności każdego twórcy stron internetowych jest zmiana standardowego układu elementów blokowych. Aby to zrobić należy wyśrodkować elementy blokowe, umieścić je obok siebie i określić marginesy. Wiedza ta jest niezbędna do ułożenia elementów na stronie (layout).
Przed wykonaniem zadań powinieneś wiedzieć:
Po wykonaniu zadań nauczysz się:
- wyśrodkowywać tekst i elementy blokowe,
- umieszczać elementy blokowe obok siebie,
- określać marginesy.
Implementacja
Twoim zadaniem jest przygotowanie strony internetowej, wypełnienie jej przykładowym tekstem, a następnie ułożenie elementów tak, jak na Rys. 1.
Rys 1. Efekt końcowy.
Przygotowanie strony
Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.
- W edytorze HTML utwórz nowy plik pod nazwą index.html i wklej do niego szkielet strony:
<html>
<head>
<title>Układ elementów na stronie</title>
</head>
<body>
</body>
</html>
- Pomiędzy znacznikami <body> i </body> wpisz:
<h1>Układ elementów na stronie</h1>
<div>
</div>
- Pomiędzy znacznikami <div> i </div> dwukrotnie wklej:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- Zapisz stronę i otwórz ją w przeglądarce. Strona powinna wyglądać tak, jak na Rys. 2.
Rys. 2. Strona internetowa wypełniona tekstem podanym w zadaniu.
Wyśrodkowanie tekstu
Wyśrodkowanie tekstu w CSS uzyskujemy za pomocą własności text-align: center.
- Do nagłówka strony dodaj:
<style type="text/css">
h1 { text-align: center; }
</style>
- Zapisz stronę. Sprawdź, czy plik index.html wygląda tak, jak na Rys. 3.
Rys. 3. Plik index.html po dodaniu wyśrodkowania tekstu.
Umieszczanie elementów blokowych obok siebie
Aby element blokowy został umieszczony obok innego elementu blokowego (czyli, aby oba zachowały się jak elementy liniowe) należy w CSS określić szerokość każdego z elementów tak, aby ich suma była mniejsza lub równa szerokości elementu nadrzędnego oraz określić pływanie elementów (float) do wybranej, lewej lub prawej, krawędzi strony.
- Do znacznika <style> dodaj:
p { width: 300px;
float:left;
border: solid 1px #000; }
Informacja |
Aby lepiej zaprezentować wynik działania dodaliśmy dodatkowo ramkę koloru czarnego dookoła elementów akapitu. Więcej o ramkach przeczytasz w . |
- Zapisz stronę i odśwież ją w przeglądarce. Strona powinna wyglądać tak, jak na Rys. 4.
Rys.. 4. Ułożenie elementów blokowych obok siebie.
Marginesy – model pudełkowy
Każdy element w dokumencie tworzy prostokątny obszar zwany pudełkiem. Składa się on z zawartości, marginesów wewnętrznych, ramki oraz marginesów zewnętrznych (Rys. 5.).
Rys. 5. Model pudełkowy CSS.
Aby odsunąć elementy od siebie, należy zwiększyć margines zewnętrzny. Aby odsunąć zawartość elementu od ramki, należy wykorzystać margines wewnętrzny. Do ustalania wielkości marginesów możemy wykorzystać dowolną jednostkę miary w CSS (zob. Jak określić wielkość w CSS). Aby wszystkie marginesy były jednakowe, możemy użyć konstrukcji:
margin: 10px;
Możemy również określać margines dla każdego z boków osobno:
margin-left: 10; margin-right: 5px; margin-bottom: 20px; margin-top: 25px;
Więcej informacji o marginesach przeczytasz w Jak określić marginesy na stronie WWW za pomocą CSS oraz zobacz również Samouczek CSS –Marginesy i dopełnienia.
- Do stylu p, w nagłówku, dodaj marginesy:
padding: 10px;
margin: 10px;
- Zapisz stronę. Sprawdź, czy plik index.html wygląda tak, jak na Rys. 3. Odśwież stronę w przeglądarce.
Rys. 6. Plik index.html po dodaniu marginesów.
Wyśrodkowanie elementu blokowego
Wyśrodkowanie elementu blokowego wymaga ustalenia jego szerokości oraz nadania automatycznego marginesu, prawego i lewego.
- Do znacznika <style> dodaj:
div { width: 600px;
margin-left: auto;
margin-right: auto; }
- Zapisz stronę i odśwież ją w przeglądarce. Strona powinna wyglądać tak, jak na Rys. 7.
Rys. 7. Ułożenie elementów po wycentrowaniu elementu div.
Informacja |
Zauważ, że elementy nie są już ułożone obok siebie. Spowodowane to zostało zmianą szerokości elementu nadrzędnego – div. Każdy z akapitów ma szerokość 300px, więc można zadać pytanie, dlaczego dla 600px elementy są tak ułożone? Odpowiedź na to pytanie jest prosta – musimy doliczyć wszystkie marginesy i ramki, zatem szerokość elementu div powinna wynosić 2*300px+2*4*10px+2*2*1px=684px. |
2. Zmień szerokość elementu div na 684px:
width: 684px;
- Zapisz plik i odśwież stronę w przeglądarce. Powinna ona wyglądać tak, jak na Rys. 1.
Strona końcowa
Poniżej możesz zobaczyć końcowy kod strony HTML:
<html>
<head>
<title>Układ elementów na stronie</title>
<style type="text/css">
h1 { text-align: center; }
p { width: 300px;
border: solid 1px #000;
padding: 10px;
margin: 10px;
float:left; }
div { width: 684px;
margin-left: auto;
margin-right: auto; }
</style>
</head>
<body>
<h1>
Układ elementów na stronie</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Podsumowanie
W tym artykule nauczyliśmy się, w jaki sposób wyśrodkowywać tekst i elementy blokowe, umieszczać elementy blokowe obok siebie oraz określać marginesy za pomocą stylów CSS.
W kolejnym artykule nauczymy się, jak umieszczać grafikę na stronie WWW.
Dodatkowo zobacz:
- Jak zrobić ramkę w CSS
- Jak określić wielkość w CSS
- Jak określić marginesy na stronie WWW za pomocą CSS
- Marginesy i dopełnienia