Centreren met CSS/HTML

Heey,

Hoe kan ik met CSS/HTML de gehele layout centreren?
De Broncode:

<html>
<head>
<style type="text/css">
/*Standaard waarden*/

body {
    background-color: #FFFFFF;
    padding: 0;
    margin: 0;
}

h1 {
    color: #000000;
    font-size: 140%;
    font-family: Calibri Hoofdtekst;
    padding-left: 2%;
    padding-top: 2%;
}

img {
    border: none;
}

p {
    color: #000000;
    font-size: 90%;
    font-family: Calibri Hoofdtekst;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 8%;
}

/*De layout over het hele scherm*/

#container {
width: 960px;
margin: 0px auto;
}

.rondehoeken {
    background: #336699;
    color: #000000;
    border: none;
    margin: 4%;
    margin-top: 5%;
    padding: 0;
}

.header ul {
    background: url(hoeken.gif) -15px -15px no-repeat;
    height: 15px;
    list-style: none;
    margin: 0;
}
.header ul li {
    float: right;
    background: url(hoeken.gif) 0px -15px no-repeat;
    width: 15px;
    line-height: 15px;
}

#inhoud {
    padding: 0 15px;
    display: block;
}
ol li {
    margin-bottom: 10px;
}

.footer ul {
    background: url(hoeken.gif) -15px 0px no-repeat;
    height: 15px;
    list-style: none;
    margin: 0;
}
.footer ul li {
    float: right;
    background: url(hoeken.gif) 0px 0px no-repeat;
    width: 15px;
    line-height: 15px;
}

#vak1, a {
    color: #000000;
    font-size: 100%;
    font-family: Calibri Hoofdtekst;
    text-decoration: none;
    list-style: none;
}

#vak1, a:hover {
    color: #000000;
    text-decoration: none;
    list-style: none;
}

#vak1 {
    background-color: #4876ff;
    height: 199.5px;
    width: 192px;
    float: left;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    border-right: 1px solid #0000cd;
    white-space: nowrap;
}

#vak2 {
    background-color: #4876ff;
    height: 370.5px;
    width: 192px;
    float: left;
    position: absolute;
    top: 199.5px;
    left:0;
    border-top: 1px solid #0000cd;
    border-right: 1px solid #0000cd;
}

#vak3 {
    background-color: #4876ff;
    height: 302.1px;
    width: 480px;
    float: left;
    position: absolute;
    top: 267.9px;
    left: 192px;
    border-right: 1px solid #0000cd;
}

#vak4 {
    background-color: #4876ff;
    height: 267.9px;
    width: 480px;
    float: left;
    position: absolute;
    top: 0;
    left: 192px;
    border-bottom: 1px solid #0000cd;
    border-right: 1px solid #0000cd;
}

#vak5 {
    background-color: #4876ff;
    height: 569px;
    width: 288px;
    float: left;
    position: absolute;
    left: 672px;
    top: 0;
    border: none;
}
</style>
<title>Homepagina</title>
</head>
<body>
<div id="container">
<div id="vak1">
<div class="rondehoeken">
    <div class="header"><ul><li>&nbsp;</li></ul></div>
    <div id="inhoud">
        <a href="#"><img src="house.png" alt="Home"/>&nbsp;&nbsp;Beginpagina</a><br/>
        <a href="#"><img src="key_add.png" alt="Inloggen"/>&nbsp;&nbsp;Inloggen</a><br/>
        <a href="#"><img src="key_go.png" alt="Aanmelden"/>&nbsp;&nbsp;Aanmelden</a><br/>
        <a href="#"><img src="comment.png" alt="Forum"/>&nbsp;&nbsp;Forum</a><br/>
    </div>
    <div class="footer"><ul><li>&nbsp;</li></ul></div>
</div>
</div>
<div id="vak2">
<div class="rondehoeken">
    <div class="header"><ul><li>&nbsp;</li></ul></div>
    <div id="inhoud">
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 01</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 02</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 03</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 04</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 05</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 06</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 07</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 08</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 09</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 10</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 11</a><br/>
        <a href="#"><img src="house.png" alt="Optie"/>&nbsp;&nbsp;Optie 12</a><br/>
    </div>
    <div class="footer"><ul><li>&nbsp;</li></ul></div>
</div>
</div>
<div id="vak3">
    <h1>Lorem Ipsum</h1>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut leo at ligula ultrices semper. Quisque in tellus molestie odio convallis aliquet. Donec iaculis laoreet eros. Maecenas vitae leo id risus aliquam euismod. Aliquam erat volutpat. Cras venenatis auctor orci. Donec rutrum dapibus nulla. 
        <p>
Donec eu purus. Proin nec velit. Morbi lorem orci, hendrerit sed, interdum nec, facilisis non, diam. In sodales, purus vel convallis dapibus, risus nunc pharetra lacus, eu blandit massa odio pretium odio. 
        <p>
Sed hendrerit elementum sapien. Vivamus eget augue sed neque pharetra suscipit. Praesent eget magna et turpis condimentum iaculis.
</div>
<div id="vak4">
</div>
<div id="vak5">
</div>
</div>
</body>
</html>

Ohja, en er ontbreekt nog het één en ander, wat erg belangrijk kan zijn, maar ik had nog even geen tijd gehad om dat op te zoeken.

hoe bedoel je centeren?

Oh, sorry! Ik bedoelde het in het midden zetten van de gehele layout.

Hier kan je de code en layout zien:
http://www.oefenen.t35.com/php.php

<DIV align=center>layout</DIV>

Doet het niet.
Iemand misschien nog iets anders?

uhm
ff denken hoor

margin-left: auto;
margin-right: auto;

volgens mij

of padding inplaats van margin

Pfff, ik weet niet wat dat is, maar het lukt niet.

Sjoerd schreef:

uhm

ff denken hoor

margin-left: auto;
margin-right: auto;

volgens mij

of padding inplaats van margin

body {
background-color: #FFFFFF;
margin: 0;
padding: 0;
}

dat verander je dus met

body {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}

of padding
ik weet niet welk

Doe tie ook al niet.

<style type="text/css">
div#container{
width: 900px;//Breedte van je layout.
margin: 0px auto;
}
</style>
<div id="container">
Layout.
</div>

Lukt ook niet, ik zal wel even de broncode plaatsen, misschien dat het dan wat duidelijker wordt.
Broncode staat in het eerste bericht, nu!

Als je naar www.iwebs.be gaat en je neemt contact op kan je gewoon in o2x betalen.

<center>hiercode</center>

Dan zet je álles in het midden hea.

Dat wil hij toch ook?

Rubenmaxie schreef:

Ik bedoelde het in het midden zetten van de gehele layout.