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
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 – 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 – 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
Jeśli chcesz wiedzieć więcej na ten temat, wejdź na stronę W3C, który omawia dokładniej kolumny. Życzę ciekawego układu “gazety” ;-)
