Jag utgår från en typisk kolumnlayout för vårt projekt. Innan jag presenterar detta projekt live och i färg vill jag konkret visa er hur ni själva kan implementera kolumnlayout. Fokus kommer här att ligga på två- och trespaltiga layouter, eftersom dessa fortfarande utgör grunden för de flesta webbsidor.
Den ultimata klassikern inom webbdesign är förmodligen tvåspaltaren. I det vänstra fönsterområdet presenteras oftast navigeringen, medan det faktiska innehållet visas i den högra kolumnen. I samband med bloggar har detta beteende förresten förändrats något. Faktum är att i många bloggar visas navigering eller reklam till höger, medan det faktiska innehållet presenteras till vänster.
Denna typ av tillämpningar kan relativt enkelt implementeras med CSS. Faktum är att tvåspaltarna är den enklaste layoutformen.
I det följande exemplet kommer jag att visa en tvåspaltare som använder absoluta procentvärden.
Här är det fullständiga exemplet:
<!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">Navigering</div>
<div id="main">Detta är innehållsområdet</div>
<div id="footer">Här finns upphovsrättsinformationen.</div>
</body>
</html>Och så här ser det ut i webbläsaren:
Ni kan förresten enkelt flytta den vänstra kolumnen till höger. Justera följande anvisningar:
• Ändra värdet från left: 0 till right: 0 för #nav.
• För #main, ändra bara margin-left till margin-right.
När ändringarna har sparats kommer det önskade resultatet att visas.
Ett problem som den visade layouten baserad på absolut positionering har dock är att om innehållet i den vänstra kolumnen blir mer omfattande, sträcker den sig över fotbottenområdet.
Detta beror helt enkelt på att för absolut positionerade element görs ingen "plats reservation". Det går att undvika problemet genom att lägga till motsvarande innehåll i huvudområdet som är längre än det i den vänstra kolumnen.
Du bör således endast använda denna layoutform om du är säker på att huvudområdet faktiskt är högre än den vänstra (eller högra) kolumnen.
En tvåspaltare med float
Problemet med överlappande fotbottenområdet som uppstod i det tidigare exemplet kan åtgärdas genom att använda egenskapen float. Den ändrade syntaxen ser ut så här:
<!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">Navigeringsområde</div>
<div id="main">Detta är innehållsområdet</div>
<div id="footer">Här finns upphovsrättsinformation.</div>
</body>
</html>Här har båda kolumnerna tilldelats egenskapen float. Således är kolumnerna från och med nu placerade bredvid varandra.
Vänsterkolumnen tilldelas en bredd på 20 procent. Lägg särskild uppmärksamhet på att en float-positionerad element alltid förväntar sig en breddangivelse.
Det faktiska innehållsområdet får en bredd på 80 procent. Även detta område placeras med float: left, vilket resulterar i att det visas bredvid den vänstra kolumnen.
För att fotbottenområdet faktiskt alltid ska vara synligt i den nedre fönsterdelen - alltså under kolumnerna - används följande syntax:
#footer {
clear: both;
}
Jag hade redan nämnt möjligheten att definiera en egen klass för denna variant.
En trespaltare med float
Också trespaltaren är en populär variant inom webbdesign. En typisk uppdelning ser då ut som följer:
• Den vänstra kolumnen innehåller navigeringen.
• I den mellersta kolumnen finns det faktiska innehållet.
• Till höger visas ytterligare information eller reklam.
Här nedan finner ni ett exempel där en flexibel trespaltare skapas. Syntaxen - som ni snart kommer att upptäcka - är ganska lik den för den tidigare tvåspaltaren. Dock finns det nu med right ett ytterligare div-område som i slutändan representerar högerfönsterkolumnen.
<!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 för navigering</div>
<div id="main">Detta är innehållsområdet</div>
<div id="right">Detta är högra kolumnen</div>
<div id="footer">Här finns upphovsrättsinformationen.</div>
</body>
</html>
Det nya området har tilldelats en bredd på 20 procent. Så uppdelningen ser ut på följande sätt:
• Vänster och höger kolumn tar var sin 20 procent av den tillgängliga annonsytan.
• Mittenkolumnen har en bredd på 60 procent.
Genom den visade syntaxen visas right-området faktiskt till höger.
Syntaxen är dock flexibel i denna fråga. Du kan också anpassa main-området på följande sätt:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Här sattes float till right. Därigenom flyttas right-området till vänster.
I denna handledning har du sett hur enkelt det är att definiera grundlayouter baserat på float. Denna kunskap utgör nu grunden för att bygga en webbplats. I kommande handledningar kommer en webbplats att utvecklas steg för steg, med start från grundstrukturen.
