Header über die gesamte Seite anzeigen lassen

[WWSelec]

Hallo,

ich habe eine Frage zur Positionierung eines Headers. Ich möchte gerne, dass auf meiner Internetseite: MSGuide.de der Header nach Möglichkeit über die gesamte Breite der Internetseite bzw wie sie angezeigt wird, geht.
Es soll quasi "dynamisch" und in einander fließend wirken und nicht vom Aussehen her Box in einer Box, hoffe ich konnte es verständlich ausdrücken

Es fehlt mir leider das Wissen, den Ansatzpunkt zu finden, ob ich irgendwo den Header vielleicht direkt in den Wrapper packen kann (?), genauso hat mich die Suchfunktion des Forums auch nicht weitergebracht, aber jede Suchfunktion ist eben auch nur so effektiv wie der Benutzer Habe mir auch schon Lösungsansätze aus diversen HTML Foren angeschaut, kann diese auch zum Teil nachvollziehen, allerdings kann ich es dann schwer mit Contao und meiner Seite dann vergleichen oder anpassen, grad wenn man eine Seite hat, die schon mit Inhalt und Layout versehen ist.

Vielleicht kann mir ja jemand einen Tipp geben, wo ich in meinem Beispiel ansetzen muss.

Gruß WWSelec

[Tompaianer]

Dein wrapper ist ja auf 880px fest, probier mal width: 100%. Dann müssen aber die nachfolgenden divs deine 880px wieder bekommen. Also beispielsweise container width:880px und noch mittig ausrichten. Ich hoffe, ich habe deine Frage richtig verstanden.

[WWSelec]

Danke dir erstmal für den Tipp,

ich habe es jetzt getestet und was den Header betrifft geht das auch schon in die Richtung wie ich mir das Endergebnis vorstelle, allerdings habe ich das Gefühl die Seite verbreitet sich einfach nur generell dadurch, so dass der eigentliche Hintergrund weniger zu sehen ist. Würde mir wünschen, dass alles so von den Verhältnissen bleibt u der Header nur komplett von Links nach Rechts geht über die gesamte Bildschirmausgabe im Browser, so dass der Body Teil durchaus noch sichtbar ist. Leider finde ich momentan keine Seite auf der man das Ganze vielleicht besser erklären könnte.

[Kim]

Wie Tompaianer schon meinte, du musst deinen Wrapper eine Breite von 100'% geben.
Und die Elemente darin wie z.B. der Container und der Footer bekommen dann deine gewünschte Breite von 880px.

Das CSS würde so in der Art ausschauen:

#wrapper {width:100%;}

#container,
#footer {width: 880px; margin: 0 auto;}

[Spooky]

Habt ihr euch seine Seite überhaupt angesehen? Eure Vorschläge können so nicht bei ihm funktionieren, ohne weitere Maßnahmen zu ergreifen.

Davon abgesehen, @WWSelec, wie stellst du dir das Ergebnis überhaupt ungefähr vor? So zum Beispiel:



?

[Spooky]

Falls ja, einer von mehreren Lösungswegen:

#header {
    ...
    position: absolute;
    left: 20px;
    right: 20px;
}

#container {
    padding-top:205px;
} 

[Kim]

Habt ihr euch seine Seite überhaupt angesehen? Eure Vorschläge können so nicht bei ihm funktionieren, ohne weitere Maßnahmen zu ergreifen.

Sorry, aber den Header auf Absolute zu setzen mach nur bedingt Sinn.

Wenn man dem Wrapper die Hintergrundfarbe wegnimmt und dem Container stattdessen einfärbt kommt man mit unseren Lösungen auf das "gleiche" Ergebniss.
Hier und da müssen noch ein paar kleine Anpassungen gemacht werden wie z.B. #header .inside {padding:0 40px;}.

[Spooky]

Wenn man dem Wrapper die Hintergrundfarbe wegnimmt und dem Container stattdessen einfärbt kommt man mit unseren Lösungen auf das "gleiche" Ergebniss.

Nein, denn nun ist der <header> außerhalb des Hintergrunds.

Wenn das für ihn ok ist, dann ist der oben erwähnte Lösungsweg natürlich der 'richtige'. Daher auch meine Frage an ihn, wie er sich das Ergebnis nun letztendlich vorstellt.

[WWSelec]

Ich werde beide Wege mir nochmal anschauen, wie es wirkt, sicher werde ich die Elemente noch etwas anpassen müssen damit es auch sinnig im Gesamtlayout ist. Ich wollte die Seite erstmal genauso sehen wie Spooky sie umgesetzt hat und dann eben das Ganze anpassen. Als Basis reicht mir das erstmal, melde mich nochmal wenn ich es getestet habe.