W projekcie praktycznym zakładam standardowy układ kolumnowy. Zanim jednak zaprezentuję ten projekt na żywo, chciałbym wam konkretne pokazać, jak samodzielnie implementować układy kolumnowe. W centrum uwagi będą znajdować się układy dwu- i trójkolumnowe, które nadal stanowią podstawę większości stron internetowych.
Klasyczny układ w projektowaniu stron internetowych to z pewnością dwukolumnowy. W lewym obszarze okna zazwyczaj prezentowana jest nawigacja, podczas gdy w prawej kolumnie można zobaczyć właściwą treść. W kontekście blogów zachowanie to trochę się zmieniło. Faktycznie, w wielu blogach po prawej stronie wyświetlana jest nawigacja lub reklama, podczas gdy po lewej prezentowana jest właściwa treść.
Tego typu zastosowania można względnie łatwo zrealizować przy użyciu CSS. Faktycznie, dwukolumnowy układ jest najprostszą formą układu.
W poniższym przykładzie pokażę dwukolumnowy układ, który obejdzie się bez wartości absolutnych i procentowych.
Oto pełny przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Układ z pozycjonowaniem absolutnym</div>
<div id="nav">Nawigacja</div>
<div id="main">To jest obszar treści</div>
<div id="footer">Tutaj znajdują się informacje o prawach autorskich.</div>
</body>
</html>I tak to wygląda w przeglądarce:
Możecie zresztą łatwo przesunąć lewą kolumnę w prawo. Aby to zrobić, należy dostosować następujące instrukcje:
• Dla #nav zmienić wartość z left: 0 na right: 0.
• Dla #main po prostu zamieńcie margin-left na margin-right.
Po zapisaniu zmian można zobaczyć pożądany wynik.
Jednak układ oparty na pozycjonowaniu absolutnym ma jedną wadę: jeśli treść lewej kolumny stanie się dłuższa, przekroczy obszar stopki.
Dzieje się tak dlatego, że dla elementów pozycjonowanych absolutnie nie "zarezerwowano miejsca". Można temu zaradzić, wprowadzając odpowiednie treści do obszaru głównego, które są dłuższe niż te w lewej kolumnie.
Ten rodzaj układu warto zastosować tylko wtedy, gdy jesteście pewni, że obszar główny rzeczywiście jest wyższy niż lewa (lub prawa) kolumna.
Dwukolumnowy z użyciem float
Problem z nachodzącym obszarem stopki, który wystąpił w poprzednim przykładzie, można rozwiązać, stosując właściwość float. Zmieniona składnia wygląda następująco:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Układ z pozycjonowaniem absolutnym</div>
<div id="nav">Obszar nawigacji</div>
<div id="main">To jest obszar treści</div>
<div id="footer">Tutaj znajdują się informacje o prawach autorskich.</div>
</body>
</html>Tutaj obie kolumny zostały wyposażone w właściwość float. Dzięki temu kolumny są teraz ustawione obok siebie.
Lewej kolumnie przypisano szerokość 20 procent. Zwróćcie szczególną uwagę, że element pozycjonowany za pomocą float zawsze oczekuje określenia szerokości.
Rzeczywisty obszar treści otrzymuje szerokość 80 procent. Również ten obszar jest pozycjonowany za pomocą float: left. Dzięki temu obszar ten zostanie wyświetlony obok lewej kolumny.
Aby stopka była zawsze na samym dole okna - czyli pod kolumnami - użyto następującej składni:
#footer {
clear: both;
}
Zwrócono uwagę na możliwość zdefiniowania własnej klasy dla tej wersji wcześniej.
Trójkolumnowy z użyciem float
Również trójkolumnowy jest często wybieraną opcją w projektowaniu stron internetowych. Typowy podział wygląda mniej więcej tak:
• Lewa kolumna zawiera nawigację.
• W środkowej kolumnie znajduje się właściwa treść.
• Po prawej wyświetlane są dodatkowe informacje lub reklamy.
Poniżej znajdziesz przykład, w którym zbudowany zostanie elastyczny trójkolumnowy układ. Składnia - jak zaraz zauważysz - jest bardzo podobna do wcześniej pokazanego dwukolumnowego. Tym razem jednak pojawia się dodatkowy div o nazwie right, który ostatecznie reprezentuje prawą kolumnę okna.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Układ z absolutnym pozycjonowaniem</div>
<div id="nav">Obszar nawigacyjny</div>
<div id="main">To jest obszar treści</div>
<div id="right">To jest kolumna prawa</div>
<div id="footer">Tutaj znajdują się informacje o prawach autorskich.</div>
</body>
</html>
Dla nowej sekcji przypisano szerokość 20 procent. Układ będzie więc wyglądał następująco:
• Lewa i prawa kolumna zajmują po 20 procent dostępnej przestrzeni reklamowej.
• Środkowa kolumna ma szerokość 60 procent.
Przykładowa składnia powoduje, że obszar right rzeczywiście jest wyświetlany po prawej stronie.
Składnia w tym punkcie jest elastyczna. Możecie dostosować obszar main w następujący sposób:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Tutaj ustawiono float na right. W rezultacie right obszar przesunął się w lewą stronę.
W tym samouczku pokazano, jak łatwo można definiować podstawowe układy na podstawie float. Ta wiedza stanowi teraz podstawę dla budowy strony internetowej. W kolejnych samouczkach strona będzie stopniowo rozwijana, zaczynając od struktury podstawowej.
