Een layout horizontaal centreren met CSS

Info 
Door: Blizt Moeilijkheidsgraad: 1/3
Views:23.672Reacties: 10(Bekijken)
  Log in om zelf te reageren
 Waardering:8.5/10 (4 stemmen)



Een layout horizontaal centreren met CSS

Een woord vooraf

UchihaNick kwam op IRC met het idee een tutorial te maken over "die witte stukken op wsm", m.a.w.: het horizontaal centreren van een website. Zelf gebruik ik dit regelmatig, dus geen probleem. Echter zitten er wel wat haken en ogen aan. Met name met IE werkt het niet zomaar, daarom zal ik in dit artikel gebruik maken van verschillende browsers. Vaak zal ik het heben over Firefox, in dit geval bedoel ik ook Mozilla en in veel gevallen ook Opera, tenzij anders vermeld.

Centreren in browsers anders dan IE 5.x

Laten we beginnen een heel simpel documentje te maken.
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Voorbeeld van horizontaal centreren met CSS</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
<h1>Voorbeeld van horizontaal centreren met CSS</h1>
<div id="maincontent">
Zie [url=../]Een layout horizontaal centreren met CSS[/url] voor het artikel waar dit voorbeeld bij hoort.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tellus lectus, rutrum sit amet, malesuada suscipit, ultrices vel, ante. Praesent fermentum. Suspendisse non urna. Nulla leo. Mauris blandit quam. Maecenas varius odio egestas wisi. Morbi ultrices euismod pede. Maecenas in ligula. In eu tellus malesuada sapien scelerisque tempus. Praesent odio pede, pulvinar eget, mattis mollis, varius sed, ligula.
Pellentesque quis quam. Proin eu dolor. Curabitur pretium lacinia lacus. Nunc fringilla condimentum risus. Pellentesque pellentesque pellentesque ligula. Praesent lobortis varius nunc. Donec orci. Integer a wisi. Nulla facilisi. Sed a diam at ante aliquam auctor. Duis dictum venenatis diam. Nullam vel urna. Nam in dolor ac dolor gravida varius. Mauris hendrerit egestas elit. Duis euismod, nisl ac porta imperdiet, nibh massa viverra metus, sed consequat nulla tortor vitae arcu. Pellentesque tempor lacus in elit. Aliquam erat volutpat. In et lorem. Cras non wisi. Duis vitae nibh eu tortor fringilla lobortis.
Nulla quis mauris. Suspendisse non ligula sed erat interdum tincidunt. Donec sed odio sit amet justo pretium dignissim. Vestibulum vitae diam. Morbi rhoncus lorem. Nullam mi diam, gravida a, eleifend eget, venenatis ut, ligula. Suspendisse in ipsum. Aliquam erat volutpat. Donec rutrum vehicula nunc. Proin a ante eu eros commodo semper. Pellentesque consectetuer libero tristique lacus ullamcorper dapibus. Sed vel nibh. Pellentesque id sem. Cras aliquet tempus est.
Quisque pretium nibh eget orci. Vivamus varius. Aliquam eu lectus. Curabitur justo enim, bibendum suscipit, suscipit vel, vehicula vel, urna. Proin eu nunc vel lacus vestibulum facilisis. Suspendisse velit magna, imperdiet ullamcorper, fringilla eu, tincidunt eget, lectus. Vivamus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec posuere vulputate lectus. Sed non ipsum. Donec mollis, justo nec laoreet aliquam, quam tellus auctor lorem, in ullamcorper dui mi eget nibh. Nam nec massa. Donec hendrerit placerat justo. Praesent velit. Proin pellentesque quam eget felis. Morbi eu dolor at erat sollicitudin viverra. Nullam quis risus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras convallis dolor quis nibh. Maecenas dui quam, molestie sit amet, fringilla sit amet, nonummy non, mauris. Cras at nisl quis magna luctus viverra. In suscipit sagittis neque. Curabitur lacinia adipiscing mi. Maecenas sit amet nisl. Nullam feugiat orci a elit. Donec ante. Aliquam erat volutpat. Aenean nunc odio, condimentum a, consectetuer in, auctor sit amet, magna. Curabitur turpis diam, gravida non, vehicula non, nonummy hendrerit, wisi. Curabitur lacus. Donec pretium gravida ante. Nam purus.
Vivamus sed mauris. Phasellus enim. Mauris mattis ornare ante. Aliquam erat volutpat. Phasellus semper mi nec dolor. Morbi et lectus ac dolor ornare bibendum. Fusce ullamcorper orci vel metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lorem erat, malesuada eu, cursus sit amet, facilisis sit amet, felis. Vivamus volutpat, metus non malesuada dignissim, neque tellus pharetra wisi, vel pretium nibh ipsum ac magna. Pellentesque mattis. Ut est metus, viverra rhoncus, suscipit a, imperdiet a.
</div>
<p id="copyright">©2005 Crystal Labs
Niets bijzonders lijkt me? Als je het niet snapt, kun je misschien beter even HTML: de basis van iedere website lezen. Nu moeten we nog zorgen dat deze website horizontaal gecentreerd staat. Om dit te doen gaan we aan de slag met CSS. Om duidelijk onderscheid te maken, geven we de body een andere kleur dan de html-achtergrond. Dit doen we zo:
#Code
1
2
3
4
5
6
7
8
9
html
{
background-color:#FFF;
}

