Een drie-koloms layout maken in CSS
In een
eerder artikel hebben we een layout gemaakt die verdeeld was over twee kolommen. Nu gaan we
een layout maken die drie kolommen bevat. Weer met behulp van CSS, en niet met tabellen.
Het resultaat van de twee kolommen was als volgt:
We gebruiken weer dezelfde opzet als in het vorige artikel, waarvan je de broncode
hier kunt vinden. Neem deze code over, maar maak er een
nieuwe div bij waar je bijvoorbeeld ‘Laatste Nieuws’ in plaatst. Dus bijvoorbeeld zo:
<div id=”nieuws”>
<h3>Laatste Nieuws</h3>
<small>10 mei 07</small><br>
<b>Website gestart</b>
<p>vandaag zijn we gestart met een nieuwe website en de site moet een succes worden, want hij is
gemaakt met css en in drie kolommen verdeeld.</p>
<small>9 mei 07</small><br>
<b>Website niet gestart</b>
<p>vandaag zijn we nog niet gestart met een website omdat we nog niet wisten hoe het moest.</p>
</div>
Deze div plaats je na de div met id ’tekst’. vervolgens gaan we wat aanpassingen doen in het stijlblad.
Het enige wat we aanpassen is de breedte van div id=”tekst”, deze was in de eerdere situatie niet benoemt,
nu geven we deze de waarde 400px mee. De hele pagina maken we namelijk 800 pixels breed.
Vervolgens geven we de waardes mee een de nieuwe div.
div#nieuws {
font-size: 80%;
float: right;
top: 30px;
width: 160px;
padding-top: 20px;
margin: 0px 10px 0px 50px;
}
#nieuws h3 {
font-size: 140%;
}
#nieuws p{
font-style: italic;
}
De laatste twee zijn toegevoegd om de layout wat leuker te maken. Daar kun je natuurlijk vanaf zien.
het resultaat is als volgt:
Nu nog even de hele code. Hierbij hebben we de stijl in het html document geplaatst.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”>
<head>
<title>Lay-out</title>
<style type=”text/css” media=”all”>
body {
margin: 0px;
padding: 0px;
font-family: Georgia, Times, Serif;
color: black;
width: 800px;
}
div#header {
background-color: #666;
color: white;
font-size: 28px;
}
div#menu {
position: absolute;
top: 30px;
left: 10px;
width: 160px;
margin-left: 10px;
padding-top: 20px;
}
div#tekst {
position: absolute;
top: 30px;
left: 180px;
width: 400px;
padding-top: 20px;
margin: 0px 10px 0px 10px;
}
div#nieuws {
font-size: 80%;
float: right;
top: 30px;
width: 160px;
padding-top: 20px;
margin: 0px 10px 0px 50px;
}
#nieuws h3 {
font-size: 140%;
}
#nieuws p{
font-style: italic;
}
</style>
</head>
<body>
<div id=”header”>Titel van de website</div>
<div id=”menu”>
<h3>Menu</h3>
<br />
<a href=index.htm>Home</a><br />
<a href=archief.htm>Archief</a><br />
<a href=tekst.htm>Tekst</a><br />
<a href=spreken.htm>Spreken</a><br />
<a href=contact.htm>Contact</a><br />
</div>
<div id=”tekst”>
<h3>Lorem Ipsum dolor sit</h3>
Lorem ipsum menandri instructior concludaturque quo ex, unum cetero verear mel ad.
Eros autem his at, ne paulo disputationi vim, cu inermis delicatissimi vis. Amet iudico labores
et eum, eu ullum inimicus eum. Cu sed iisque forensibus. Ex pro erat nonummy, quot error corpora
est ne. No est albucius adipisci, ius
<br /><br />
lorem integre an. Has te petentium delicatissimi, mel ea sumo voluptua.
Dicat etiam audiam no nam, pri cu dicant noster argumentum, an perpetua incorrupte has.
Abhorreant voluptatibus sed eu. Pri ex solet mucius accusata, his posse sententiae in. Ei duis labores
est, eam graeci patrioque ut, sumo magna signiferumque. </div>
<div id=”nieuws”>
<h3>Laatste Nieuws</h3>
<small>10 mei 07</small><br>
<b>Website gestart</b>
<p>vandaag zijn we gestart met een nieuwe website en de site moet een succes worden, want hij is gemaakt met css en in drie kolommen verdeeld.</p>
<small>9 mei 07</small><br>
<b>Website niet gestart</b>
<p>vandaag zijn we nog niet gestart met een website omdat we nog niet wisten hoe het moest.</p>
</div>
</body>
</html>
