Hallo allemaal ik ben nieuw hier en ik hoop dat iemand mij kan helpen.
Ik heb op school les gehad in html en css, mijn baas vroeg mij of ik een website wou maken voor onze cafetaria dus ik zij is goed. De site op zich is zo goed als klaar.

Echter mijn probleem is als ik de website open bij een resolutie van 1024 bij 768 dan staat de site goed maar wanneer ik hem open bij een resolutie van 1440 bij 900 dan staat alles scheef, zie bijlagen.

Als laatste erbij mijn css:

Code:

body
{
background: url(images/background.gif) no-repeat top center;
font-family: "Comic Sans MS", verdana, arial, helvetica, sans-serif;
font-size: 90%;
text-align: center;
margin: 0px auto;
padding: 0 ;
}

#container
{
width: 1024px;
height: 768px;
margin: 0px auto;
}

#header
{
width: 1020px;
height: 168px;
padding: 4px;
}

#nav_container
{
width: 166px;
height: 200px;
padding: 4px;
position:absolute;
left: 2%;
}

#content
{
width:848px;
height:200px;
text-align: left;
padding: 4px;
float: right;
top: 182px;
position:absolute;
left: 20%;
}

p
{
margin: 0;
padding: 0 0 10px 0;
}

ul
{
list-style: none;
margin: 0;
padding: 5px 0 0 0;
}

li
{
margin: 0;
padding: 0 15px 0 15px;
display: inline;
}

ul a:link, ul a:visited
{
color: #FF5D00;
text-decoration: none;
}

ul a:hover, ul a:active
{
color:#00ABFF;
text-decoration: underline;
}

Ik hoop dat iemand mij kan helpen met dit probleem.
Felix.

Zet de background niet in de body, maar in de container

Je gaat echter nog een probleem krijgen als de pagina langer wordt dan de achtergrondafbeelding hoog is. ;)

Kies voor een meer flexibele oplossing waarbij de elementen op de juiste wijze gepositioneerd staan, bijvoorbeeld:

CSS opmaak 2 kolommen header footer

Verder is er voor dit lay-out helemaal geen position:absolute; nodig.

Met position:absolute kan je een div bijvoorbeeld een aantal pixels over een andere div heen
laten vallen. Aangezien dat helemaal niet van toepasing is in dit lay-out is het dus
niet gebruikelijk om het toch te gebruiken. Met floats en margins kan je de positie
veel beter aangeven.

Ik zelf zou die position:absolute gewoon proberen weg te werken, maar heb je daar
geen tijd voor of zin in, dan is dit misschien de oplossing:
zet in de css van #container: position:relative;

Dank jullie wel ik zal kijken of het lukt!
Aanvullend bericht:
Ik heb het net doorgevoerd de background in de container en de #container: position:relative; het is gelukt heel erg bedankt.