Antworten zum Thema „[Contao] Header auf Gesamte Breite des Browsers“

[Zaolat]

Juhu,

Ich möchte gerne den Header-Bereich auf die gesamte Breite der Darstellung im Browser anzeigen lassen. In Contao habe ich statisches Layout eingestellt mit einer Gesamtbreite von 900 px. Wenn ich über CSS den Header Bereich auf Width 100% einstelle, wird es (logischerweise) mit 900px Breite dargestellt.
Wenn der Browser nun breiter ist, sieht man dadurch den eingestellten Hintergrund links und rechts vom Header. Wie bekomme ich das hin, dass unabhängig von der Breite des Browsers, der Header immer über die gesamte Breite des Browsers dargestellt wird?

 

[Pixelaner]

Mahlzeit,

Eine Möglichkeit wäre es den Header ausserhalb deines 900px Wrappers zu packen und im Header selbst die Wrapper Eigenschaften nochmal vergibst sodass der Wrapper seine 100% erreichen kann aber die Inhalte dank des Inneren 900px Wrappers sich wieder ans Raster anpassen können.

ungefähr so:

<header id="header">
    100% header
    <div class="wrapper">
        900px wrapper
    </div>
</header>

<div class="wrapper">
    ursprünglicher 900px wrapper
</div>

Ich hoffe das war verständlich so kurz vor Feierabend

MfG
Pixelaner

 

[Dennis Kovarik]

Nur ergänzend zum Beitrag von :

<style>
#header { background: #000 url(pfad-zum-bild) 0 0 no-repeat; background-size: cover; float: left; width: 100%; }
.wrapper { margin: 0 auto;  width: 900px; }
</style>

Die Höhe des Headers ergibt sich dann anhand des Inhalts im Wrapper. Dem Inhalt würde ich dann noch ein Padding geben, damit dieser von oben und unten noch etwas Abstand hat.

Edit: Das float: left; ist kein muss, kann also weggelassen werden und falls dein umliegender Container keine fixe Breite hat/haben soll, dann sollte selbstverständlich noch ein "max-" vor width: 900px.

Viele Grüße,
Dennis

 

[Pixelaner]

Aus welchem Grund hast du dem #header einen float verpasst?

 

[Dennis Kovarik]

Aus welchem Grund hast du dem #header einen float verpasst?

Wenn du darauf hinaus willst, dass das floaten hier überflüssig ist, hast du natürlich recht. Ist nur eine "Angewohnheit" das zusätzlich zu deklarieren, auch weil ich seine Kenntnisse nicht kenne. Das floaten kann selbstverständlich auch weggelassen werden.

Gruß,
Dennis

 

[Pixelaner]

Ja das hat mich kurzfristig verwundert

 

[Dennis Kovarik]

Kein Problem, hab meinen Post dahingehend editiert bzw. eine Anmerkung dazu geschrieben.

 

[Zaolat]

Ich teste das mal. Vielen Dank bis dahin.

 

[Zaolat]

Ich kam leider jetzt erst dazu, dass zu testen.
@Pixelaner: Du schriebst, den Header ausserhalb des Wrappers zu setzten.
contao setzt automatisch den header in den Wrapper. Wie bekomme ich mit Contao den Header außerhalb?

 

[spacefront]

Warum machst Du eine statische Breite?

Das macht man via CSS da setzt Du dann den container auf die Breit wie Du
es brauchst.
Mit margin 0 auto wird der dann mittig.


Gruß
Alex

 

[Zaolat]

Ok. jetzt habe ich es hinbekommen. Danke

 

[speedweb01]

Hallo,
ein Tipp dazu:
- dem Wrapper (Header, Main, Footer) 100% breite geben.
- die breite des Content steuert man dann mit der Class .inside
die Class .inside vergibt CONTAO normal automatisch.