body
{
background-color:#F54;
}
Nu zal je hele achtergrond #F54 zijn in Firefox, maar in Internet Explorer zie je al een verschil. Nu gaan we zorgen dat de website horizontaal gecentreerd staat in de browsers met de volgende CSS:
#Code
1
2
margin:0 auto;
width:600px;
Op deze manier is de website 600 pixels breedt, en staat deze altijd perfect in het midden van het venster. Als je geen rekening hoeft te houden met IE5.x ben je dus klaar met de volgende CSS:
#Code
1
2
3
4
5
6
7
8
9
10
11
html
{
background-color:#FFF;
}

body
{
background-color:#F54;
margin:0 auto;
width:600px;
}

Centreren in Internet Explorer

Helaas moet er in bedrijfssituaties vaak wel rekening gehouden worden met IE 5.x, dus moeten we hier ook wat voor verzinnen. Dit kan heel simpel door gebruik te maken van text-align:center;. Hier hebben we echter wel een extra div voor nodig. De nieuwe HTML wordt dan:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Voorbeeld van horizontaal centreren met CSS</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
<div id="container">
<h1>Voorbeeld van horizontaal centreren met CSS</h1>
<div id="maincontent">
Zie [url=../]Een layout horizontaal centreren met CSS[/url] voor het artikel waar dit voorbeeld bij hoort.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tellus lectus, rutrum sit amet, malesuada suscipit, ultrices vel, ante. Praesent fermentum. Suspendisse non urna. Nulla leo. Mauris blandit quam. Maecenas varius odio egestas wisi. Morbi ultrices euismod pede. Maecenas in ligula. In eu tellus malesuada sapien scelerisque tempus. Praesent odio pede, pulvinar eget, mattis mollis, varius sed, ligula.
Pellentesque quis quam. Proin eu dolor. Curabitur pretium lacinia lacus. Nunc fringilla condimentum risus. Pellentesque pellentesque pellentesque ligula. Praesent lobortis varius nunc. Donec orci. Integer a wisi. Nulla facilisi. Sed a diam at ante aliquam auctor. Duis dictum venenatis diam. Nullam vel urna. Nam in dolor ac dolor gravida varius. Mauris hendrerit egestas elit. Duis euismod, nisl ac porta imperdiet, nibh massa viverra metus, sed consequat nulla tortor vitae arcu. Pellentesque tempor lacus in elit. Aliquam erat volutpat. In et lorem. Cras non wisi. Duis vitae nibh eu tortor fringilla lobortis.
Nulla quis mauris. Suspendisse non ligula sed erat interdum tincidunt. Donec sed odio sit amet justo pretium dignissim. Vestibulum vitae diam. Morbi rhoncus lorem. Nullam mi diam, gravida a, eleifend eget, venenatis ut, ligula. Suspendisse in ipsum. Aliquam erat volutpat. Donec rutrum vehicula nunc. Proin a ante eu eros commodo semper. Pellentesque consectetuer libero tristique lacus ullamcorper dapibus. Sed vel nibh. Pellentesque id sem. Cras aliquet tempus est.
Quisque pretium nibh eget orci. Vivamus varius. Aliquam eu lectus. Curabitur justo enim, bibendum suscipit, suscipit vel, vehicula vel, urna. Proin eu nunc vel lacus vestibulum facilisis. Suspendisse velit magna, imperdiet ullamcorper, fringilla eu, tincidunt eget, lectus. Vivamus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec posuere vulputate lectus. Sed non ipsum. Donec mollis, justo nec laoreet aliquam, quam tellus auctor lorem, in ullamcorper dui mi eget nibh. Nam nec massa. Donec hendrerit placerat justo. Praesent velit. Proin pellentesque quam eget felis. Morbi eu dolor at erat sollicitudin viverra. Nullam quis risus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras convallis dolor quis nibh. Maecenas dui quam, molestie sit amet, fringilla sit amet, nonummy non, mauris. Cras at nisl quis magna luctus viverra. In suscipit sagittis neque. Curabitur lacinia adipiscing mi. Maecenas sit amet nisl. Nullam feugiat orci a elit. Donec ante. Aliquam erat volutpat. Aenean nunc odio, condimentum a, consectetuer in, auctor sit amet, magna. Curabitur turpis diam, gravida non, vehicula non, nonummy hendrerit, wisi. Curabitur lacus. Donec pretium gravida ante. Nam purus.
Vivamus sed mauris. Phasellus enim. Mauris mattis ornare ante. Aliquam erat volutpat. Phasellus semper mi nec dolor. Morbi et lectus ac dolor ornare bibendum. Fusce ullamcorper orci vel metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lorem erat, malesuada eu, cursus sit amet, facilisis sit amet, felis. Vivamus volutpat, metus non malesuada dignissim, neque tellus pharetra wisi, vel pretium nibh ipsum ac magna. Pellentesque mattis. Ut est metus, viverra rhoncus, suscipit a, imperdiet a.
</div>
<p id="copyright">©2005 Crystal Labs
</div>
Nieuw is dus de div#container. Ook maken we een nieuwe css-file, die er als volgt uitziet:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
html,body
{
text-align:center;
background-color:#FFF;
}

