Okiełznać style – Projektowanie bez użycia tabel czyli CSS

W ostatniej części kursu CSS podsumujemy dotychczasową wiedzę, biorąc na warsztat bardzo praktyczny aspekt tworzenia stron WWW bez użycia tabel.

Początkowym zastosowaniem sieci była wymiana informacji pomiędzy naukowcami. To właśnie do realizacji tego celu stworzono język HTML. Gdy w połowie lat 90. sieć była dostępna już dla szerokiego grona odbiorców, HTML musiał sprostać wymaganiom stawianym przez grafików. Naturalnym sposobem na uzyskanie pożądanych efektów, jak kolumny czy ramki okazało się użycie tabel, które pozwalają na precyzyjną kontrolę szerokości, wysokości czy obramowania poszczególnych kolumn strony.
Główną bolączką był brak alternatywy dla tabel.

Standard CSS rozwiązał ten problem wprowadzając zasady pomocne w oddzieleniu warstwy treści od warstwy prezentacji. CSS doczekał się dwóch wersji – CSS1 oraz CSS2 (łącznie czterech specyfikacji: 1 i 2, wycofanej – 2.1 oraz przyszłościowej – 3). Choć specyfikacja CSS pojawiła się już w 1996 r., pełna obsługa tego języka została zaimplementowana do przeglądarek znacznie później.

Dziś sytuacja z obsługą przez przeglądarki implementacji jest zdecydowanie lepsza. Pojawił się Firefox, który w sposób niemal doskonały obsługuje CSS2. Natomiast począwszy od wersji 7.0 przeglądarka Microsoftu Internet Explorer dla systemów Windows będzie znacznie lepiej obsługiwała standard CSS. Z uwagi na zachodzące zmiany już dziś warto tworzyć strony w sposób nowoczesny.

Zalety modelu nie korzystającego z tabel (ang. tableless web design):

• oddzielenie treści od prezentacji,
• skalowalność strony,
• lepsza dostępność dzięki możliwości poprawnej obsługi użytkowników palmtopów, telefonów komórkowych,
• obsługa drukowania bez tworzenia dodatkowych podstron,
• możliwość szybkiej przebudowy serwisu,
• mniejsze, bardziej kompaktowe podstrony,
• oszczędność transferu dzięki obrazkom oddzielającym,
• szybsze ładowanie się stron dzięki krótszemu kodowi HTML oraz pliku stylów, który pobierany jest przez przeglądarkę wyłącznie raz.

Problemy i wady:

• niepełna obsługa CSS przez przeglądarki,
• konieczność stosowania trików w celu osiągnięcia efektu zgodnego z większością przeglądarek,
• problemy z odczytem stron przez starsze przeglądarki.

Tworzenie nowoczesnej strony opiera się o technologie XHTML oraz CSS. Język HTML został uznany za przestarzały.

Popularne układy

Techniki, które pozwalają w CSS tworzyć szkielet witryny to:

• pozycjonowanie – właściwością budującą stronę jest position, a pomocnikami left, right, top, bottom,
• opływanie – właściwością budującą stronę jest float, a pomocnikami clear.

Szkielety możemy podzielić na:

• płynne – szerokość kolumn na stronie dostosowuje się do aktualnego rozmiaru okna,
• stałej szerokości – każda z kolumn ma ograniczoną, stałą szerokość, niezależną od aktualnego rozmiaru okna.

Układ 1: 3 kolumny

Pierwszym układem, który stworzymy jest popularny schemat witryny oparty o 3 kolumny. Oprócz nagłówka powstaną trzy kolumny, z których środkowa będzie wyraźnie szersza od pozostałych.

Właściwością tego typu układu jest jego płynność, co oznacza, że układ wypełnia zawsze 100% szerokości ekranu. Rozpoczniemy od stworzenia kodu HTML.

Będzie on składał się z:

• kontenera przechowującego treść nagłówka,
• kontenera mieszczącego zawartość lewego paska bocznego,
• kontenera na treść właściwą witryny,
• kontenera kryjącego prawy pasek boczny.

Listing 1 prezentuje uproszczony kod źródłowy tego układu. Należy pamiętać, że elementy zawierające identyfikator nie mogą się powtarzać (nie wolno stworzyć dwóch kontenerów o takim samym identyfikatorze – id). Treść kontenerów została celowo usunięta ze względu na oszczędność przestrzeni.

