Jeg går ud fra en typisk kolonnelayout i vores praksisprojekt. Før jeg dog præsenterer dette projekt live og i farver, vil jeg helt konkret vise jer, hvordan I selv kan implementere kolonnelayouts. Fokus vil her være på to- og trespaltelayouts, da disse stadig udgør basis for størstedelen af hjemmesider.
Klassikeren inden for webdesign er uden tvivl to-spaltedesignet. I det venstre vinduesområde præsenteres navigationen ofte, mens det faktiske indhold vises i højre spalte. Når det kommer til blogs, har denne opførsel dog ændret sig lidt. Faktisk vises navigationen eller reklamer ofte til højre i mange blogs, mens det faktiske indhold præsenteres til venstre.
Denne form for applikationer kan relativt nemt implementeres ved hjælp af CSS. Faktisk er to-spalterne den enkleste layoutform.
I det følgende eksempel vil jeg vise en to-spalter, der kan gøres med absolutte procentværdier.
Her er det fulde eksempel:
<!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 absolut positionering</div>
<div id="nav">Navigation</div>
<div id="main">Dette er indholdsområdet</div>
<div id="footer">Her vises copyright-informationerne</div>
</body>
</html>Og sådan ser det ud i browseren:
I kan forresten nemt flytte den venstre spalte til højre. Tilpas følgende instruktioner:
• I #nav ændres left: 0 til right: 0.
• I #main ændres margin-left til simpelthen margin-right.
Når ændringerne er gemt, vises det ønskede resultat.
Problemet med det viste layout baseret på absolut positionering har dog en ulempe: Hvis indholdet i den venstre spalte bliver større, løber det ned over fodområdet.
Dette skyldes ganske enkelt, at der ikke er "frigjort plads" til absolut positionerede elementer. Man kan omgå problemet ved at indsætte passende indhold i hovedområdet, som er længere end det i den venstre spalte.
I bør kun bruge denne layoutform, hvis I er sikre på, at hovedområdet faktisk er højere end den venstre (eller højre) spalte.
En to-spalter med float
Problemet med det overlappende fodområde, som opstod i det forrige eksempel, kan løses ved at bruge float-egenskaben. Den ændrede syntaks ser sådan ud:
<!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 absolut positionering</div>
<div id="nav">Området for navigation</div>
<div id="main">Dette er indholdsområdet</div>
<div id="footer">Her vises copyright-informationerne</div>
</body>
</html>Her blev begge søjler udstyret med float-egenskaben. Dermed er søjlerne nu placeret ved siden af hinanden.
Den venstre søjle får en bredde på 20 procent. Vær især opmærksom på, at et element positioneret ved hjælp af float altid forventer en breddeangivelse.
Det faktiske indholdsområde får en bredde på 80 procent. Også dette område positioneres ved float: left, hvilket resulterer i, at dette område vises ved siden af den venstre søjle.
For at sikre, at fodområdet altid vises i bunden af vinduet - altså under søjlerne - bruges følgende syntaks:
#footer {
clear: both;
}
Jeg havde allerede nævnt muligheden for at definere en egen klasse for dette layout.
Trespalter med float
Også trespalteren er en populær variant inden for webdesign. En typisk opdeling ser her således ud:
• Den venstre søjle indeholder navigationen.
• I midtsøjlen er det faktiske indhold.
• Til højre vises yderligere oplysninger eller reklamer.
Nedenfor finder I et eksempel, hvor der oprettes en fleksibel trespaltet. Syntaksen er - som I straks vil bemærke - ret ens med den to-spaltede, der blev vist tidligere. Dog er der nu med right et ekstra div-område, som i sidste ende repræsenterer højre vinduessøjle.
<!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 med absolut positionering</div>
<div id="nav">Området til navigation</div>
<div id="main">Dette er indholdsområdet</div>
<div id="right">Dette er højre kolonne</div>
<div id="footer">Her er ophavsretsoplysningerne.</div>
</body>
</html>
Det nye område blev tildelt en bredde på 20 procent. Så opdelingen ser sådan ud:
• Venstre og højre kolonne udgør hver 20 procent af den tilgængelige visningsområde.
• Den midterste kolonne har en bredde på 60 procent.
Den viste syntaks gør det faktisk muligt at vise right-området til højre.
Syntaksen er dog fleksibel på dette punkt. I kunne også tilpasse main-området på følgende måde:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Her blev float sat til right. Dermed flyttes right-området mod venstre.
I denne vejledning har I set, hvor let det er at definere grundlæggende layouts baseret på float. Denne viden danner nu grundlaget for opbygning af en hjemmeside. I de kommende vejledninger vil en hjemmeside blive opbygget trin for trin, startende med grundstrukturen.
