[CSS] horizontaal gecentreerd - positionering probleem

[C3La]

Ik heb in de search gezocht maar kan geen oplossing vinden voor het volgende probleem...

Ik wil een website maken die lijkt op de layout van deze site (http://www.bobelsdale.com/) - Ik weet dat hier met flash wordt gewerkt, maar zo wil ik de layout van mijn site ook maken.

Het moet een site worden die centraal op de bladzijde komt, ook als je het venster verkleint of vergroot. De afstand vanaf boven moet 20 pixels bedragen.
Er komen 5 delen in:
1 logo (top left) (50 x 60 px)
2 header (top naast logo) (500 x 60 px)
3 main knoppenbalk (80 px onder logo uiterst left) (100 x 400 px)
4 extra knoppenbalk (10 px onder header, zelfde uitlijning) (500 x 70 px)
5 hoofdvenster voor text - evt. opgevuld met tabellen. (linksonder marge links en bottom 5 px) (490 x 500 px)

Daarvoor doe ik het volgende:
Ik plaats in de body een layer van 600 bij 640 pixels met een padding van 15% aan de linkerkant en een margin-top van 20 pixels.

Alleen kom ik nu in de knoop als ik de delen tov. de body probeer te positioneren. Met absolute of fixed positioneren bewegen ze niet mee met de padding die verdwijnt als je de pagina vergroot of verkleint.
Als je positioneert met relative dan krijg ik ze niet goed gepositioneerd tov. de body maar blijven ze tov elkaar gepositioneerd staan (en dus onder elkaar in een rijtje).

Wat doe ik hier verkeerd en belangrijker --> hoe moet ik het goed doen...
Kennelijk doe ik iets erg lastigs als ik de pagina centraal wil laten uitlijnen...

Hieronder een copy van de css:

____
.Mainframe {
height: 650px;
width: 600px;
position: static;
top: 100px;
border: thin solid #CCCCCC;
}
.logo {
height: 60px;
width: 50px;
padding-top: 5px;
padding-left: 5px;
border: thin solid #999999;
position: relative;
left: 0px;
top: 0px;
}
.Title {
height: 50px;
width: 500px;
position: relative;
top: 5px;
right: 5px;
border: thin solid #999999;
}
.menubalkvert {
height: 500px;
width: 80px;
border: thin solid #999999;
left: 5px;
top: 80px;
}
.menubalkhor {
border: thin solid #999999;
position: relative;
z-index: 2;
height: 60px;
width: 500px;
top: 60px;
right: 5px;
}
.textfield {
height: 500px;
width: 500px;
border: thin solid #999999;
position: relative;
z-index: 2;
top: 135px;
right: 0px;
}

[HyperioN]

Een "container"-div maken (of is dat je Mainframe al?) en die deze dingen meegeven:

Cascading Stylesheet:

width: 600px;
position: relative;
margin: 0 auto;

Dit is al heel erg vaak langsgeweest en heel erg makkelijk te vinden met Google.
[google=css center div]

[ Voor 109% gewijzigd door HyperioN op 18-12-2005 17:54 ]

[C3La]

Ik ben een CSS-n00b en als dit idd gesneden cookie is dan mag deze wel dicht...

Ik weet alleen niet, omdat ik een n00b ben hoe ik mijn probleem moet omschrijven en waar ik dan op moet zoeken. Ik verdrink een beetje in alle nieuwe termen...

Dus ik zou een <div> container moeten maken op de body en daarvanuit verder moeten werken? Okee, is daar een truuk voor als je vanuit visual mode werkt in Dreamweaver of moet je dan code inkloppen? (niet dat dat een probleem is hoor)

Dank dank dank!

[XangadiX]

inderdaad met wat zoeken op het forum is deze vraag goed te vinden. Voor de terminologie is het misschien handig http://www.w3schools.com eens te bezoeken. Ik gooi deze dicht om het matige niveau en omdat het antwoord al gegeven is.