Pri našem projektnem delu predvidevam tipično postavitev stolpcev. Preden pa projekta predstavim v živo in v barvah, vam želim konkretno pokazati, kako lahko sami ustvarite postavitev stolpcev. V ospredju bodo dvostolpčne in trosolpčne postavitve, saj te še vedno tvorijo osnovo večine spletnih strani.
Klasičen primer v oblikovanju spletnih strani je dvostolpična postavitev. V levem okenskem območju je običajno prikazana navigacija, medtem ko je v desnem stolpcu prikazana dejanska vsebina. V zvezi z blogi se je to obnašanje nekoliko spremenilo. V mnogih blogih se zdaj v desnem stolpcu prikaže navigacija ali oglaševanje, medtem ko je v levem stolpcu prikazana dejanska vsebina.
Takšne aplikacije je mogoče precej preprosto izvesti v CSS. Dvostolpične postavitve so dejansko najpreprostejša oblika postavitve.
V spodnjem primeru vam bom pokazal dvostolpično postavitev, ki uporablja absolutne odstotne vrednosti.
Tukaj je celoten primer:
<!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">Postavitev z absolutnim pozicioniranjem</div>
<div id="nav">Navigacija</div>
<div id="main">To je vsebinsko območje</div>
<div id="footer">Tukaj so navedene informacije o avtorskih pravicah.</div>
</body>
</html>In tako to izgleda v brskalniku:
Težava v prikazani postavitvi na osnovi absolutnega pozicioniranja pa je: Če je vsebina levega stolpca obsežnejša, se razteza prek območja stopala.
Dvostolpec s plavanjem
Težava, ki se je pojavila v prejšnjem primeru prekrivanja območja stopala, pa se lahko reši z uporabo lastnosti float. Spremenjena sintaksa izgleda takole:
<!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">Postavitev z absolutnim pozicioniranjem</div>
<div id="nav">Območje za navigacijo</div>
<div id="main">To je vsebinsko območje</div>
<div id="footer">Tukaj so navedene informacije o avtorskih pravicah.</div>
</body>
</html>Tukaj sta bila oba stolpca opremljena s lastnostjo float. S tem sta stolpca od zdaj naprej postavljena drug ob strani drugega.
Na možnost določitve lastnega razreda za to različico sem že opozoril.
Troslopec s plavanjem
Tudi troslopec je v oblikovanju spletnih strani priljubljena možnost. Tipična razdelitev bi v tem primeru izgledala takole:
• Lev stolpec vsebuje navigacijo.
• V sredinskem stolpcu je dejanska vsebina.
• Na desni se prikazujejo dodatne informacije ali oglaševanje.
Spodaj najdete primer, kjer je ustvarjen prilagodljiv troslopec. Sintaksa je - kot boste kmalu ugotovili - podobna sintaksi prejšnjega dvostolpca. Vendar pa je tu z uporabo right dodatnega div območja, ki predstavlja desni stolpec.
<!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">Postavitev z absolutno pozicioniranjem</div>
<div id="nav">Območje za navigacijo</div>
<div id="main">To je vsebinsko območje</div>
<div id="right">To je desni stolpec</div>
<div id="footer">Tukaj so informacije o avtorskih pravicah.</div>
</body>
</html>
Novemu območju je bila dodeljena širina 20 odstotkov. Torej je razdelitev videti takole:
• Leva in desna stolpca vsak zasedeta 20 odstotkov razpoložljivega prostora za prikaz.
• Sredinski stolpec ima širino 60 odstotkov.
Z uporabljeno sintakso se bo območje right dejansko prikazalo na desni strani.
Sintaksa je v tem primeru prilagodljiva. Main območje lahko prilagodite tudi na naslednji način:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Tukaj je bil float nastavljen na right. S tem se bo območje right premaknil v levo stran.
V tem vadnem programu ste videli, kako enostavno je mogoče z uporabo float določiti osnovne postavitve. To znanje je zdaj osnova za gradnjo spletne strani. V naslednjih vadnicah se bo spletna stran počasi ustvarjala, začenši z osnovnim ogrodjem.
