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
Lesezeichen