Eg går utifrå eit typisk kolonnelayout i prosjektet vårt. Før eg presenterer dette prosjektet live og i farge, vil eg spesifikt vise dykk korleis de sjølv kan implementere kolonnelayouts. Fokuset her vil vere på to- og trespalteoppsett, sidan desse framleis utgjer grunnlaget for dei fleste nettstadene.
Den altoverskyggande klassikaren innan webdesign er kanskje tospalten. I det venstre vindusområdet presenteres vanlegvis navigasjonen, medan den eigentlege innhaldet er synleg i høgrespalta. I samanheng med bloggar har denne atferda faktisk endra seg litt. Faktisk viser mange bloggar navigasjonen eller reklamen til høgre, medan den eigentlege innhaldet blir presentert til venstre.
Slike applikasjonar kan implementerast relativt enkelt i CSS. Faktisk er tospaltene den enklaste layoutforma.
Eg vil i det følgjande eksempelet vise ein tospalter som kjem ut med absolutte prosentverdiar.
Her er det fullstendige eksempelet:
<!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">Layout med absolutt posisjonering</div>
<div id="nav">Navigasjon</div>
<div id="main">Dette er innhaldsområdet</div>
<div id="footer">Her står opphavsrettsinformasjonen.</div>
</body>
</html>Og slik ser det ut i nettlesaren:
Du kan forresten enkelt flytte den venstre kolonna til høgre. Juster følgande instruksjonar:
• I #nav endrar du verdien left: 0 til right: 0.
• I #main gjer du berre margin-left om til margin-right.
Etter at endringane er lagra, vil du sjå det ønska resultatet.
Problemet med det viste layoutet basert på absolutt posisjonering er imidlertid følgjande: Dersom innhaldet i den venstre kolonna blir større, går det over fotområdet.
Dette skuldast rett og slett at det ikkje blir "holdt av plass" for absolutt posisjonerte element. Problemet kan unngås ved å legge til passande innhald i hovudområdet som er lengre enn det i den venstre kolonna.
Du bør derfor berre bruke denne layoutforma når du er sikker på at hovudområdet faktisk er høgare enn den venstre (eller høgre) kolonna.
Ein tospalter med float
Problemet med overlappinga i fotområdet som oppstod i det føregåande eksempelet kan løysast ved å bruke eigenskapen float. Den endra syntaksen ser slik ut:
<!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">Layout med absolutt posisjonering</div>
<div id="nav">Området for navigasjon</div>
<div id="main">Dette er innhaldsområdet</div>
<div id="footer">Her står opphavsrettsinformasjonen.</div>
</body>
</html>Dei to kolonnene har no fått eigenskapen float. Då blir kolonnene no plassert ved sida av kvarandre.
Den venstre kolonna får ei breidde på 20 prosent. Pass spesielt på at eit element plassert med float alltid forventar ei breiddeangjeving.
Det eigentlege innhaldsområdet får ei breidde på 80 prosent. Også dette området blir plassert med float: left. Difor vil dette området bli vist ved sia av den venstre kolonna.
For at fotområdet faktisk alltid skal vere i nedre vindusområdet – altså under kolonnane – blir følgjande syntaks brukt:
#footer {
clear: both;
}
Eg hadde allereie vist til moglegheita for å definere eit eige klasse for denne varianten.
Ein trespalter med float
Også trespaltaren er ein populær variant innan webdesign. Ein typisk inndeling ser slik ut:
• Den venstre kolonna inneheld navigasjonen.
• I midtkolonna finn ein det eigentlege innhaldet.
• Til høgre blir det vist tilleggsinformasjon eller reklame.
Nedanfor finn de eit eksempel der det blir oppretta ein fleksibel trespalter. Syntaksen er – som de vil sjå snart – ganske lik den for tospaltaren som vart vist tidlegare. Men no er det ein ekstra div-område, right, som til slutt representerer høgrespalten.
<!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">Layout mit absoluter Positionierung</div>
<div id="nav">Der Bereich für die Navigation</div>
<div id="main">Das ist der Inhaltsbereich</div>
<div id="right">Das ist die rechte Spalte</div>
<div id="footer">Hier stehen die Copyright-Informationen.</div>
</body>
</html>
Den nye delen er tildelt en bredde på 20 prosent. Dermed ser fordelingen ut som følger:
• Venstre og høyre kolonne tar hver 20 prosent av den tilgjengelige visningsområdet.
• Midtkolonnen har en bredde på 60 prosent.
Ved den viste syntaksen blir right-delen faktisk vist til høyre.
Syntaksen er imidlertid fleksibel på dette punktet. Du kan også tilpasse hoveddelen på følgende måte:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Her ble float satt til right. Dermed beveger right-delen seg mot venstre.
I denne opplæringen har du sett hvor enkelt det er å definere grunnleggende layouter basert på float. Denne kunnskapen danner nå grunnlaget for opprettelsen av en nettside. I de neste opplæringene vil en nettside gradvis begynne å ta form, med start i grunnstrukturen.
