af Jonas Astrup, HTML.dk
Sidst opdateret 18. november 2000
Denne artikel beskriver hvordan man kan benytte Cascading Style Sheets (CSS) til at opbygge sider med spalter og menuer. I lang tid har webdesignere i mangel af bedre benyttet tabeller til dette formål. Men med CSS2's positioning og float er det nu muligt at klare disse opgaver på en langt smartere måde.
Få ting er stærkere end vanens magt, og mange webdesignere er vant til at benytte tabeller til at opbygge deres sider. Derfor indledes artiklen med nogle argumenter for hvorfor du overhovedet skal læse videre:
Dette var blot tre ud af en række argumenter - håber du blev overbevist nok til at læse videre?
CSS giver dig 2 grundlæggende metoder at arbejde med: position og float.
Med CSS positioning kan du blandt andet placere elementer relativt eller absolut. Forskellen på det to metoder er udgangspunktet hvorfra man angiver placeringen. Ved en absolut positionering er udgangspunktet øverste venstre hjørne af siden, mens en relativ positionering tager sit udgangspunkt på det sted hvor elementet er placeret på siden.
Som eksempel kan vi kigge på to bokse (opmarkeret med <div>). Den ene boks, skal placeres 100px fra toppen, og 100px fra venstre side af dokumentet. Den anden boks skal forskydes 300px til højre i forhold til det sted hvor den ellers ville være placeret. Dette eksempel kunne således kodes på følgende måde:
...
<style type="text/css">
#boks1 {
position:absolute;
top:100px;
left:100px;
}
#boks2 {
position:relative;
top:0px;
left:300px;
}
</style>
...
<div id="boks1">
<p>Denne boks er placeret 100px fra top
og 100px fra venstre side</p>
</div>
<div id="boks2">
<p>Denne boks er forskudt 300 px til højre</p>
</div>
...
Som du kan se af ovenstående simple eksempel giver CSS positioning altså meget fleksible muligheder for at placere elementer. CSS positioning indeholder flere og mere avancerede funktioner - disse vil ikke blive gennemgået i denne artikel.
Den anden grundlæggende metode der er til rådighed er floats. Et "float" er en boks, som enten er justeret til højre eller venstre.
Som et eksempel på floats kan vi benytte et billede som skal justeres til venstre, og omgives af noget tekst. Et typisk eksempel på en situation, hvor man tidligere ville have benyttet en tabel:
...
<style type="text/css">
#billedeboks {
float:left;
width: 150px;
}
</style>
...
<div id="billedeboks">
<p><img src="billede.jpg"></p>
</div>
<p>Hos ediscit et hos arto stipata theatro spectat
Roma potens; habet hos numeratque poetas ad nostrum tempus
Livi scriptoris ab aevo, si nimis antique, si dure.</p>
...
Vi har nu kigget på de to grundlæggende metoder. Lad os prøve at kigge på nogle konkrete eksempler på hvordan metoderne kan anvendes.
Lad os prøve at lave en klassisk venstrestillet menu ved hjælp af CSS Positioning.
Vores menu skal være 150px bred. For at skabe plads til menuen definerer vi en venstre-margin på vores dokument på 160px. De ekstra 10px skal skabe lidt luft mellem menuen og sidens tekst. Marginen defineres med margin-left direkte på vores <body>:
...
<style type="text/css">
body {
margin-left:160px;
}
</style>
...
<p>Hos ediscit et hos arto stipata theatro spectat
Roma potens; habet hos numeratque poetas ad nostrum tempus
Livi scriptoris ab aevo, si nimis antique, si dure.....</p>
Den latinske tekst er blot medtaget for at illustruere den html-kode, som udgør selve indholdet af dokumentet.
Det næste skridt er at opmarkere en boks indeholdende den html-kode, som udgør menuen. Denne boks identificeres med et id - vi kunne jo passende kalde boksen for "menu".
...
<style type="text/css">
body {
margin-left:160px;
}
</style>
...
<p>Hos ediscit et hos arto stipata theatro spectat
Roma potens; habet hos numeratque poetas ad nostrum tempus
Livi scriptoris ab aevo, si nimis antique, si dure.....</p>
<div id="menu">
<ul>
<li>Menupunkt 1</li>
<li>Menupunkt 2</li>
<li>Menupunkt 3</li>
</ul>
</div>
Det sidste skridt er så at få placeret menuen på det rigtige sted. I dette tilfælde er det meget simpelt, idet vores menu jo blot skal starte f.eks. 100px nede fra øverste venstre hjørne og være 150px bred.
Dette klares ved at tilføje følgende tilføjelse til vores stylesheet:
...
<style type="text/css">
body {
margin-left:160px;
}
#menu {
position:absolute;
top: 0px;
left: 0px;
width: 150px;
}
</style>
...
<p>Hos ediscit et hos arto stipata theatro spectat
Roma potens; habet hos numeratque poetas ad nostrum tempus
Livi scriptoris ab aevo, si nimis antique, si dure.....</p>
<div id="menu">
<ul>
<li>Menupunkt 1</li>
<li>Menupunkt 2</li>
<li>Menupunkt 3</li>
</ul>
</div>
Sådan! vi har nu lavet en meget simpel venstrestillet menu med CSS. Der er masser af muligheder for at lave mere avancerede funktioner med borders etc. - det er bare at gå igang.
Det næste eksempel vi vil kigge på er hvordan man laver en side med spalter. Man kan naturligvis diskutere hvor anvendelige spalter er på et website. Men spalterne kan jo bruges til meget andet end bare tekst, f.eks. menuer, lister med opdateringer, eller noget helt andet, som netop passer til dit website.
Vi ønsker at lave en side med 3 spalter, derfor er selve udgangspunktet 3 bokse indeholdende den kode, som skal udgøre spalterne. Boksene opmarkeres som ovenfor med elementet <div>, og identificeres med et id - i dette tilfælde "spalte1", "spalte2" og "spalte3".
Herefter specificeres bredden på spalterne - vi vælger at sætte dem til 33%. Selve effekten med at sidestille spalterne opnås herefter blot ved at floate spalterne til venstre. Da spalterne netop kun fylder en tredjedel af sidebredden vil de så at sige glide op ved siden af hinanden og give den ønskede effekt:
...
<style type="text/css">
#spalte1 {
float:left;
width: 33%;
}
#spalte2 {
float:left;
width: 33%;
}
#spalte3 {
float:left;
width: 33%;
}
</style>
...
<div id="spalte1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="spalte2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<div id="spalte3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
Vi har i denne artikel set på hvordan man istedet for tabeller med fordel kan benytte CSS til at opbygge sine sider med. Det er dog væsentligt at huske på at alle sider skal kunne læses og give mening uden CSS. Nogle brugere har måske ældre browsere, nogle benytter måske en skærmlæser eller lignende.
For at tage dette hensyn skal man blot sørge for at have en meningsfyldt rækkefølge på elementerne i sit html-dokument. Overskrifter skal f.eks. komme før teksten - også når dokumentet vises uden stylesheet
