Gazeta na ekranie – dzielimy tekst na kolumny w CSS3 6

Chyba nie muszę mówić o tym, że CSS3, który nadejdzie za jakiś czas przyniesie wiele nowych dobrodziejstw. W tym wpisie zaprezentuję Wam jedną z wielu ciekawych możliwości CSS3 – chodzi mi o multi-columns – niesamowite ułatwienie dla webmasterów. Już nie trzeba tworzyć np. 4 oddzielnych divów czy tworzyć tabelkę (co oczywiście odradzam).

Jak zacząć?

Zaczynamy tak samo jak każdą stronę – doctype, kodowanie, styl i tak dalej. Tego nie pokazuję, bo na pewno wiesz jak to zrobić. Od razu zajmijmy się tekstem.

Rolę kolumn będzie odgrywał jeden div, który za pomocą CSS-a ‚podzieli’ się na kilka kolumn – w naszym przypadku trzy. W środku dodajemy paragrafy pod postacią znacznika p umieszczonego w tym divie. Wygląda to mniej więcej tak:

<div>
<p>Tutaj umieść tekst</p>
<p>Tutaj umieść tekst</p>
<p>Tutaj umieść tekst</p>
</div>

Wiadomo, gdy Twoja strona jest bardziej rozbudowana, powinieneś użyć klas. Teraz przejdźmy do CSS-a, czyli najważniejszego w tym artykule.  Aby ustawić liczbę kolumn, masz 3 wyjścia: ustawić liczbę kolumn, szerokość jednej lub szerokość i liczbę. I tak, by mieć liczbę kolumn, dla selektora div dodaj taki parametr:

column-count: liczba kolumn;
-moz-column-count: liczba kolumn;
-webkit-column-count: liczba kolumn;

Gdzie zamiast liczba kolumn wpisujemy jakąś liczbę, najlepiej, żeby była większa od 1 i nie była zbyt wysoka. Przykład na trzech:

Trzy kolumny

Trzy kolumny

Następnym wyjściem jest określenie szerokości jednej kolumny – czyli można powiedzieć, że komputer obliczy nam liczbę kolumn na podstawie ich szerokości – zauważ, że dokładną odwrotnością jest ustalenie liczby kolumn.

column-width: szerokość kolumn;
-moz-column-width: szerokość kolumn;
-webkit-column-width: szerokość kolumn;

Ale w tym przypadku nie ma stuprocentowej dowolności. Wszystkie kolumny muszą być równe – więc jeśli do bloku o szerokości 500 pikseli dodasz kolumny o szerokości 120 pikseli, to jedna z nich musiałaby być krótsza! A takie coś nie jest zbyt dobrym rozwiązaniem. Dochodzą do tego jeszcze odstępy, czyli w tym przypadku 200-pikselowe kolumny w 800-pikselowym divie nie dają czterech kolumn!

Upiększamy kolumny

Odstęp między kolumnami nie mógł oczywiście zostać pominięty przez W3C, bo takie właściwości się czasem przydają. Odstęp pomiędzy każdymi jest banalnie prosty – na pewno znasz go z obramowań:

column-rule: szerokość typ kolor;
-moz-column-rule: szerokość typ kolor;
-webkit-column-rule: szerokość typ kolor;

Co daje nam taki efekt:

Tak wygląda odstęp między kolumnami

Tak wygląda odstęp między kolumnami – 1px #202020 solid

Możemy także użyć column-gap, co określa odstęp między kolumnami a tekstem. Może to wpływać na szerokość lub liczbę kolumn.

column-gap: szerokość;
-moz-column-gap: szerokość;
-webkit-column-gap: szerokość;
Odstęp między kolumnami

Odstęp między kolumnami – 30px

Obraz w tekście

Jednym z „zabiegów” stosowanych w składzie gazet, jest umieszczanie w kolumnach zdjęć lub innych grafik. Niby wystarczy wstawić obrazek do środka, ale nic z tego. Wprawdzie obraz będzie widoczny, to jednak zobaczymy „dziurę”. Aby poradzić sobie z tym, użyjmy parametru float. Może to wyglądać tak:

<img src="ścieżka" style="float:left;"/>

Dzięki temu obraz będzie przylegał tak, aby opływał cały tekst. Do tego dołóżmy odstęp obrazka (padding lub margin) i gotowe. Oprócz tego dodajemy jakiś tytuł (oczywiście przed kolumnami) i można powiedzieć, że gotowe. Tak może wyglądać Twój pierwszy artykuł prosto z gazety :-)

Efekt końcowy

Efekt końcowy

Jeśli chcesz wiedzieć więcej na ten temat, wejdź na stronę W3C, który omawia dokładniej kolumny. Życzę ciekawego układu  „gazety” ;-)

  • Kurdupel

    WOW! Dziękuję za poradę, z pewnością z niej skorzystam. Tego szukałem

  • Pawel

    Dlaczego nie działa na IE8?

  • @Pawel: bo IE8 nie obsługuje CSS3. Radzę zainstalować inna przeglądarkę.

  • Pawel

    Na co dzień korzystam z Firefox, ale chciałem aby strona było identyczna na obu przeglądarkach. Dziękuję za pomoc.

  • @Pawel: Poza tym -moz obsługuje FF > 1.5, a -webkit Safari > 3.0. Zwykłe column-count to sam CSS3 (wejdź na stronę podlinkowaną na końcu posta)

    Dopiero teraz spojrzałem na kod CSS (nie ja pisałem ten artykuł).

  • Pingback: Grid – niewidzialna siatka | Grafika Netkata()