3 Kolommen layout met CSS

Hoort bij: CSS — Tags:3 kolommen, cascading stylesheet, CSS, layout, template, voorbeeld — admin @ 12 juli 2007 23:37

In deze tutorial leg ik je uit hoe je aan de hand van CSS een website layout kan maken met 3 kolommen en zeker niet te vergeten, een layout die er hetzelfde uitziet in internet explorer als in mozilla firefox.

We zullen een layout maken die er als volgt uit gaat zien.

De CSS layout maken

Stap 1:

De eerste tag die we gaan stylen is de body tag. Deze maken we als volgt.

body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #E6FECD;
}

De text-align: center; gaat ervoor zorgen dat de volledige layout in het midden van het scherm staat in internet explorer. Bij de rest van de instellingen moet ik niet veel uitleg geven. Deze zijn gewoon om de achtergrond en het letertype in te stellen.

Stap 2:

We gaan nu een div tag aanmaken die we gaan gebruiken om onze layout volledig in te plaatsen. Deze geven we de id total (je mag hier natuurlijk ook een andere naam aan geven).

Deze total div stylen we als volgt.

#total {
background-color: #FDD3A6;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}

De margin-right en margin-left zijn hier zeer belangrijk. Deze gaan ervoor zorgen dat de layout in mozilla browsers in het midden van het scherm komt te staan. De text-align: left; doen we omdat we op de body een text-align: center; hadden gedaan waardoor anders al onze tekst binnen de total div gecentreerd zal worden.

De blauwe rand in onderstaande afbeelding geeft aan waar de total div tag zich bevindt in de layout.

Total div tag

Stap 3:

Nu gaan we de header, links menu, rechts menu en content stylen.

#header {
height: 80px;
width: 800px;
text-align: center;
background-color:
#FAA547;
}
#leftContent {
width: 140px;
float: left;
background-color: #FDD3A6;
padding: 5px;
}
#centerContent {
float: left;
width: 490px;
padding: 5px;
background-color: #FFFFCC;
}
#rightContent {
float: left;
width: 140px;
background-color: #FDD3A6;
padding: 5px;
}

De float: left; gaat ervoor zorgen dat de content divs naast elkaar geplaatst gaan worden. Let erop dat als je een padding instelt, dat je die padding dan moet aftrekken van de breedte. Om dit te verduidelijken geef ik even een voorbeeldje. Heb je bijvoorbeeld 150px breedte ingesteld zonder een padding in te stellen, dan zal dit echt als 150px getoond worden. Stel je bijvoorbeeld 150px breedte in en padding langs links en rechts van 10px dan zal de breedte 170px in totaal zijn.

Stap 4:

En als laatste maken we nog een footer aan. Deze stylen we als volgt.

#footer {
font-size: 10px;
color: #333333;
height: 14px;
width: 800px;
clear: both;
text-align: center;
background-color: #FCBE7A;
}

Hierbij is de clear: both; belangrijk. Deze gaat ervoor zorgen dat de footer mooi onder de content-boxen blijft.

Het resultaat

stylesheet.css

body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #E6FECD;
}
#total {
background-color: #FDD3A6;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
height: 80px;
width: 800px;
text-align: center;
background-color: #FAA547;
}
#leftContent {
width: 140px;
float: left;
background-color: #FDD3A6;
padding: 5px;
}
#centerContent {
float: left;
width: 490px;
padding: 5px;
background-color: #FFFFCC;
}
#rightContent {
float: left;
width: 140px;
background-color: #FDD3A6;
padding: 5px;
}
#footer {
font-size: 10px;
color: #333333;
height: 14px;
width: 800px;
clear:both;
text-align: center;
background-color: #FCBE7A;
}
p {
padding: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
}
h1 {
font-size: 36px;
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

index.htm code

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>3 Kolommen layout met CSS</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="total">
<div id="header">
<h1>Header</h1>
</div>
<div id="leftContent">
<p>Links menu </p>
<p>Menu tekst </p>
</div>
<div id="centerContent">
<p>Content </p>
<p>Dit is de content box. Deze CSS layout is gemaakt met behulp
van<a href="http://www.computerfaq.be/read/CSS/92/3-Kolommen-
layout-met-CSS/"> een tutorial op www.computerfaq.be</a>. <br />
<br />
</p>
</div>
<div id="rightContent">
<p>Rechts menu</p>
<p>Menu tekst </p>
</div>
<div id="footer">CSS Layout by
<a href="http://www.computerfaq.be">computerfaq.be</a>
</div>
</div>
</body>
</html>

Bekijk het voorbeeld

Stem of voeg toe aan :

Reacties

4 reacties »

[…] Iedereen kent het waarschijnlijk wel, je wil iets gaan afprinten van het internet maar als je dan het afdrukvoorbeeld bekijkt is het één grote rommelhoop. Voor deze tutorial baseer ik me op de layout die ik maakte in de 3 kolommen layout tutorial. […]

Pingback door Printer stylesheet | ComputerFAQ — 7 augustus 2008 09:51 @ 09:51
erg mooi en de voettekst blijft mooi onder aan de content hangen maar als je nu een menu in de linkerkolom hebt gemaakt hoe zorg je er dan voor dat de content dan in het midden gedeelte komt????

Reactie door André — 14 augustus 2008 22:00 @ 22:00
Dat is toch automatisch zo. Laat anders eens zien wat je gemaakt hebt. Dan kan ik je beter helpen.

Reactie door admin — 15 augustus 2008 07:50 @ 07:50
Inspringen bij de code..dat maakt het overzichtelijker..

Reactie door Ik — 10 oktober 2008 12:02 @ 12:02

Zoeken