div#container
{
margin:0 auto;
background-color:#F54;
width:600px;
text-align:left;
}

10 reacties
Jannix Geplaatst op 14-06-2009 om 02:28
 

Regular
Misschien handig om erbij te zetten hoe je een rand om je body pagina maakt?
"border: 2px solid #000;"
odie Geplaatst op 20-01-2009 om 11:12
 

Regular
Hartelijk dank voor deze nuttige post ;-) Ik was echt aan 't vloeken op dat centreren, dat liep uiteraard fout met de verschillende resoluties. Weer iets bijgeleerd ;-)
odie Geplaatst op 20-01-2009 om 10:50
 

Regular
Hartelijk dank voor deze nuttige post ;-) Ik was echt aan 't vloeken op dat centreren, dat liep uiteraard fout met de verschillende resoluties. Weer iets bijgeleerd ;-)
Onbekend lid Geplaatst op 07-02-2007 om 23:22
 

Spammer
Werkt prima in IE, maar in firefox wordt alles rechts uitgelijnd...
Ideetjes om dit op te lossen ??

dit is de site
http://users.pandora.be/nessler/movies.html
Blizt Geplaatst op 10-07-2005 om 21:08
 

Webmaster
Opgelost. :) Waarschijnlijk iets misgegaan in m'n regexp search/replace, zal er nog wel 'ns naar kijken.

Pagina 1 2 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder