Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - [Contao] Header auf Gesamte Breite des Browsers

Zaolat

Aktives Mitglied

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

Der 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:

HTML:
<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
 
Nur ergänzend zum Beitrag von :
CSS:
<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
 

Zaolat

Aktives Mitglied

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

Aktives Mitglied

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben