Szablon strony WWW na div-ach o płynnej szrokości
W artykule: „Szablon strony WWW na div-ach o stałej szerokości” opisałem sposób budowy szablonu portalu internetowego, ale o stałej z góry wyznaczonej szerokości. W niniejszym wpisie omówię w jaki sposób stworzyć szablon witryny internetowej, tak aby jego szerokość była dopasowana do szerokości ekranu.
Płynny szablon
Płynny szablon (ang. liquid layout) wyróżnia się tym, że zmienia swoje poziome proporcje wraz ze zmianą szerokości okna przeglądarki lub rozdzielczości ekranu. Tego typu rozwiązanie jest rzadko stosowane przez webmasterów, ze względu na to, że nie da się do końca przewidzieć w jaki sposób ułożą się elementy strony oraz utrudnia to czytanie tekstu ponieważ trudniej jest przenieść wzrok do następnej linii.
Szablon dwukolumnowy
Przygotujmy nasz pierwszy szablon, będzie on zawierał dwie kolumny przeznaczone na treść, nagłówek oraz stopkę. Graficznie prezentuje się on tak:
A jego kod będzie wyglądał tak:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#header {
background-color: #888;
}
#nav {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#content {
margin-left: 150px;
background-color: #fff;
}
#footer {
clear: both;
background-color: #888;
}Kod HTML:
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
< body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
< /body>
</html>Objaśnienie:
- Pierwszy blok stylów odpowiedzialny jest za ustalenie domyślnego tła, koloru czcionki oraz wyzerowanie marginesów (zewnętrznych – margin oraz wewnętrznych – padding).
- Następnie ustalamy kolor nagłówka strony.
- W kolejnym punkcie ustalamy położenie lewej kolumny (przeznaczonej na menu główne), jej szerokość oraz kolor tła.
- Teraz przypisujemy style do kolumny głównej, ustalamy jej położenie oraz kolor tła.
- W ostatnim kroku, przypisujemy style stopce naszego portalu.
Szablon trzykolumnowy
Szablon trzykolumowy, zawiera trzy pionowe kolumny, z reguły są to dwie wąskie oraz jedna szeroka przeznaczona na główną treść. Mogą one być ułożone w różnych wariantach np. dwie wąskie po bokach, a szeroka na środku, szeroka po lewej stronie, a obok dwie wąskie itd. My skorzystamy z pierwszego wariantu i umieścimy dwie wąskie kolumny przy prawej i lewej krawędzi a pomiędzy nimi kolumnę szeroką. Szablon graficznie będzie wyglądał tak:
Oraz kod:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#header {
background-color: #888;
}
#left {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#right {
width: 150px;
float: right;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#content {
margin-left: 150px;
margin-right: 150px;
background-color: #fff;
}
#footer {
clear: both;
background-color: #888;
}Kod HTML:
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
< body>
<div id="header">header</div>
<div id="left">left</div>
<div id="content">content</div>
<div id="right">right</div>
<div id="footer">footer</div>
< /body>
</html>Objaśnienie:
- Pierwszy blok stylów odpowiedzialny jest za ustalenie domyślnego tła, koloru czcionki oraz wyzerowanie marginesów (zewnętrznych – margin oraz wewnętrznych – padding).
- Następnie ustalamy kolor nagłówka strony.
- W kolejnym punkcie ustalamy położenie lewej kolumny (przeznaczonej na menu główne), jej szerokość oraz kolor tła.
- Potem ustalamy położenie prawej kolumny (przeznaczonej na informacje dodatkowe), jej szerokość oraz kolor tła.
- Teraz przypisujemy style do kolumny głównej, ustalamy jej położenie oraz kolor tła.
- W ostatnim kroku, przypisujemy style stopce naszego portalu.
