Base hulp

Ik ben mijn lay-out aan het basen, maar kom op een dingetje terecht waar ik geen bal van snap.

Ik heb een content vak, met daaronder een ronde afwerking. Nu heb ik het content vak 780 x 1 pixels gemaakt, en dit laat ik gewoon mee rekken, maar hoe plaats ik de ronde afwerking eronder?
Deze is 780 x 6 pixels

Mijn html van het vak is:

<div id="content">
        
        <div class="groen">Tekst
            <div class="tekst">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst </div>
            <div class="afsluiting">
        </div> 
     </div>
    </div>

Mijn css is:

.oranje, .rood, .groen, .blauw{ height:50px;
    width:780px;
    position:relative;
    margin-left: 10px;
    margin-top: 10px;}

.oranje{background:url(images/oranje.png);}
.rood{background:url(images/rood.png);}
.groen {background:url(images/groen.png);}
.blauw {background:url(images/blauw.png);}

.tekst {
    width:100%;
    height:auto;
    float:left;
    position:relative;}

.tekst{margin-top:37px; 
    background:#e7e7e7 url(images/content.png);}    

.afsluiting { 
    background: url(images/content-onder.png);
    height:6px;
    width: 780px;
    margin-top: auto;}

#content { 
    width: 780px; 
    margin: 0; 
    position: center;
    overflow:hidden;}

Wat doe ik fout?
Als ik hem nu plaats staat hij in me "header" van het vak.

Alvast bedankt

<div id="content">
        
        <div class="groen">Tekst
            <div class="tekst">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
            </div>
        </div>
            <div class="afsluiting"> 
     </div>

Je hebt nu 1 div weggehaald maar die moet er toch blijven staan?

Er staan in totaal bij jouw 3 divjes
en er staat 4x

ja, je heb gelijk, ik vergeet 1 div op het eind...goed gezien Patricka

Hmm, ik upload de boel even, hij doet een beetje vaag

Hier is een online voorbeeld: http://simbestel.nl/patrickadam.nl/
zoals je ziet zit de "afsluiting" onder het "headertje", en wordt hij rechts niet goed weergegeven?

// Sorry voor dubbelpost

.afsluiting { 
    background: url(images/content-onder.png);
    height:6px;
    width: 780px;
    margin:0;

margin gewoon op 0 en haal die position: relative overal eens weg Waar dient het voor in jou css?

Gedaan, geen idee waarom ik dat erin gezet heb
Maar zoals je kan zien, is er niks veranderd

pfff, er zitten nog meer kleine foutjes in...
bv je div content is 780px en je afbeelding groen is ook 780px maar je zet die wel op margin-left:10px dus je mist 10px, maar met de afsluiting zet je geen margin neer. Dus die staat er dan scheef onder. Ook position: center; heeft geen functie.

Zet alle margin eens op 0 en zet in de h1 ook margin:0. Je gebruikt daar een padding dus is het beter om ook margin te gebruiken om het voor alle browsers correct te krijgen.

Heb het weer aangepast, maar nog hetzelfde? Alvast bedankt voor je medewerking, als het eenmaal door jouw hulp gelukt is, krijg je wel een beloning

niet alles heb je aangepast, probeer dit eens

(aangepaste-css)

/* CSS Document */
/* Auteur - Patrick Adam */
/* Website - www.patrickadam.nl */

body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background:#d7d7d7; 
    font: normal 12px Verdana, Arial, Helvetica, sans-serif; 
    color:#000000; }
    
html{ 
    height: 100%; }

h1{
    font:normal 18px Verdana, sans-serif;
    padding:11px 0 15px 28px;
    margin: 0;}

#container {
    width:800px; 
    margin:0 auto;}
    
#header {
    background: url(images/header.png); 
    width: 800px; 
    height: 150px; 
    margin: 0;}


#nav{
    background: url(images/menu.png);
    width: 800px;
    height: 50px;
    margin-top: 8px;}
    
#nav li{float:left;}

#nav a{ padding-left:43px;
    text-decoration:none;
    color:#000000;
    font:bold 14px/50px Tahoma, Verdana, sans-serif;}
    
#nav a.r:hover, #nav a.rood-active{color:#b50404;}
#nav a.g:hover, #nav a.groen-active{color:#9ed50c;}
#nav a.o:hover, #nav a.oranje-active{color:#f26e01;}
#nav a.b:hover, #nav a.blauw-active{color:#139fea;}

.oranje, .rood, .groen, .blauw{ 
              height:50px;
    width:780px;
    margin: 10px 0 0 10px;}

.oranje {background:url(images/oranje.png);}
.rood {background:url(images/rood.png);}
.groen {background:url(images/groen.png);}
.blauw {background:url(images/blauw.png);}

.tekst {
    width:100%;
              margin:0;
              padding: 5px;
    background:#e7e7e7 url(images/content.png);}    

.afsluiting { 
    background: url(images/content-onder.png);
    height: 6px;
    width: 780px;
    margin:0 0 0 10px;}

#content { 
    width: 800px; 
    margin: 0; 
    overflow:hidden;} 

#footer {
    background: url(images/footer.png); 
    width: 800px; 
    height: 60px; 
    margin: 10px 0 0 0;}

Probeer het morgen, zit beneden

Nu word het "hadertje" wel helemaal goed weergegeven, alleen het content gedeelte niet.

Zal hem weer even uploaden

html:

<div class="groen"><h1>Welkom</h1></div>
            <div class="tekst">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
                </div>
            <div class="afsluiting"></div>

css:

.tekst {
    width:780px;
    margin:0 0 0 10px;
    padding: 5px;
    background:#e7e7e7 url(images/content.png);}

probeer het zo eens

Oeps, zat niet dat je weer had gereageerd, nu is hij bijna goed, alleen is het content nog te lang door 1 of andere vage reden