Nieuw lid |
|
Dit is de oplossing!
Zie je wel Roy,
Wat je fout had gedaan was dit,
body, html {background-color: black; margin: 0 auto; font-family: Calibri, Arial; font-size: 14px; color: black;}
Hier had je de 'margin: 0 auto;' op moeten zetten. Maar niet alleen hier!
code {font-size: 12px; }
#header {background: url(../imgs/header.png) top center no-repeat; width: 950px; height: 152px;}
#container {margin: 0 auto; width: 950px; background: url(../imgs/body_b8.png) repeat-y;}
Ook op je gehele container moet je de margin toepassen want die houd natuurlijk alles netjes bij elkaar, de rest word vanzelf gecentreert.
#content_top { background: url(../imgs/content_top.png) center top no-repeat; width: 950px; height: 19px;}
#body_bg { background-color: white; width: 928px; border: 0px; border: 0px; margin-left:1px; padding-left: 20px; padding-top: 10px; padding-bottom: 10px;}
Wat jij "fout" deed was dit **
#content_inner { width: 900px; border: 0px; } #content_bottom { background-image: url(../imgs/content_bottom.png); width: 950px; height: 19px; }
Waar dit voor staat wist ik niet? Het lijkt me dat je het wou gebruiken als buitenkant ofzo, heb er maar niet aangezeten of veranderd.
body, html {background-color: black; margin: 0 auto; font-family: Calibri, Arial; font-size: 14px; color: black;} Hier had je de 'margin: 0 auto;' op moeten zetten. Maar niet alleen hier! code {font-size: 12px; } #header {background: url(../imgs/header.png) top center no-repeat; width: 950px; height: 152px;} #container {margin: 0 auto; width: 950px; background: url(../imgs/body_b8.png) repeat-y;} Ook op je gehele container moet je de margin toepassen want die houd natuurlijk alles netjes bij elkaar, de rest word vanzelf gecentreert. #content_top { background: url(../imgs/content_top.png) center top no-repeat; width: 950px; height: 19px;} #body_bg { background-color: white; width: 928px; border: 0px; border: 0px; margin-left:1px; padding-left: 20px; padding-top: 10px; padding-bottom: 10px;} Wat jij "fout" deed was dit ** #content_inner { width: 900px; border: 0px; } #content_bottom { background-image: url(../imgs/content_bottom.png); width: 950px; height: 19px; } Waar dit voor staat wist ik niet? Het lijkt me dat je het wou gebruiken als buitenkant ofzo, heb er maar niet aangezeten of veranderd.
** Je moet in FF en IE rekening houden dat je div's weleens willen verspringen, dit kan je corrigeren door een margin te geven maar naar naar een negatief getal "margin-top: -19px" maar er is ook een ander handig trucje.
Wat je kan doen is alles gewoon zo laten staan (dus geen negatieve margins) en alleen een padding geven, dan zakt je bovenste div naar beneden want hij word in principe groter. Dat doe je bij allebei. (de padding boven en beneden) Je div is nu dus gewoon goed zonder enkele margins eraan te geven!
Ook is zo dat je een padding aan de linkerkant geeft, zodat je tekst netjes van de kantlijn komt, nu moet je alleen je div niet op de orginele grootte houden anders is hij telang.
De padding die je aan een div geeft moet je van de lengte en hoogte afhalen. Kan je zien wat ik heb gedaan, je div is nu nog naar 928 pixels breed, omdat die padding van 20px erop zit |