Layout über volle Breite mit zentriertem Inhalt

Hallo zusammen,

nach einigem hin und her und vielem Test fehlt es mir einfach an einem Ansatz.
Ich möchte gerne ein responsives Layout über volle Bildschirmbreite, jedoch mit zentriertem Inhalt erstellen.

Im Prinzip genauso wie auf dieser Seite (Dies soll keine Schleichwerbung sein - ich habe nichts mit dieser Seite zu tun, schildert jedoch am besten das Layout welches ich auch gerne aufbauen möchte) :

Klick

Wie bewerkstellige ich so etwas in Contao? Mit Layoutbuilder oder ohne ?! Muss ich eigene Layoutbereiche anlegen?

Header, Content, Footer sollen dabei alle eine andere Hintergrundfarbe (die sich flexibel bis zum Bildschirmrand streckt) haben, aber wie gesagt, einen zentrierten Inhalt.

Stehe hier auf dem Schlauch ....

Viele Grüße,
mavnet

Gibt bestimmt viele Möglichkeiten, ein ähnliches Design zu realisieren. Ich weiss natürlich nicht, was dir an dem Design der Beispielseite wirklich wichtig ist und was nicht. Zentrierter Inhalt mit fester Maximalbreite geht natürlich mit Layoutbuilder (Header, Footer, Hauptspalte, rechte Spalte). Bleibt der Hintergrund, der bis das ganze Browserfenster in der Breite ausfüllen soll. Da müsste man wohl ein paar Klimmüge machen mit weiteren Layoutbereichen außerhalb des Wrappers (mit voller Breite "unter" Header, Container und Footer positioniert) und evtl etwas Javaskript um die Höhe dieser Layoutbereiche an den Header, Container und Footer anzupassen.
Das responsive Verhalten der Beispielseite hält sich m.E. auch in Grenzen, da sollten ja fast schon Media-Queries ausreichen. Ich hab jedenfalls auf die Schnelle nichts gefunden, was nicht mit CSS machbar wäre. Was nicht heissen soll, dass es wenig Arbeit ist. Mit mobilem Browser habe ich allerdings nicht geschaut.

Gib #wrapper eine Breite von 100%, header und footer auch, header .inside und footer .inside beschränkst du mit einer maximalen Breite (max-width:1440px) und einer Breite von 90%. Für #container gilt das selbe.

Das wäre es schon.

Hey,

sorry für die späte Rückmeldung.
Vielen Dank an euch beide, ich hab' da quasi einen Mix draus gemacht, der css-mäßig mit einem eigenen Layout-Bereich (für die navigation, da andere 100% Hintergrundfarbe) sowie mit einem Hintergrund-div für den container (im fe_page hinzugefügt) so aussieht:

Code:

---


@charset "UTF-8";

body {
margin:0;
padding:0;
font-size:93.75%;
width:100%;
background-color:black;
}


#wrapper {

max-width:100%;

margin: 10px auto 0;

}


#header {


width:100%;
background-color:black;



}


#header .inside {


max-width:1080px;
margin:auto;

background-color:black;

padding: 10px 0.9259259259259259%;

}

#logo {

width:auto;

float:left;

}



#navigation {


background-color:white;
padding: 10px 0.9259259259259259%;

}

#navigation .inside {

max-width:1080px;
margin:auto;

}

#navmain {



width:100%;
background-color:white;

}

#navmain ul {

max-width:800px;


}

#navmain li {

  float:left;
  padding: 0px 10px;

}

#container_box {

width:100%;
background-color:red;

}


#container {

background-color:blue;
max-width:830px;
height:auto;
margin:0 auto;



}

#main {

background-color:grey;

}


#main .inside {

padding:10px;



}



#right {

background-color:lightgrey;

}

#right .inside {

padding:10px;

}


#footer {

background-color:yellow;
width:100%;

}

#footer  .inside{

background-color:blueviolet;
max-width:1060px;
margin:auto;
padding:10px;

}



@media only screen and (max-width: 1080px) {

#wrapper {

background-color:black;
border:none;
margin:0;

}


}

@media only screen and (max-width: 500px) {

#main,
#right {

float:none;
width:100%;

}


}

---

Im Layout (Contao-Backend) habe ich Kopf- und Fußzeile aktiviert und jeweils eine Höhe in px angegeben. Die rechte Spalte ist auch aktiviert mit px-Angabe.
Layout-Builder ebenfalls aktiviert.
Statisches Layout aktiviert, mit einer Gesamtbreite von 100% und einer zentrierten Ausrichtung.

Diese Angaben/Einstellung/Vorgehensweise wirkt auf mich selbst zwar etwas abstrakt, aber so hat es funktioniert :-).
Ich weiss zwar nicht, ob dabei einige Punkte überflüssig sind, aber bislang verhält sich das Layout wunderbar responsive.


Viele Grüße,
mavnet