[CSS/(x)HTML] Fout! En ik kom er niet uit

Hallo mensen,

Ik ben bezig met een layout voor Lanip.nl, alleen er zit een fout in de layout en ik kom er niet uit, waarschijnlijk is het iets met repeat, maar dat lukt niet.

Opmaak.css

html
{
                background-image: url(images/laniplayoutbg.png); 
                background-repeat: no-repeat; 
}
div#header
{
                background-image: url(images/header.gif);
                width: 691px;
                height: 150px;
}
ul#menu
{
                margin: 0px;
                padding-left: 5px;
                list-style: none;
                height: 800px;
                width: 154px;
                background-repeat: repeat-x;
                background-image: url(images/menu.gif);
                
}
ul#menu li 
{ 
                float: inherit; 
                height: 25px; 
} 

ul#menu li a 
{ 
                display: block; 
                overflow: hidden; 
                height:    25px; 
                padding: 0px 0px 0px 0px; 
                font-family: Calibri; 
                color: #000000; 
                font-size: 14px; 
                text-decoration: none; 
                
} 
ul#menu li a:hover, ul#menu li.active a, ul#menu li.active a:hover 
{ 
                padding: 5px 8px 0px 8px; 
                color: #000000; 
                height: 20px;
                font-weight: bold; 
} 
div#content
{
                width: 519px;
                height: 565px;
                background-color:#ffffff;
                padding-bottom: 30000px; 
                margin-bottom: -30000px; 
                overflow: hidden;
                margin: 100px;
}
div#content h1
{
                font-family: Calibri; 
                font-size: 14px; 
                color: #000000; 
                font-weight: bold; 
                margin: 100 100 100 100; 
}
div#content h2
{
                font-family: Calibri; 
                font-size: 14px; 
                color: #000000; 
                font-weight: normal; 
                margin: 100 100 100 100;                
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="opmaak.css" /> 
<title>Lanip.nl</title>
</head>

<body>
<div id="header">
</div>
<ul id="menu"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Inloggen</a></li> 
        <li><a href="#">Registreren</a></li> 
        <li><a href="#">Wachtwoord vergeten</a></li> 
        <li><a href="#">Top 100</a></li> 
        <li><a href="#">Adverteren</a></li>
        <li><a href="#">Contact</a></li>
        
        <li><a href="#">Mijn account</a></li>
        <li><a href="#">Klikfans</a></li> 
        <li><a href="#">Klikmissies</a></li> 
        <li><a href="#">Acties</a></li> 
        <li><a href="#">100ste Klik</a></li> 
        <li><a href="#">Kop of Munt</a></li> 
        <li><a href="#">Bubble</a></li> 
        <li><a href="#">Punten kopen</a></li> 
        <li><a href="#">Account wijzigen</a></li> 
        <li><a href="#">Uitbetalen</a></li>  
</ul> 
<div id="content">                 
                         
                                <h1>Lorem Ipsum</h1> 
                                <h2>Dolor sit amet, consectetur adipiscing elit.
                                Praesent tincidunt erat quis lorem volutpat rhoncus.
                                Sed congue lacinia aliquet. Donec mollis dignissim blandit. 
                                Mauris eu tellus eleifend ligula egestas feugiat. 
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
                                Nam tortor quam, consectetur tempus fringilla eget, pellentesque at augue.</h2>                        
                                </div> 

</body>

</html>

De bedoeling is dat die grijze lijnen doorlopen, en dat de header in het midden komt.

De link:
http://www.lanip.nl/layout/
http://www.lanip.nl/layout/layout.html

Je zou van het grijs gestreepte vak een appart plaatje moeten maken. en dan dit volgens mij:
Css:

#grijsgestreeptevak {

width: 100%;
overflow: hidden;
background-image:url(grijsgestreeptgeval.png);
background-repeat: repeat-x; //dan zou hij alleen horizontaal vermenigvuldigen volgens mij
}

#sub-container {
width: breedte van header;
}

#header {
width: breedte van header;
height: hoogte van header;
background-image:url(header.png);
}

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="opmaak.css" /> 
<title>Lanip.nl</title>
</head>
<body>
<div id="grijsgestreeptevak">
<div id="sub-container">
<div id="header"></div>
</div>
</div>
</body>
</html>

En als ik het verkeerd heb kan dat wel want heb dit snel voor het naar bed gaan gemaakt

ik zou inplaats van html{
}
body{
} maken

Dank jullie wel! Ik ga het allemaal proberen, kijken of hij er dat wat beter uitkomt
Edit: het lukt me nog steeds niet...

hoe wil je het eigenlijk precies hebben? want ik snap het niet ect
Of je vraagt of iemand anders het voor je wilt basen dan heb je dat gezeik niet

body
{background-image: url(images/laniplayoutbg.png); 
 background-repeat: repeat-x; }

en je layout zelf zet je in een container:

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

door de margin op 0 auto te zetten komt je lay in de midden.

Je moet inderdaad een cointainer gebruiken.

Marjolein schreef:

body
{background-image: url(images/laniplayoutbg.png); 
 background-repeat: repeat-x; }

en je layout zelf zet je in een container:

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

door de margin op 0 auto te zetten komt je lay in de midden.
Dankje Marjolein. Het ziet er naar uit dat dit gaat werken, maar dan moet ik het wel goed inbouwen in mijn css
Edit: De achtergrond hoeft niet door te lopen, maar ik kan dat eerste vak wel gebruiken voor het menu