Moin,
wenn es dir nur darum geht, dass links und rechts vom Header zwei unterschiedlich gefäbte Balken auftauchen, kannst du das auch auf eine sehr einfache Weise mit einem Hintergrundbild im Body lösen, was du folgendermaßen im CSS angibst:
Code:
body {background: #005573 url(images/background.gif) 50% 122px no-repeat}
Die erste Angabe hinter "background:" ist die allgemeine Hintergrundfarbe deiner Seite. In Klammern steht dann der Pfad zu deinem Hintergrundbild. "50%" ist die horizontale Ausrichtung des Hintergrundbildes und "122px" die vertikale Ausrichtung von oben. Mit-no-repeat erreichst du, dass das Bild nicht gekachelt wird.
Ich würde das Bild wie in deinem Beispiel 81px hoch machen und zusätzlich 3000px breit, damit es auch bei sehr großen Bildschirmen noch ausreicht. Du kannst dann jeweils einer Hälfte des Bildes die gewünschte Farbe geben.
Zu deiner eigentlichen Frage:
Absolut positionierte divs legen sich immer über static (Normalzustand) positionierte Elemente. Wenn du also etwas unter deinen Header legen möchtest, mußt du diesen auch absolut positionieren und ihm einen höheren z-index zuweisen.
Ich hab dir
hier mal ein Beispiel gemacht, wie das funktionieren kann (ist bei dem, was du möchtest, etwas tricky
). In den linken Div hab ich zusätzlich noch einen Absatz gelegt, falls du Ähnliches auch vorhast (was ich wegen der variablen Breite aber nicht empfehlen würde
). Der zweite horizontale Balken unten ist das Hintergrundbild aus dem vorher beschriebenen Beispiel.
Viel Spaß
