Naszym celem będzie stworzenie na stronie czegoś, co przypomina wielkie portale, albo jak kto woli zwykłą gazetę – czyli tekst w dwóch kolumnach. HTML niestety nie udostępnia takiej opcji – a szkoda. Zawsze w takiej sytuacji trzeba było użyć tabeli.
Tabelki z odpowiednio rozmieszczonymi wierszami i kolumnami. Jest jednak jeszcze inna metoda – według mnie prostsza i lepsza. Wypróbujmy ją!
Pomysł
Skoro nie tabelka, to co? Otóż wykorzystamy dwa bloku DIV (albo warstwy – jak kto woli) bez właściwości position, która jak wiadomo pozycjonuje bloki, bo nie o nią nam tu chodzi. Musimy ustalić im szerokość, żeby nie rozciągały się na całą stronę – w końcu mają być to dwie kolumny o jakiejś tam szerokości. Do ustalenia położenia bloków będzie nam potrzebna właściwość float, która jest odpowiednikiem HTMLowego align i może przyjmować wartości: none (domyślna), left (wyrównanie do lewej), right (wyrównanie do prawej) oraz inherit (przejęcie wartości od „rodzica”).
Stworzymy dwie klasy: .lewa i .prawa – jak sugerują nam same nazwy jedną z nich wykorzystamy przy lewej kolumnie, a drugą przy prawej.
Wykonanie
Bierzemy się do pracy:
| .lewa {float:left; width:150px; margin-right:20px;} .prawa {float:left; width:150px;} |
Jak widać zadeklarowaliśmy dwie klasy, jedną dla lewej kolumny, drugą zaś dla prawej. W klasie .lewa wykorzystaliśmy atrybut float:left aby wyrównać ją do lewej strony. Logiczne jest, że jeżeli jeden element będzie wyrównany do lewej strony, drugi będzie oblewał go z prawej. Dzięki zastosowaniu w obu klasach width:150px; kolumny mają określoną szerokość. W klasie lewa ustaliliśmy też prawy margines (po to, aby pomiędzy dwoma blokami był jakiś odstęp). Dziwić trochę może użycie float:left; w klasie .prawa – jest to niezbędne do prawidłowego działania w przeglądarkach innych niż IE. Skoro lewa kolumna jest położona z lewej strony, prawa także musi mieć nadane takie formatowanie – w końcu oblewając lewą kolumnę z prawej strony jest niejako wyrównana do lewej. Być może trochę ciężko to zrozumieć – ale tak po prostu jest!
Pozostało nam jeszcze stworzyć dwa bloki i wpisać do nich jakiś tekst:
| <div class=”lewa”> A tutaj trzeba dać trochę tekstu, byle jakiego – aby tylko wypełnił lewą kolumnę. A tutaj trzeba dać trochę tekstu, byle jakiego – aby tylko wypełnił lewą kolumnę. A tutaj trzeba dać trochę tekstu, byle jakiego – aby tylko wypełnił lewą kolumnę. A tutaj trzeba dać trochę tekstu, byle jakiego – aby tylko wypełnił lewą kolumnę. A tutaj trzeba dać trochę tekstu, byle jakiego – aby tylko wypełnił lewą kolumnę. </div> <div class=”prawa”> W tym miejscu tekstu będzie troszkę więcej, aby było widać wyraźnie, że ilość tekstu w obu kolumnach może się różnić. Nie ważne, czy w lewej kolumnie będzie więcej tekstu, czy mniej niż w prawej. W tym miejscu tekstu będzie troszkę więcej, aby było widać wyraźnie, że ilość tekstu w obu kolumnach może się różnić. Nie ważne, czy w lewej kolumnie będzie więcej tekstu, czy mniej niż w prawej.W tym miejscu tekstu będzie troszkę więcej, aby było widać wyraźnie, że ilość tekstu w obu kolumnach może się różnić. Nie ważne, czy w lewej kolumnie będzie więcej tekstu, czy mniej niż w prawej.W tym miejscu tekstu będzie troszkę więcej, aby było widać wyraźnie, że ilość tekstu w obu kolumnach może się różnić. Nie ważne, czy w lewej kolumnie będzie więcej tekstu, czy mniej niż w prawej. </div> |
…to wszystko!
Mamy już dwie bardzo ładne kolumny z tekstem. Jednak są one położone z lewej strony ekranu. To może trochę drażnić. Jednak nieważne gdzie umieścimy oba bloki – czy w pustym dokumencie (wtedy będą z lewej strony), czy np. w wyśrodkowanej tabelce (wtedy będą na środku!) – ważne aby zadeklarować do nich odpowiednie klasy, tak jak to już zrobiliśmy oraz żeby oba bloki były wstawione w odpowiedniej kolejności, tj. <blok lewy>treść</koniec bloku><blok prawy>treść</koniec bloku>
Oczywiście wszystkie atrybuty w klasach (szerokość, czcionkę itp.) trzeba ustalić samemu. Ja w przykładzie wykorzystałem następujące formatowanie:
| .lewa {float:left; width:150px; margin-right:20px; font-family:verdana; font-size:9pt; color:navy; font-weight:normal; text-align:justify} .prawa {float:left; width:150px; font-family:verdana; font-size:9pt; color:black; font-weight:bold; text-align:justify} |
Zobacz przykład: www.webinside.pl/materialy/rozne/kolumny.html
