Full-Header-Layout mit Grid
Auf pmueller.de ist das so realisiert:
#wrapper auf width:auto (statt 960px), damit sich #header und #footer über die gesamte Breite ausdehnen.
Auf großen Bildschirmen hat das Grid eine Breite von 960px:
#header .inside, #navigation, #container, #footer .inside {
min-width: 768px;
max-width: 960px;
margin: 0 auto;
}
Man könnte das auch einfach auf 960px festnageln. Das macht nicht so'n Unterschied.
Wenn weniger als 979px zur Verfügung stehen, verkleinert sich das Grid automatisch auf 744px. Wenn du dir in Chrome die Contao Tools installierst und darin das "Grid-Overlay" einschaltest, ist das beim Ändern der Browserfenstergröße sehr schön zu sehen.
Um die Gesamtbreite an das schmalere Grid anzupassen, werden die obigen Selektoren mit @media only screen and (max-width: 979px) and (min-width: 767px) auf eine Breite von genau 744px beschränkt.
Anders ausgedrückt: Das Grid "greift nicht". Normalerweise beschränkt der Wrapper das. Wenn du das änderst, musst die Bedingungen selbst herstellen.
Hilft das weiter?
Full-Header-Layout mit Grid, Teil 2
Zitat:
Zitat von
kubjo
Einzig: Wie kommen die 744px zustande?
Die Definitionen für das Grid stehen in /assets/contao/css/responsive.css. Zum Lesen nimmst du die "uncompressed":
@media (min-width:768px) and (max-width:979px) {
/**
* Reduce the overall width
*/
#wrapper {
width:744px;
}
Da du beim "Full Header"-Layout den Wrapper wie gesagt auf "auto"-Breite stellst, müssen die anderen Elemente diese Breite übernehmen, um dem pixelbasierten Grid eine Begrenzung zu bieten.