Maak een twee koloms lay-out
Als je goed kijkt hebben veel websites een basis van twee kolommen. Links het menu
en rechts, een stuk breder de inhoud. Met behulp van HTML en CSS gaan we zo’n lay-out
maken. Hiervoor gebruiken we geen tabellen meer. Deze beschouwen we vanaf nu als achterhaald.
We beginnen eerst met de basis van onze pagina. we gaan ervan uit dat de basis van HTML
bekend is, daarom gaan we nu niet in op de hele opmaak van een html-document.
Bovenaan komt de titel van de site en links komt het menu, aan de rechterkant de tekst,
maar in de code komt de hoofdtekst eronder. Hierna komt de code voor de basis van de pagina.
we hebben een aantal onderdelen al in een div gezet. Deze hebben we nu even vetgedrukt, dat
hoeft in je eigen code natuurlijk niet.
<div id=”header”>Titel van de website</div>
<div id=”menu”>
Menu<br />
<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>
De code hierboven geeft de volgende pagina als resultaat:
Nu zie je eigenlijk waar HTML voor bedoeld is, namelijk de kale opmaak voor een tekst.
de lay-out gaan we nu met CSS bepalen. We hebben al een aantal zaken bepaald, namelijk
de namen van de div’s. We hebben de header, het menu en de tekst. De header moet bovenin
komen, links moet het menu komen en de rest van de pagina is voor de tekst. Om de tekst
komt nog een zwarte rand. De volgende CSS-code heb je hiervoor nodig:
body {
margin: 0px;
padding: 0px;
font-family: Georgia, Times, Serif;
color: black;
width: 600px;
}
#header {
background-color: #666;
color: white;
font-size: 28px;
}
#menu {
position: absolute;
top: 40px;
left: 10px;
width: 160px;
margin-left: 10px;
padding-top: 20px;
}
#tekst {
position: absolute;
top: 30px;
left: 180px;
padding-top: 20px;
margin: 0px 10px 0px 50px;
}
Dat was de Stijl, voeg deze of extern of in de html-pagina toe en het resultaat is als volgt:
En hierbij nog even de volledige broncode:
<!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: 40px;
left: 10px;
width: 160px;
margin-left: 10px;
padding-top: 20px;
}
div#tekst {
position: absolute;
top: 30px;
left: 180px;
padding-top: 20px;
margin: 0px 10px 0px 50px;
}
</style>
</head>
<body>
<div id=”header”>Titel van de website</div>
<div id=”menu”>
Menu<br />
<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>
</body>
</html>
