Wiele kolumn za pomocą CSS-a

Tworząc strony internetowe prędzej czy później spotkamy się z koniecznością umieszczenia treści w kilku kolumnach. W jaki sposób osiągnąć dobry efekt? Kiedyś robiło się to za pomocą tabeli, ale to już zamierzchła przeszłość. Tabele są złe z kilku powodów. Najważniejszy z nich: tabele służą do przechowywania danych, a nie do panowania nad wyglądem strony. Obecnie używa się do tworzenia układów wielokolumnowych elementów blokowych oraz styli CSS. Jak to rozgryźć? Za chwilę się dowiemy.

Umówmy się na początek co do struktury naszej strony WWW. Załóżmy, że wygląda ona tak.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Moja strona</title>
  <style type="text/css" media="all">
    // w tym miejscu znajdą się style CSS
  </style>
</head>
<body>
  <div id="naglowek">To jest nagłówek</div>
  <div id="kolumny">
  <!-- To jest miejsce na kolumny -->
  </div>
  <div id="stopka">stopka</div>
</body>
</html>

Teraz zajmijmy się tym, co powinno być wewnątrz elementu o identyfikatorze "kolumny". Wiemy już, że na pewno nie tabelka. Są trzy rozwiązania. Poniżej przedstawimy wszystkie trzy.

Sposób 1: właściwość float dla części kolumn

Jak można zorientować się po tytule, stosując ten sposób będziemy używali CSS-owej właściwości "float", aby ustawić kolumny obok siebie. Najpierw jednak kod HTML. Ten kod powinien znaleźć sie w miejscu komentarza wewnątrz znacznika div o identyfikatorze kolumny.

<div id="lewa">lew kolumna</div>
<div id="prawa">Prawa kolumna</div>
<div id="srodek">Środkowa kolumna</div>
<br class="clear" />

W ten sposób mamy już znaczniki przechowujące zawartość naszych kolumn. Teraz tylko odpowiednio poprzesuwamy kolumny. Na razie są ułożone pod sobą - tak kolumny nie powinny wyglądać. Przenieśmy się więc do sekcji head gdzie czeka już na nas znacznik gotowy na przyjęcie styli CSS. Style te będą wyglądały tak:

#lewa {
   float: left;
   width: 15%;
}
#prawa {
   float: right;
   width: 15%;
}
#srodek {
   margin-left: 15%;
   margin-right: 15%;
}
.clear {
   clear: both;
}

Dzięki temu kawałkowi kodu nasze kolumny ustawią się w odpowiednich miejscach. Lewa po lewej stronie, prawa po prawej. Marginesy ustawione dla środkowej kolumny zapobiegają opływaniu bocznych kolumn treścią w sytuacji, kiedy byłyby one krótsze - ma to miejsce bardzo często.

ostatnia linijka kodu HTML i trzy ostatnie linie kodu CSS zapobiegają wsuwaniu się lewej lub prawej kolumny na przykład na stopkę, w sytuacji, gdy środkowa kolumna nie zawiera dużo treści.

Słusznie zauważyliście - treść kolumn bocznych jest w pliku HTML przed treścią kolumny środkowej. Może być to wadą, albo zaletą. Przypominam, że automaty wyszukujące oraz programy odczytujące treść strony internetowej niewidomym zwracają uwagę na kolejność treści wewnątrz kodu HTML, nie na ekranie. Rozkład treści na stronie może mieć wpływ na pozycję naszej strony w wyszukiwarce.

Sposób 2: float dla wszystkich kolumn

Kod HTML tego rozwiązania będzie bardzo podobny do poprzedniego. Zamienimy jedynie kolejność dwuch znaczników div.

<div id="lewa">lew kolumna</div>
<div id="srodek">Środkowa kolumna</div>
<div id="prawa">Prawa kolumna</div>
<br class="clear" />

Teraz nasze kolumny są w kolejności od lewej do prawej. Można zastosować analogiczne rozwiązanie z kolejnością odwrotną. Nie będę go tu jednak przedstawiał. Przedstawię natomiast kod CSS tego rozwiązania, którzy powinien wyglądać następująco:

#kolumny div {
	float: left;
}
#lewa, #prawa {
	width: 15%;
}
#srodek {
	width: 70%;
}
.clear {
	clear: both;
}

Pierwszy styl to styl dla wszystkich elementów blokowych wewnątrz elementu "kolumny". Dzięki temu zapisowi wszystkie elementy blokowe będą ustawiały się obok siebie zamiast jeden pod drugim. Dalsza część kodu CSS powinna być zrozumiała. Określamy w nim szerokości poszczególnych kolumn.

W tym rozwiązaniu, jak widać wszystkie kolumny "pływają" po lewej stronie. Dzięki temu kolejność czytania tekstu strony przez screenreadery jest taka sama, jak kolejność kodu HTML. Może wystąpić jednak drobny problem: jeśli łączna szerokość kolumn przekroczy szerokość elementu nadrzędnego, to prawa kolumna przeniesie się pod spód.

Sposób 3: układ tabelaryczny

Układ tabelaryczny? Jak to? Przecież mieliśmy pod żadnym pozorem nie stosować tabel to tworzenia układu strony! Macie rację - nie mieliśmy i nie będziemy tego robić. Za pomocą elementów blokowych i kodu CSS otrzymamy ten sam efekt. Na dodatek kod będzie bardziej przejrzysty i będzie go mniej. Interesujące? Więc do dzieła!

Tak jak w przypadku poprzednich sposobów, najpierw kod HTML. Będzie się on różnił od rozwiązania drugiego tylko jedną linijką, a właściwie jej brakiem. Pozbędziemy się znacznika br.

<div id="lewa">lew kolumna</div>
<div id="srodek">Środkowa kolumna</div>
<div id="prawa">Prawa kolumna</div>

Prawda, że proste? Kod CSS będzie równie łatwy:

#kolumny {
	display: table-row;
}
#kolumny div {
	display: table-cell;
}
$lewa, #prawa {
	width: 15%;
}
#srodek {
	width: 70%;
}

Już tłumaczę co do czego służy. Pierwsze trzy linijki kodu CSS mówią, że element "kolumny" ma zachowywać sie jak wiersz tabeli. Kolejne trzy linie informują przeglądarkę, że elementy blokowe wewnątrz elementu "kolumny" mają zachowywać się i być narysowane jak komórki tabeli. Reszta nie odbiega niczym od poprzednich przykładów i służy tylko do ustawienia szerokości.

Podsumowanie

Wszystkie trzy sposoby są dobre. Według mnie trzeci z nich jest najlepszy, ponieważ tylko w nim kolumny są tej samej wysokości - jak komórki w wierszu tabeli. Dzięki temu będziecie mieli najmniej problemu ze stylizowaniem strony - miedzy innymi z tłem poszczególnych kolumn.

Trzeci sposób jest jednocześnie najmniej popularny. Dlaczego? Dlatego, że do niedawna na rynku przeglądarek królował Internet Explorer 6, który nie potrafił "przełknąć" tego rozwiązania. Obecnie chyba nie warto się nim przejmować.

Są jeszcze inne sposoby na stworzenie kilku kolumn na stronie z użyciem CSS-a i elementów blokowych. Są one jednak przydatne tylko w specyficznych rozwiązaniach. Te, które zaprezentowałem wam powyżej powinny zaspokoić większość potrzeb.