CSS - Brett vorm Kopf

[Greyn]

Guten Abend zusammen,

ich bin immoment mal wieder dabei ein wenig was mit HTML/CSS/PHP/SQL auszuprobieren. Der Content Bereich der Seite ist jetzt so
ziemlich fertig und ich möchte nun noch einen "speziellen" Header in die Seite bringen, wo ich aber gerade irgendwie nicht
weiter komme. Kommen wir mal zu dem, was ich mir vorstelle:

Ich möchte gerne am oberen Rand der Seite (nicht fixed) einen Header haben, der sozusagen einen fließenden Hintergrund mit 100% width hat
und über diesen Hintergrund soll das Logo Mittig erscheinen. Zudem soll der Header am äußeren Linken und Rechten Rand eine "Endgrafik" haben.
Die folgende Grafik sollte die nochmal was verständlicher machen:

http://img703.imageshack.us/i/unbenanntte.png/ --> Edit: Kann keine Bilder posten, deswegen nur der Link.


Ich habe mich bisher erstmal nur um den fließenden Hintergrund und das Logo gekümmert, deswegen sind die 2 Außen-Grafiken
noch nicht im folgenden Code vorhanden. Mein Problem ist derzeit, dass ich es entweder schaffe, dass der Hintergrund
fließt und das Logo mittig ist, aber das Logo hinter dem Hintergrund steht ODER das der Hintergrund fließt, das Logo
überm Hintergrund ist, aber das Logo dann links steht. Der folgende Code stellt die erste Variante da:

#header {
	height: 86px;
}

#header .logo_middle {
	height: 86px;
	width: 812px;
	margin: 0px auto;
	z-index: 2;
	background: url(images/Template/header_underlayer_logo.png) no-repeat center top;
}

#header .flooter {
	float: left;
	height: 86px;
	width: 100%;
	z-index: 1;
	background: url(images/Template/header_underlayer_flooter.png) repeat-x left top;
}

So, ich hoffe mir kann hier jemand kurz mein Brett vorm Kopf lösen und einen knackigen Lösungsansatz bringen.
Freue mich über jede Hilfe.

Nun noch zu einer anderen Frage mit CSS:
Nehemn wir an ich habe ein Div, was sich von der Größe her ändern kann.
In dem Div ist ein Div links und 1 rechts. Zwichen den beiden Divs soll jetzt
noch 1 drittes Div rein, was einen Hintergrund von width 1 PX nach X wiederholen soll.
Kann ich nun irgendwie festlegen, dass der "Mitte-Div" seine Width-Größe automatisch berechnen soll,
weil ich ja wegen dem veränderbaren Hauptdiv keine feste Größe anlegen kann?

Gruß,
Greyn

 

[Goyle 2010]

Nach deinem Bild zu urteilen würde ich einfach eine Grafik aus den einzelnen zusammenbauen und einbetten.

Die Grafikbreite kannste dann ja wie du willst anpassen

 

[Greyn]

Hey,

ne das geht eben nicht, weil sich die Grafik ja an die Browserbreite anpassen soll.
Beziehnungsweise das Logog halt Mittig und die 2 Außengrafiken außen.

 

[Niranda]

Ganz einfach:
4 oder 5 Div-Boxen ineinander - je nachdem, ob dieser komische "fließende" Hintergrund auf beiden seiten gleich ist (dann 4 Boxen):

<div class="header" id="headerBox"> <!-- Beinhaltet kompletten Header-->
	<div class="header site" id="hsiteLeft"></div> <!-- Linke Seite mit Hintergrundbild -->
	<div class="header floot" id="hfloot"> <!-- Fließender Text, auf beiden Seiten... -->
		<div class="header logo" id="hlogo"></div> <!-- Das Logo selbst.. -->
	</div>
	<div class="header site" id="hsiteRight"></div> <!-- Rechte Seite mit Hintergrundbild -->
</div>

oder...

<div class="header" id="headerBox"> <!-- Beinhaltet kompletten Header-->
	<div class="header site" id="hsiteLeft"></div> <!-- Linke Seite mit Hintergrundbild -->
	<div class="header floot" id="hflootLeft"></div> <!-- Fließender Text, auf beiden Seiten... -->
	<div class="header logo" id="hlogo"></div> <!-- Das Logo selbst.. -->
	<div class="header floot" id="hflootRight"></div> <!-- Fließender Text, rechts -->
	<div class="header site" id="hsiteRight"></div> <!-- Rechte Seite mit Hintergrundbild -->
</div>