Przystępujemy do tworzenia arkusza stylów dla naszego układu. Wszelkie formatowania tekstu, czyli ustalanie krojów i rozmiarów czcionek, zostały przeprowadzone w stylu formatowanie_tekstu.css. Ten styl jest dołączany do każdego przykładu. Właściwy, interesujący nas kod widoczny jest na listingu 1. Dla każdego z kontenerów stworzyliśmy style, kolejno: #top, #left, #content i #right.

Ten układ operuje na wartościach absolutnych, czyli inaczej mówiąc pozycjonowaniu. Element div, który zawiera wartość position ustaloną na absolute, jest blokiem pozycjonowanym względem pierwszego piksela na stronie.
Nagłówek poddajemy zwykłemu formatowaniu, ustawiając interesujący nas kolor tła, marginesy itp. Przystępujemy do tworzenia układu:

• lewy pasek ma długość 200 pikseli,
• jest zorientowany względem lewej strony okna przeglądarki o 10 pikseli,
• ma zostać umieszczony 80 pikseli poniżej górnej krawędzi okna.

Dokładnie tak samo postępujemy w przypadku prawej kolumny. Tym razem jednak oddalamy się od prawej strony okna. Wartości są takie same. Dodajemy kolor dla obu kolumn, by były wyeksponowane. Jak widać, kod dla stylu zawartości (content) jest \”podejrzanie\” krótki. I taki też ma być. Gdybyśmy nie ustalili marginesów bocznych na 200 pikseli, zawartość tego kontenera pokryłaby całą stronę. Gotowy układ widoczny jest na rys.

[..]
[..]
[..]
[..]

#top {
   background-color: #FFCE9A;
   margin: 0;
   padding: 1em;
}
#left {
   position: absolute;
   left: 10px;
   top: 80px;
   width: 200px;
   background-color: #CDDFFF;
}
#right {
   position: absolute;
   right: 10px;
   top: 80px;
   width: 200px;
   background-color: #CDDFFF;
}
#content {
   margin: 0 200px;
}

Układ 2: 3 kolumny

Kolejna propozycja układu graficznego dla strony to trzy kolumny o jednakowej długości. Zastosowana tu technika to opływanie, która sprawia, że kolejne elementy ustawiają się w szeregu za sobą. Układ ten jest również płynny, czyli rozszerza się na cały ekran. Jak łatwo zauważyć, suma wszystkich długości nie jest nawet bliska 100%. To wszystko z uwagi na zastosowany dodatkowy margines dla dwóch ostatnich kolumn. Efekty widoczne są na rysunku.

#content1 {
   width: 31%;
   float: left;
   background: #ECF1FF;
   padding: 1%;
}
#content2 {
   width: 31%;
   margin-left: 1%;
   float: left;
   background: white;
   padding: 1%;
}
#content3 {
   width: 30%;
   margin-left: 1%;
   float: left;
   background: #ECF1FF;
   padding: 1%;
}

Układ 3: 4 kolumny

Kolejnym popularnym układem stosowanym na stronach WWW jest układ z czterema kolumnami. Dwie z nich, skrajne, odpowiedzialne są za wyświetlenie odnośników prowadzących do kolejnych podstron witryny. Dwie kolumny, oznaczone tu content1 oraz content2 przekazują użytkownikowi już konkretne informacje w postaci treści.

Stworzony kod XHTML różni się w stosunku do pierwszego przykładu jedynie dodatkowym kontenerem z treścią. Metodą stosowaną w tym układzie jest pozycjonowanie. Jak łatwo zauważyć, w prawie całym kodzie operujemy na wartościach procentowych. Nawet w nagłówku margines określono na 1% (dla elementu body ustalono margines na 0, czego tutaj nie ujęto). W ten sposób uzyskujemy gwarancję, że szerokość układu kolumn, jak i nagłówka będzie taka sama.

Ustalamy więc szerokość kolejnych elementów przy użyciu właściwości width, stosując miarę procentową. Właściwość left służy tu niejako do odsunięcia kolejnych kontenerów od początku okna przeglądarki. Za każdym razem ta wartość musi być powiększona o długość bloku poprzedniego. Jak warto zauważyć, w przypadku dwóch środkowych kolumn wartość ta jest dodatkowo większa o 1%. Ten procent zostaje wykorzystany na rozdzielenie kolumn.
Właściwość top to chęć takiego odsunięcia wszystkich kontenerów układu, by nie kolidowały z nagłówkiem.

