Bilder um einen Bereich einfügen wie einen Rahmen

[carboneum]

Hallo,
ich würde gerne um einen Bereich, also ein Blockelement (div), Bilder hinzufügen, die dann wie ein Rahmen wirken.

Ich habe versucht einzelne div container in einander zu verschachteln, da ja jedes div ein Blockelement ist, dürfte das gehen, doch es funktioniert nicht.
Würdet ihr bitte schauen ob ich es richtig gemacht habe:

Erstmal meine body css(welcher zu vernachlässigen ist)

 body {  
    color: black; background-color: white;  
    font-size: 100.01%;  
    font-family: Helvetica,Arial,sans-serif;  
    margin: 0; padding: 1em;  
    min-width: 41em; /* für neuere Browser */  

Jetzt der Versuch die Bilder wie einen Rahmen wirken zu lassen:

Html Code:

[CODE]<div id="headerout">  
  
<div id="links1">  
<div id="links2">  
<div id="links3">  
<div id="mitte1">  
<div id="mitte2">  
<div id="rechts1">  
<div id="rechts2">  
<div id="rechts3">  
  
<div id="headerin">  
</div><!--close div id="headerin-->  
  
</div><!--close div id="rechts3-->  
</div><!--close div id="rechts2-->  
</div><!--close div id="rechts1-->  
</div><!--close div id="mitte2-->  
</div><!--close div id="mitte1-->  
</div><!--close div id="links3-->  
</div><!--close div id="links2-->  
</div><!--close div id="links1-->  
  
</div><!--close div id="headerout"-->

und jetzt die css:

  
div#headerout {  
		height:100%;  
		width:100%;  
	}  
	/*Der Container der die Bilder anzeigen soll die dann für den Header-Inhalt dienen*/  
		  
               div#links1 {  
			height:10%;  
			width:10%;  
			text-align:left;  
			margin-top:0%;  
			margin-left:0%;  
			background-image:url(layout/png/layout-content/oben-links.png);  
	}  
	/*Bild für die Ecke oben links*/  
		div#links2 {  
			height:80%;  
			width:10%;  
			text-align:left;  
			margin-top:10%;  
			margin-bottom:10%;  
			margin-left:0%;  
			background-image:url(layout/png/layout-content/mitte-links.png);  
	}  
	/*Bild für den linken Rand*/  
		div#links3 {  
			height:10%;  
			width:10%;  
			text-align:left;  
			margin-left:0%;  
			margin-bottom:0%;  
			background-image:url(layout/png/layout-content/unten-links.png);  
	}  
	/*Bild für die Ecke unten Links*/  
		div#mitte1 {  
			height:10%;  
			width:80%;  
			text-align:center;  
			margin-top:0%;  
			background-image:url(layout/png/layout-content/oben-mitte.png);  
	}  
	/*Bild für den Rand oben in der Mitte*/  
		div#mitte2 {  
			height:10%;  
			width:80%;  
			text-align:center;  
			margin-bottom:0%;  
			background-image:url(layout/png/layout-content/unten-mitte.png);  
	}  
	/*Bild für den Rand unten in der Mitte*/  
		div#rechts1 {  
			height:10%;  
			width:10%;  
			text-align:right;  
			margin-top:0%;  
			margin-right:0%;  
			background-image:url(layout/png/layout-content/oben-rechts.png);  
	}  
	/*Bild für die Ecke oben rechts*/  
		div#rechts2 {  
			height:80%;  
			width:10%;  
			text-align:right;  
			margin-top:10%;  
			margin-bottom:10%;  
			margin-right:0%;  
			background-image:url(layout/png/layout-content/mitte-rechts.png);  
	}  
	/*Bild für den rechten Rand*/  
		div#rechts3 {  
			height:10%;  
			width:10%;  
			text-align:right;  
			margin-right:0%;  
			margin-bottom:0%;  
			background-image:url(layout/png/layout-content/unten-rechts.png);  
	}  
	/*Bild für die Ecke unten rechts*/  
  
div#headerin {  
			margin:10%;  
			background-image:url(layout/png/layout-content/mitte-mitte.png);  
	}  
	/*Der Inhalt des Header*/

Die Bilder werden überhaupt nicht angezeigt. Würdet ihr mir bitte helfen.

Würdet ihr das auch so machen und die einzelnen div's in einander verschachteln oder doch Inlineelemente in die div's verschachteln wie z.B. span's oder doch etwas ganz anderes?

Danke sehr.