Grid und Design

Hi Leute,
so langsam freunde ich mich mit dem grid an, und werde es wohl auch auf produtiven Seiten einsetzen.
Was mir jetzt noch an Infos fehlt ist, in wie weit ich Änderungen der Breite (width) an den Elementen #header, #custom, #wrapper, #container, #footer,... vornehmen kann um meine Designideen zu verwirklichen, ohne die Funktionsweise des grids zu beinflussen. Wo greift das grid ein? Erst bei .inside ? Wie ich bei der Seite von Peter Müller gesehen habe ist es anscheinend mit Bordmitteln möglich den header und den footer über die gesamte zur Verfügung stehenden Breite gehen zu lassen.

Hoffe ich habe mich einigermaßen verständlich ausgedrückt ;-)

Grüße aus Ludwigsburg
Jochen Kubik

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?

Ja, klar, jetzt sehe ich langsam "Land" ;-)
Einzig: Wie kommen die 744px zustande?

Thanxalot!

Grüße
JK

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.

Jo, jetzt scheint erst mal alles klar zu sein, Danke!

Grüße
JK

Servus Peter,

darf ich hier noch mal nachhaken? Ich brauche aktuell auch ein Layout das über die gesamte Breite geht. Ich habe hierzu deinen Tipp verwendet und in meinem layout.css folgende Anweisung geschrieben.

Code:

---

#header .inside, #main .inside, #footer .inside, #pageimagebox .inside
{
margin: 0 auto;   
width: 960px;
}

---

Aber beim Skalieren sehe ich in Firebug die Größen vom responsive Grid überschrieben. Da bleibt es auf "auto". Sollte ich deine Anweisung dann auch in ein CSS mit Mediaquery schreiben? z.B.

Code:

---

@media (min-width: 979px)

---

Ladereihenfolge der CSS Files

• CSS-Reset
• Formulare
• Responsive Grid
• Layout-Builder
• layout (meine eigenen Layoutangaben)

Wäre dankbar für einen Tipp :)

Gruß
Frank

Zitat:

---

Zitat von Kahmoon

in meinem layout.css folgende Anweisung geschrieben.

Code:

---

#header .inside, #main .inside, #footer .inside, #pageimagebox .inside
{
margin: 0 auto;   
width: 960px;
}

---

Aber beim Skalieren sehe ich in Firebug die Größen vom responsive Grid überschrieben. Da bleibt es auf "auto".

---

Das klingt soweit doch sinnvoll.
Was genau überschreibt das responsive.css und wann genau?
Was bleibt denn wann auf "auto"?
Gibt's einen Link?

Link wäre aktuell www.mediastuff.de

Meine layout.css überschreibt die responsive.css. Egal welche Fenstergröße bleibt width beim wrapper auf "auto" und die 3 .inside bei 960.

Ich hab auch gerade schon 3 Stylesheets, jeweils mit Mediaquery versehen aber das mag er auch ned. @media min-width: 979px (für alle ausreichend großen Displays) ignoriert er.

Code:

---

@media (min-width: 979px)
alle .inside 960px

@media (min-width: 768px) and (max-width 979)
alle .inside 744px

@media (max-width: 767px)
alle .inside auto

---

Gruß

Zitat:

---

@media @media (min-width:768px) and (max-width:979px)

---

Das @media ist doppelt und so'n Media Query sollte schon irgendwo das Medium für den Query (= "Abfrage") enthalten, also z. B. das Wort "screen" ;-)

Sowas in dieser Art sollte funktionieren:
@media only screen and (min-width:768px) and (max-width:979px)

Viel Spaß noch damit. Sieht doch gut aus, die Site.

Zitat:

---

Zitat von pmmueller

Das @media ist doppelt und so'n Media Query sollte schon irgendwo das Medium für den Query (= "Abfrage") enthalten, also z. B. das Wort "screen" ;-)

---

DOH!!! Sch... Copy Paste! ;) Funzt!!!

Zitat:

---

Zitat von pmmueller

Viel Spaß noch damit. Sieht doch gut aus, die Site.

---

Danke :)

Gruß

--