[CSS] dynamisch waagerecht durchgehender Balken

[Benutzer-1170]

Guten Morgen,

ich habe eine frage bezüglich CSS. Und zwar möchte ich mittels div-Boxen ein Layout umsetzen. Hier eine kleine Skizze dazu:
---

Und zwar soll durchgehend ein farbiger Balken im Kopfbereich der Seite sein (wie z. B. hier: https://www.hudson-advisors.de). In diesem Balken soll später der Name der Seite geschrieben werden (dort wo "Titel" steht). Der Balken an sich soll dynamisch über die gesamte Seite gehen, bei allen Auflösungen. Die Hauptseite an sich soll in der Breite für 800 px optimiert sein. Problematisch ist das ganze unter anderem weil der Balken unterbrochen wird durch eine Box eben für den Titel und eine weitere für Bilder. Die Box für Bilder erstreckt sich zudem senkerecht über zwei Boxen. Könnt ihr mir sagen, wie ich das am besten umsetzte? Zerbreche mir schon seit einigen Tagen den Kopf aber bisher konnte mir auch noch niemand helfen. Vielen Dank!

 

[tleilax]

Ich würde das Ganze erstmal ohne den Balken umsetzen und den Balken ganz zum Schluss mittels absoluter Positionierung und dem niedrigsten z-index in dem Hintergrund der Seite platzieren.

 

[Benutzer-1170]

So, ich habe das dann schon mal umgesetzt ohne besagten Balken:

---

Wäre für Tipps dankbar, wie ich ihn nun dynamisch erweitern kann. Als nochmals zur Erinnerung, neben die lila Balken direkt links und rechts von der Grafik unterbrochen soll er weitergehen und sich auch den Auflösungen der Besucher anpassen.

 

[baserider]

leider kann ich die grafiken nicht mehr sehen, aber mach doch 2 verschachtelte divs...das äussere div erstreckt sich automatisch immer über die gesamte breite wenn du keine längenangabe vorgibst. somit hast du deinen balken immer in der vollen länge bei jeder auflösung