Lähenen meie praktiline projekt eeldab tüüpilist veergude paigutust. Enne kui ma selle projekti aga avalikult ja värviliselt esitan, tahan teile täpselt näidata, kuidas saate ise veergude paigutusi rakendada. Siin keskendume kahe- ja kolmespuldilistele paigutustele, kuna need moodustavad endiselt enamiku veebisaitidest.
Üks kõigi veebidisaini klassikute seas on ilmselt kahes-veerg. Vasakus aknas esitatakse tavaliselt navigatsioon, samal ajal kui paremas tulbas on näha tegelik sisu. Seoses blogidega on see käitumine muutunud. Tegelikult kuvatakse paljudes blogides paremal navigatsiooni või reklaame, samal ajal kui vasakul kuvatakse tegelik sisu.
Selliseid rakendusi saab CSS-i abil võrdlemisi lihtsalt rakendada. Tegelikult on kahes-veergud kõige lihtsam paigutusvorm.
Järgmises näites näitan kahes-veergu, mis tuleb välja absoluutsete protsentuaalsete väärtustega.
Siin on täisnäide:
<!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">Paigutus absoluutse positsioneerimisega</div>
<div id="nav">Navigatsioon</div>
<div id="main">See on sisu ala</div>
<div id="footer">Siin on autoriõiguse teave.</div>
</body>
</html>Ja nii see välja näeb brauseris:
Muide, saate vasaku tulba lihtsalt paremale nihutada. Selleks muutke järgmised juhised:
• #nav juures muutke left: 0 väärtuseks right: 0.
• #main puhul muutke lihtsalt margin-left arvutuseks margin-right.
Pärast salvestamist kuvatakse soovitud tulemus.
Vaatamata sellele, et absoluutse positsioneerimise põhjal näidatud paigutusel on üks probleem: kui vasaku tulba sisu muutub mahukamaks, ulatub see üle jaluse ala.
Seda seetõttu, et absoluutselt positsioneeritud elementidele ei "jää ruumi vabaks". Probleemi saab vältida, lisades peasisule vastavad sisud, mis on pikemad kui vasakul tulbas olevad.
Peaksite selle paigutusvormi kasutama ainult siis, kui olete kindel, et põhiala on tegelikult kõrgem kui vasak (või parem) tulp.
Kahes-veerg floatiga
Eelmises näites esinenud probleemi jalusealase ülekattumise lahendamiseks kasutage float-omadust. Muudetud süntaks on järgmine:
<!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">Paigutus absoluutse positsioneerimisega</div>
<div id="nav">Navigatsiooniala</div>
<div id="main">See on sisu ala</div>
<div id="footer">Siin on autoriõiguse teave.</div>
</body>
</html>Mõlemad veerud on selles näites varustatud float-omadusega. Seetõttu on veerud nüüd kõrvuti.
Vasakule veerule määratakse 20 protsenti laius. Pöörake erilist tähelepanu sellele, et float-iga positsioneeritud element eeldab alati laiuse määramist.
Tegelik sisualal saab 80-protsendilise laiuse. Ka seda ala positsioneeritakse float: left abil. Seetõttu kuvatakse see ala vasaku tulba kõrval.
Selleks, et jalusala oleks alati akna alumises osas - seega veergude all - kuvatakse järgmine süntaks:
#footer {
clear: both;
}
Olin juba osutanud selle variandi jaoks omaenda klassi määratlemise võimalusele.
Kolmespulgaline floatiga
Kolmes-veerus on veebidisainis samuti populaarne valik. Siin näeks tüüpiline jaotus välja järgmine:
• Vasakul tulbas on navigatsioon.
• Keskmises tulbas on tegelik sisu.
• Paremal kuvatakse täiendavat teavet või reklaame.
Allpool on näide paindlikust kolmest tulbast. Süntaks on - nagu märkate - sarnane eelnevalt näidatud kahes-veergule. Siiski on nüüd olemas right täiendav div-ala, mis esindab lõpuks paremat aknasaart.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Juhendid.ee</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">Paigutus absoluutse paigutusega</div>
<div id="nav">Navigeerimisala</div>
<div id="main">See on sisuala</div>
<div id="right">See on parem veerg</div>
<div id="footer">Siin on autoriõiguse teave.</div>
</body>
</html>
Uuele alale on määratud laius 20 protsenti. Seega jaotub see järgmiselt:
• Vasak ja parem veerg hõlmavad mõlemad 20 protsenti saadaolevast kuvaalast.
• Keskmine veerg on laiusega 60 protsenti.
Näidatud süntaksi abil kuvatakse right-alal tegelikult parempoolselt.
Selles punktis on süntaks aga paindlik. Võiksite main-ala muuta järgmiselt:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Siin on määratud float väärtuseks right. Selle tulemusena liigub right-ala vasakule poole.
Selles õpetuses nägite, kui lihtne on float põhjal määrata põhiraamistikke. See teadmine moodustab nüüd veebisaidi loomise aluse. Järgmistes õpetustes kujuneb veebisait samm-sammult, alustades alusraamistikust.