#top {
   margin: 1%;
   background-color: #FFCE9A;
   padding: 1em;
}
#left {
   position: absolute;
   left: 1%;
   width: 20%;
   top: 110px;
   background-color: #CDDFFF;
}
#content {
   position: absolute;
   left: 22%;
   width: 28%;
   top: 110px;
}
#content2 {
   position: absolute;
   left: 51%;
   width: 28%;
   top: 110px;
}
#right {
   position: absolute;
   left: 80%;
   width: 19%;
   top: 110px;
   background-color: #CDDFFF;
}

Układ 4: 2 kolumny

Drugi układ, który prezentujemy operuje na nieco innej zasadzie. W tym przypadku schemat strony też jest płynny, czyli automatycznie wypełnia całą stronę. Tym razem jednak utworzymy tylko dwie kolumny i zastosujemy nieco inną metodę na osiągnięcie celu. Opływanie to kolejna technika, która polega na wykorzystaniu właściwości float.

Ustawiając dla kontenera content długość krótszą niż 100% powodujemy powstanie luki. Oznacza to, że kontener będzie pokrywał tylko część ekranu, czyli 67% jego szerokości. Powstałe w ten sposób miejsce może zostać zapełnione przez kontener right, który zawiera menu strony.

Właśnie wykorzystanie float = left sprawia, że kontener right może wskoczyć zaraz obok treści. Problem pojawia się, gdy pasek boczny jest dłuższy od zawartości strony. Wówczas kontener z menu będzie niejako opływał zawartość strony i stworzy niezbyt dobrze wyglądający efekt. Warto to przetestować. Strona widoczna na ryunku.

#content {
   float: left;
   width: 67%;
   background-color: white;
   padding: 0 15px;
   margin-right: 25px;
}
#right {
   background-color: #CDDFFF;
   padding: 1em;
   margin-top: 0.5em;
}

Układ 5: 3 kolumny

Najpopularniejszym w sieci układem stosowanym przez twórców stron WWW jest układ trójkolumnowy o stałej szerokości strony. Z uwagi na fakt, że przy dużych rozdzielczościach strona byłaby zbyt krótka, webmasterzy decydują się na ustalenie stałej szerokości strony.

Zazwyczaj jest to 750-760 pikseli, by strona nie wymagała przewijania w poziomie przy rozdzielczości 800 x 600. Ta metoda wymaga stworzenia dodatkowego kontenera body, który rozpoczyna się na początku sekcji dokumentu {html}{/html}, a kończy przed {html}{/html}.

Ma to umożliwić wyśrodkowanie układu względem okna strony. W MSIE wyśrodkowania układu dokonujemy poprzez wycentrowanie całego dokumentu (centrowanie body), natomiast w przeglądarkach opartych o silnik Gecko (Firefox) ustawiamy marginesy boczne na auto. W przypadku Internet Explorera konieczne jest przywrócenie wyrównania do lewej strony, co też czynimy na początku deklaracji dla identyfikatora body. Formatowanie w tym układzie zostanie ponownie powierzone opływaniu. Dla kolejnych kontenerów (left, content, right) ustalamy szerokość kolumn, wyrażając tę wartość w pikselach. Suma musi być równa szerokości układu (750 pikseli).

BODY { text-align: center; }
#body {
   text-align: left;
   margin: 0 auto;
   width: 750px;
}
#left {
   width: 150px;
   float: left;
   background-color: #ECF1FF;
}
#content {
   width: 450px;
   float: left;
}
#right {
   width: 150px;
   float: left;
   background-color: #ECF1FF;
}

Układ 6: 1 kolumna z menu

Ostatni z prezentowanych układów jest najprostszy do wdrożenia. W tym przypadku nie ma mowy o wielu kolumnach, dlatego kod źródłowy XHTML nieco się różni.

Zamiast dwóch osobnych kontenerów (content i menu), mamy do czynienia z zagnieżdżeniem kontenera menu w kontenerze content. W celu ustawienia pozycji kontenera z menu we właściwej pozycji posiłkujemy się właściwością float.

Jeżeli nie ustalimy szerokości menu, będzie ono ustalane indywidualnie przez przeglądarkę na podstawie zawartości kontenera. Jak łatwo zauważyć, brakuje deklaracji stylów dla kontenera content, ponieważ nie istnieją. Gdy menu będzie krótsze od tekstu, tekst zawarty w kontenerze content będzie opływał zawartość menu, tworząc niespotykany w innych wystrojach efekt wizualny.

#top {
   margin-bottom: .5em;
   background-color: #FFCE9A;
   padding: 1em;
}
#menu {
   float: right;
   width: 250px; 
   background-color: #ECF1FF;
   padding: 1em;
   margin-left: 1em;
}