Artykuł
09/23/2011

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: