Przejdź do treści

CSS / Szablon strony na DIV-ach - Kurs CSS

W tym rozdziale dowiesz się...

W jaki sposób wykonać szablon strony bez tabelek, w którym bardzo łatwo przesunąć menu z jednej strony na drugą?

  • CSS
    Wstęp

    Dlaczego szablon strony powinno się wykonywać na elementach DIV (bloki), a nie na tabelkach?

  • CSS
    Stały szablon

    Jak wykonać szablon o szerokości niezależnej od rozdzielczości ekranu?

  • CSS
    Płynny szablon

    Jak wykonać szablon o szerokości dopasowującej się do rozdzielczości ekranu?

Wstęp

Dlaczego szablon strony powinno się wykonywać na elementach DIV (bloki), a nie na tabelkach?

Po lekturze rozdziału pt. Menu w CSS powinny być Ci już znane praktyczne możliwości stylizacji elementów stron internetowych. Wiesz już zapewne, dlaczego rozwiązanie oparte o CSS jest najkorzystniejszym wyborem przy tworzeniu menu nawigacyjnego. Dlaczego zatem ograniczać się tylko do menu, kiedy można przecież zyskać jeszcze więcej, projektując całą stronę w ten sam sposób:

  • Wyobraź sobie, że po roku działalności strony zechcesz całkowicie odmienić jej wygląd, np. przenosząc kolumnę menu z lewej na prawą stronę. Dzięki CSS to tylko jedna linijka w arkuszu stylów, zamiast żmudnej modyfikacji być może setek powstałych dotychczas podstron serwisu!
  • Bez trudu wprowadzisz okolicznościowe wersje wyglądu swojej witryny - np. z okazji Nowego Roku.
  • Chcesz przygotować zestaw skórek dla Twojej strony? Z CSS jest to znacznie prostsze i mniej inwazyjne niż w jakimkolwiek systemie parsowania szablonów. Ponadto rozwiązanie takie jest pozbawione bardzo irytującej wady: jeśli przyszło Ci administrować darmowym systemem CMS lub forum dyskusyjnym i masz już za sobą samodzielne próby wprowadzania modyfikacji dodających nowe funkcje w serwisie, to zapewne wiesz, że bardzo często wymaga to aktualizacji plików wszystkich dostępnych skórek. Po jakimś czasie staje się to tak uciążliwe, że usuwasz wszystkie dodatkowe skórki albo rezygnujesz z wprowadzania jakichkolwiek modyfikacji, mimo iż użytkownicy coraz głośniej się tego domagają. Przejdź na CSS i raz na zawsze zapomnij o tych problemach!
  • Znacznie mniejsze rozmiary wszystkich podstron serwisu. Twoi użytkownicy odczują to w postaci zauważalnie krótszego czasu ładowania stron (zadowolony użytkownik częściej powraca do serwisu), a Ty możesz zaoszczędzić na opłacie za utrzymanie witryny, mniej płacąc firmie hostingowej za wykorzystany transfer (w przypadku popularnych serwisów będą to naprawdę niebagatelne sumy).
  • Inna wersja strony do wydruku lub dla urządzeń przenośnych? Proszę bardzo - dzięki obsłudze mediów wystarczy dołączyć dodatkowe arkusze stylów i nie trzeba przygotowywać żadnych nowych wersji dokumentów HTML.
  • Zależy Ci na wysokiej pozycji w wyszukiwarkach internetowych? Semantyczny kod oparty o CSS jest najprostszą ku temu drogą.
  • Nie utrudniaj korzystania z Twojego serwisu osobom niewidomym ani użytkownikom przeglądarek tekstowych, tworząc stronę w technologii sprzed dziesięcioleci.
  • Wdrożenie kolejnego serwisu, wchodzącego w skład jednego portalu, może się sprowadzać tylko do niewielkiej modyfikacji jednego krótkiego pliku - arkusza stylów CSS... no i oczywiście zredagowania nowych treści :-) Zaoszczędzisz sporo czasu na programowaniu oraz na szkoleniu redaktorów w obsłudze nowego serwisu, dzięki czemu pozostawisz konkurencję daleko w tyle. Ponadto możesz wykorzystywać raz opracowane elementy we wszystkich serwisach portalu, wszędzie elastycznie dopasowując ich wygląd do lokalnego szablonu.

Analogicznie jak we wspomnianym wcześniej rozdziale pt. Menu w CSS, także i tutaj z góry ustalimy kod HTML, który następnie będzie wykorzystywany we wszystkich przykładach w tym rozdziale. Zmieniając wygląd kolejnych przygotowywanych szablonów, będziemy projektować jedynie kolejne arkusze CSS dla wciąż niezmiennego kodu HTML. Jest to praktyczny przykład implementacji koncepcji rozdzielenia struktury i prezentacji dokumentów, dzięki czemu możliwe są do osiągnięcia wszystkie wymienione powyżej korzyści.

Szablon dwukolumnowy:

<div id="top">
	<div id="NAGLOWEK">Nagłówek szablonu</div>
	<div id="MENU">Menu nawigacyjne</div>
	<div id="TRESC">Treść strony</div>
	<div id="STOPKA">Stopka serwisu</div>
</div>

[Zobacz także: Szablon strony w HTML5]

Rezultat bez stylizacji:

Nagłówek szablonu
Menu nawigacyjne
Treść strony
Stopka serwisu

Szablon trójkolumnowy:

<div id="top">
	<div id="NAGLOWEK">Nagłówek szablonu</div>
	<div id="MENU">Menu nawigacyjne</div>
	<div id="INFORMACJE">Dodatkowe informacje</div>
	<div id="TRESC">Treść strony</div>
	<div id="STOPKA">Stopka serwisu</div>
</div>

[Zobacz także: Szablon strony w HTML5]

Rezultat bez stylizacji:

Nagłówek szablonu
Menu nawigacyjne
Dodatkowe informacje
Treść strony
Stopka serwisu
W wyróżnionych fragmentach wstawimy nieistotną tutaj zawartość w celu wypełniania szablonu przykładową treścią. Przygotowując własny szablon, wstaw tam odpowiednio:
Nagłówek szablonu
Można tutaj umieścić logo witryny. W nagłówku często wstawia się dodatkowo powtórzone poziome menu, zawierające najważniejsze i najczęściej używane odnośniki serwisu. Alternatywnie takie menu można umieścić w osobnym bloku poniżej bloku nagłówkowego.
Menu nawigacyjne
Kolumna zawierająca pionowe menu.
Dodatkowe informacje
Druga wąska kolumna, którą można wykorzystać do prezentacji dodatkowych krótkich treści.
Treść strony
Właściwa zawartość dokumentu, tzn. treść artykułu itp. Nie zapomnij o umieszczeniu tytułu treści na początku tego bloku - koniecznie przy użyciu elementu <h1>...</h1>.
Stopka serwisu
Zwykle umieszcza się tutaj skróconą notkę o prawach autorskich (&copy; ...) oraz linki: "Kontakt", "Polityka prywatności" itp.

Do budowy szablonu wykorzystamy elementy <div>...</div>, ponieważ jest to poprawne semantycznie. Zgodnie ze specyfikacją HTML 4.01, element DIV jest ogólnym pojemnikiem, pozwalającym dodać strukturę do dokumentu, którą potem można wykorzystać przy stylizacji za pomocą CSS. Musimy jednak w jakiś sposób odróżnić np. blok treści strony od bloku stopki. W tym celu użyliśmy identyfikatorów (atrybuty id="..."), ponieważ wiemy, że w jednym pliku na pewno nie pojawią się np. dwa bloki treści ani podwójna stopka. Jeśli będziemy chcieć wstawić w dokumencie blok, który może się powtórzyć w obrębie tego samego pliku, zamiast identyfikatorów należy użyć klasy (atrybut class="..."). Wielkie litery w identyfikatorach poszczególnych bloków zapobiegną ewentualnym kolizjom nazw elementów występujących w treści (nie dotyczy trybu Quirks).

Dlaczego nie tabele?

Kiedyś do tworzenia szablonów stron WWW używało się tabeli. W czasach, gdy o CSS można było tylko pomarzyć, był to jedyny sposób na stworzenie bardziej skomplikowanej strony. Czy dzisiaj ten powód jest dobrym uzasadnieniem, skoro wszystkie popularne przeglądarki graficzne od dawna obsługują CSS przynajmniej w stopniu zadowalającym? Dlaczego do tworzenia szablonów stron nie należy używać tabelek:

  • Tabele służą do prezentacji danych tabelarycznych, a nie do tworzenia szablonów - jest to poważny błąd semantyczny.
  • Zwiększają rozmiary dokumentów (dłuższe wczytywanie i wyższe opłaty za transfer).
  • Znacznie ograniczają możliwości stylizacji za pomocą CSS.
  • Utrudniają odbiór treści przez osoby niewidome oraz użytkowników przeglądarek tekstowych.
  • Zwykle wpływają negatywnie na pozycję serwisu w wynikach wyszukiwania.

Czasami osoby początkujące, dowiadując się, jakie to "złe" są tabelki, próbują w każdym przypadku zastępować je elementami <div>...</div>. Tymczasem zwykle jest to tak samo niepoprawne semantycznie, jak ich nadużywanie. W tabelach powinny być prezentowane dane tabelaryczne, które obejmują powtarzający się zbiór elementów (wiersze) tych samych typów (kolumny). Zwykle daje się łatwo rozpoznać, czy w określonym przypadku powinno się użyć tabeli:

  1. W prezentowanych danych można wyróżnić poziomy lub/i pionowy nagłówek - może go nawet nie być, ważne żeby dało się go logicznie wyznaczyć choćby wirtualnie.
  2. Prezentujemy przynajmniej dwa egzemplarze krótkich danych o podobnym charakterze - będą to odpowiedniki kolejnych wierszy tabeli. Taka tabela może mieć nawet tylko jedną kolumnę danych (w takim przypadku zwykle mamy do czynienia z pionowym nagłówkiem, poprzedzającym kolumnę danych).

Stały szablon

Jak wykonać szablon o szerokości niezależnej od rozdzielczości ekranu?

Stały szablon (ang. fixed layout) charakteryzuje się odgórnie ustaloną szerokością w pikselach. Jeśli użytkownik zmieni rozdzielczość ekranu lub rozmiar okna przeglądarki, taki szablon będzie zajmował inną powierzchnię szerokości ekranu. Aby zapewnić komfortowe przeglądanie strony, szerokość szablonu nie powinna być szersza od najmniejszej przewidzianej rozdzielczości ekranu, z której mają korzystać czytelnicy serwisu - w przeciwnym razie w oknie przeglądarki pojawi się poziomy suwak i przeczytanie całej linijki tekstu może wymagać ciągłego przewijania w prawo i z powrotem. W wyższych rozdzielczościach ekranu pojawi się puste miejsce po lewej lub/i po prawej stronie właściwego szablonu - zwykle zagospodarowuje się je poprzez umieszczenie tła graficznego (w najniższej rozdzielczości nie będzie ono widoczne, ale nie jest to takie ważne).

Stały szablon jest najczęściej używaną formą rozplanowania serwisów internetowych, ponieważ jest to szablon niezależny od rozdzielczości ekranu. Wszystkie elementy w jego obrębie (tekst, zdjęcia, elementy nawigacyjne itp.) zawsze pozostają ułożone dokładnie tak samo względem siebie. Inaczej mówiąc: jeśli np. w wybranym miejscu wstawimy zdjęcie oblane tekstem, to mamy pewność, że w każdej rozdzielczości ekranu efekt będzie taki sam, dzięki czemu unikniemy nieestetycznego ułożenia, gdy pod zdjęciem znalazłaby się tylko jedna linijka akapitu lub obok zdjęcia tylko jeden wyraz, co nie wszystkim się podoba. Mamy również pewność, że tytuły artykułów rozłożą się tak, jak to zaplanowaliśmy, tzn. np. w pojedynczej linijce, a nie w kilku wierszach.

Szerokość stałego szablonu ustala się w pikselach, ponieważ rozdzielczość ekranu określona jest właśnie w tych jednostkach. Jaka zatem powinna być ustalona szerokość? Zgodnie z danymi statystycznymi rozdzielczości o szerokości poniżej 800 pikseli to obecnie niezmierna rzadkość, dlatego zwykle tę wartość przyjmuje się jako najniższą dopuszczalną szerokość stałego szablonu, w której zajmuje on całą dostępną szerokość zmaksymalizowanego okna przeglądarki. Nie można jednak bezpośrednio przyjąć wartości 800px, ponieważ w oknie musi się jeszcze zmieścić pionowy pasek przewijania. W większości systemów operacyjnych szerokość paska przewijania wynosi 20px, a więc żaden szablon nie powinien być szerszy niż 780px - o ile wyzerujemy poziome marginesy strony.

Biorąc pod uwagę malejącą liczbę użytkowników pracujących w rozdzielczości 800x600, coraz częściej spotyka się stałe szablony, przystosowane do wyświetlania w 1024x768 i wyższych rozdzielczościach ekranu. Wtedy dostępna przestrzeń to 1004px. Jeżeli dobrze zaplanujemy taki szablon, to również użytkownicy 800x600 będą w stanie w miarę wygodnie przeglądać serwis. Nie można przecież jednocześnie korzystać z menu nawigacyjnego oraz czytać treści artykułu na stronie (chyba, że ktoś ma bardzo podzielną uwagę i dużego zeza rozbieżnego :-). Zatem przy odpowiednio dobranej szerokości bloku treści, użytkownicy niższych rozdzielczości nie będą musieli używać poziomego paska przewijania podczas czytania artykułu, a jedynie w momencie przejścia do widoku menu nawigacyjnego i odwrotnie. Kolumna bloku treści nie powinna być zatem szersza niż 780px, aby możliwe było odczytanie pełnej linijki tekstu bez potrzeby poziomego przewijania strony.


Ułóżmy nasze szablony, przedstawione na wstępie, tak aby menu i blok dodatkowych informacji rzeczywiście były pionowymi kolumnami (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone):

Dwie kolumny:

Nagłówek szablonu
Menu nawigacyjne
Treść strony
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Wyjaśnienie:

  1. Pierwszą regułą stylów w arkuszu CSS jest ustalenie domyślnego koloru tła oraz kolor tekstu w całym dokumencie. Zawsze trzeba o tym pamiętać, ponieważ użytkownik może zmienić domyślne kolory w swoim systemie operacyjnym, a wtedy przypadkowo możemy uzyskać dość osobliwy efekt kolorystyczny - np. czarny tekst na czarnym tle. Nigdy nie zakładaj, że domyślny kolor tekstu to czarny, a kolor tła - biały!
  2. W tym samym miejscu usuwamy wszystkie marginesy strony. Analogicznie postępujemy z marginesem wewnętrznym, aby zabezpieczyć się przed możliwą odmienną interpretacją w niektórych przeglądarkach. Wyzerowanie marginesu jest konieczne, aby uzyskać maksymalną dostępną przestrzeń w poziomie - dla rozdzielczości 800x600 będzie to 780px. Te oraz poprzednie deklaracje są przypisane jednocześnie elementom html oraz body, z uwagi na różnice interpretacji elementu podstawowego (korzeń - ang. root) drzewa dokumentu w niektórych przeglądarkach (element podstawowy posiada określone domyślne marginesy strony, które chcemy usunąć).
  3. Ustalamy odpowiednią szerokość szablonu, tzn. taką, aby zmieściła się w najniższej planowanej rozdzielczości ekranu - w tym przypadku 800x600. Musimy przewidzieć 20px miejsca dla suwaka do przewijania treści, dlatego ostatecznie, przy zerowych marginesach strony, ustalamy szerokość szablonu na 780px.
  4. Dla bloku nagłówka po prostu przypisujemy odrębny kolor tła, aby był lepiej widoczny na załączonych przykładach.
  5. Cała "magia" dzieje się dla bloku treści strony i menu nawigacyjnego. Normalnie wszystkie bloki szablonu były ułożone jeden pod drugim. Aby ułożyć wspomniane kolumny pionowo, użyliśmy własności float: left, wykorzystywanej zwykle przy oblewaniu elementów (np. ilustracji) tekstem. Kilka następujących po sobie bloków z określonym oblewaniem, ustawia się obok siebie - o ile mieszczą się w dostępnej szerokości ich rodzica [zobacz: Szerokość i marginesy automatycznie - "Elementy z oblewaniem (float) nie-zastępowane" - punkt nr 5]. Suma szerokość wszystkich kolumn nie może przekroczyć 780px, ponieważ jako najmniejszą dopuszczalną rozdzielczość ekranu założyliśmy 800x600 (od wartości 800 odejmujemy szerokość pionowego suwaka).
  6. Oblewane bloki kolumn posiadają również własność przepełnienia overflow: hidden. Jest to zabezpieczenie na wypadek, gdyby w ich zawartości znalazły się elementy szersze niż mogą pomieścić. W takim przypadku, w zależności od przeglądarki, zbyt szerokie elementy mogłyby zachodzić na sąsiednie bloki, zasłaniając ich zawartość albo blok taki mógłby zostać przeniesiony poniżej wcześniejszego, co zupełnie zepsułoby szablon. Własność przepełnienia po prostu obetnie niemieszczący się element - z dwojga złego lepsze chyba to, niż zupełne "rozjechanie" strony.
  7. Stopce serwisu nadajemy własność przylegania clear: both, ponieważ bez tego szablon mógłby wyglądać następująco:
    Nagłówek szablonu
    Menu nawigacyjne
    Treść strony
    Stopka serwisu
    Efekt ten wynika z ustalonego oblewania (float: left) dla środkowych bloków szablonu, które próbują wyświetlić się obok (w tym przypadku po lewej stronie) pozostałych elementów, które w kodzie źródłowym są umieszczone pod nimi. Deklaracja width: 100% została dodana tylko ze względu na błąd Internet Explorera 6.0 (w MSIE 7.0 wszystko jest w porządku), objawiający się wyświetleniem koloru tła stopki od dolnych krawędzi ustawionych powyżej oblewanych bloków, a tekstu stopki prawidłowo - poniżej nich.

Przykład:

Przykład

Trzy kolumny:

Nagłówek szablonu
Menu nawigacyjne
Dodatkowe informacje
Treść strony
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Konstrukcja analogiczna jak poprzednio z tym wyjątkiem, że kolumnę dodatkowych informacji musieliśmy przesunąć na prawą stronę, używając float: right.


Spróbujmy teraz przestawić kolejność kolumn, bez ingerencji w ustalony wcześniej kod źródłowy HTML:

Dwie kolumny:

Nagłówek szablonu
Menu nawigacyjne
Treść strony
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Tak, to tylko jedna zmieniona linijka w arkuszu stylów CSS! Pomyśl, ile plików trzeba by modyfikować, jeśli szablon byłby oparty o tabelki. Kolumna menu ustawiła się po prawej stronie, ponieważ tym razem została jej przypisana własność float: right, co wymusiło ułożenie po prawej stronie innych elementów - w tym przypadku bloku treści z ustalonym float: left.

Trzy kolumny:

Nagłówek szablonu
Menu nawigacyjne
Dodatkowe informacje
Treść strony
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Normalna kolejność wyświetlania elementów byłaby taka, jak bez żadnej stylizacji, czyli: menu nawigacyjne, dodatkowe informacje, treść. Rozpoczynamy przestawianie:

  1. Kolumna menu nawigacyjnego powinna się znaleźć po prawej stronie, a w kodzie źródłowym znajduje się na początku, zatem zostaje jej przypisana własność float: right.
  2. Kolumna dodatkowych informacji może pozostać w kolejności wynikającej z ułożenia w kodzie źródłowym, a zatem przypisujemy float: left.
  3. Kolejność bloku treści strony, wynikająca z naturalnego ułożenia, również jest odpowiednia (powinien się wyświetlić po kolumnie dodatkowych informacji, która w kodzie źródłowym poprzedza blok treści), a zatem - float: left.

Możliwe są również inne konfiguracje - np. czasami spotykane ułożenie obu wąskich kolumn po lewej, a treści po prawej stronie:

Nagłówek szablonu
Menu nawigacyjne
Dodatkowe informacje
Treść strony
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

W tym przypadku naturalna kolejność wyświetlania bloków, wynikająca z ułożenia elementów w kodzie źródłowym strony, jest odpowiednia. Przypisanie własności float: left, miało jedynie na celu ustawienie kolumn obok siebie, a nie pod sobą. Natomiast nie wpływa to na ich kolejność.

Płynny szablon

Jak wykonać szablon o szerokości dopasowującej się do rozdzielczości ekranu?

Płynny szablon (ang. liquid layout) charakteryzuje się zmianą swoich poziomych proporcji przy zmianie rozmiaru okna przeglądarki lub rozdzielczości ekranu. Najczęściej w każdych warunkach zajmuje on całą dostępną szerokość w oknie. Jest on raczej rzadziej stosowany, ze względu na niemożliwe do przewidzenia ułożenie elementów treści. Poza tym tekst w zbyt długich linijkach zwykle gorzej się czyta, ponieważ trudniej przenieść wzrok z końca wiersza na początek następnego. Czasami jednak może być wygodny, np. kiedy zawiera jakieś szerokie elementy, które mogą nie zmieścić się w ustalonej szerokości dla stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji).

W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od rozdzielczości ekranu, a w tym przypadku jest to mocno wskazane.


Cały czas jedynie stylizując niezmienny kod HTML przedstawiony na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone):

Dwie kolumny:

Nagłówek szablonu
Menu nawigacyjne
Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Wyjaśnienie:

  1. Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon.
  2. Ustalamy stałą szerokość kolumny menu nawigacyjnego, aby nie rozszerzała się przy zmianie rozmiarów okna przeglądarki ani rozdzielczości ekranu. Menu nawigacyjne zwykle zawiera elementy o ustalonej szerokości, dlatego jego rozszerzanie mogłoby być niewskazane. Ustalenie oblewania (float: left) powoduje, że kolumna ustawia się po lewej stronie następnego bloku. Deklaracja pozycjonowania relatywnego (position: relative) została dodana tylko ze względu na błąd Internet Explorera 6.0 (w MSIE 7.0 wszystko jest w porządku), objawiający się znikaniem z ekranu oblewanego bloku menu nawigacyjnego.
  3. Dla bloku treści strony tym razem nie ustalamy własności oblewania ani szerokości, dzięki czemu w miarę zmieniania rozmiarów okna przeglądarki lub rozdzielczości ekranu, szerokość tego bloku będzie się dopasowywać do nowych dostępnych rozmiarów, tak że szablon zajmie zawsze 100% szerokości okna. Na przykład przy zmaksymalizowanym oknie, w rozdzielczości 800x600 treść najprawdopodobniej przyjmie szerokość:
    800px - 20px - 150px = 630px,
    podczas gdy w rozdzielczości 1024x768:
    1024px - 20px - 150px = 854px.
  4. Lewy margines bloku treści strony powinien wynosić dokładnie tyle samo co szerokość kolumny menu nawigacyjnego, ustawionej po lewej stronie. Nie spowoduje to jednak odsunięcia treści od kolumny menu o podaną wartość marginesu, ponieważ elementy oblewane (float) - w tym przypadku kolumna menu - są usuwane z normalnego biegu treści w dokumencie. Blok treści strony nie jest oblewany tak jak menu, zatem jego margines jest liczony od lewej krawędzi okna przeglądarki, a nie od prawej krawędzi kolumny menu. Margines ten jest konieczny, ponieważ bez niego, kiedy blok treści byłby wyższy od kolumny menu, dolna część tekstu znalazłaby się pod kolumną menu, przylegając do lewej krawędzi okna. Zatem margines przygotowuje miejsce na kolumnę menu, która została ustawiona dokładnie nad nim. Możliwy efekt bez lewego marginesu:
    Nagłówek szablonu
    Menu nawigacyjne
    Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
    Stopka serwisu
  5. Stopka serwisu posiada przypisaną wartość przylegania clear: both, ponieważ w przeciwnym razie mogłaby się ustawić obok kolumny menu nawigacyjnego, które jest oblewane:
    Nagłówek szablonu
    Menu nawigacyjne
    Treść strony
    Stopka serwisu

Przykład:

Przykład

Trzy kolumny:

Nagłówek szablonu
Menu nawigacyjne
Dodatkowe informacje
Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Sytuacja analogiczna jak poprzednio, jednak teraz musimy ustawić kolumnę dodatkowych informacji po prawej stronie treści strony (float: right), a co za tym idzie, blok treści posiada dodatkowy prawy margines o wartości równej szerokości prawej kolumny, czyli dodatkowych informacji.


Odwrotna kolejność:

Dwie kolumny:

Nagłówek szablonu
Menu nawigacyjne
Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Trzy kolumny:

Nagłówek szablonu
Menu nawigacyjne
Dodatkowe informacje
Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Jeszcze inne ustawienie:

Nagłówek szablonu
Menu nawigacyjne
Dodatkowe informacje
Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
Stopka serwisu
html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 300px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}
Facebook