Layout in der Mitte, mit Balken über die ganze Seite

[Kerstel]

Hallo,

ich möchte ein Design in CSS realisieren, der Gesamte Content (Div-Breite 1024px) der Seite soll sich in der Mitte zentrieren. Allerding gibt es zwischen dem Logo und dem Menü einen blauen 20px hohen Balken, der sich über die ganze Seite erstreckt.

In der Art wie das hier:
http://www.css4you.de/wslayout1/ex0003.html

Nur sollte der dunkelgrüne Balken über die komplette Seite gehen.

Hat jemand eine Idee wie man sowas machen kann?

lg ralf

[Christian Marquardt]

Den grünen Balken in einem Container der Bildschirmgröße anpassen und dann in einem zweiten Container das Layout von der gezeigten Seite

[Kerstel]

versteh ich nicht, dann ist das menü im grünen balken ja nicht mehr im content bereich. hast du ein bsp?

[Christian Marquardt]

Woher sollte ich ein Beispiel haben?

Warum sollte das nicht mehr im Contentbereich sein?

Schau dir die Seite mit entsprechenden Entwicklungswerkzeugen für Browser an -> Webdeveloper Toolbar. Dann siehst du, wo das einfügen musst

[Christian Marquardt]

Bild1.jpg

Die roten Bereiche sind zu erzeugen.

[Efchen]

Moin,

ich möchte ein Design in CSS realisieren

Logisch. Design macht man ja auch nur in CSS.

der Gesamte Content (Div-Breite 1024px) der Seite soll sich in der Mitte zentrieren.

Doof für die, deren Viewport kleiner als 1024px ist.
Aber Block-Elemente zentriert man mit "margin:0 auto;".

Allerding gibt es zwischen dem Logo und dem Menü einen blauen 20px hohen Balken, der sich über die ganze Seite erstreckt.

Ich sehe kein Logo und kein Menü und keinen Balken.

Nur sollte der dunkelgrüne Balken über die komplette Seite gehen.
Hat jemand eine Idee wie man sowas machen kann?

Den dunkelgrünen Balken nicht mit in den Block mit Deiner festen Breite packen.

Den grünen Balken in einem Container der Bildschirmgröße anpassen

Natürlich passt man nichts der Bildschirmgröße an, weil die für Webseiten nicht relevant ist. Da kommt es nur auf den Viewport an. Der ist nahezu immer deutlich kleiner als die Bildschirmgröße, selbst wenn das Browserfenster maximiert sein sollte.

Die roten Bereiche sind zu erzeugen.

Das sind zwei Block-Elemente. Das äußere bekommt keine Breite und wird somit automatisch 100% breit. Das andere liegt innerhalb des äußeren Blocks und bekommt eine fixe Größe und wird mit o.a. CSS-Eigenschaft zentriert. Der grüne Bereich ist vermutlich ein Block-Element (könnte eine Überschrift, also <h1> sein), das vor dem inneren Block im HTML-Code liegt und ebenfalls keine feste Breite bekommt, daher 100% so breit ist, wie sein Elternelement.

Wo genau ist das Problem?