Responsive Design

smirk9 · 15.11.2012, 21:48

hiho!
Für die Umstellung der Seite unseres Vereins auf Contao Version 3 plane ich auch eine Überarbeitung des Layouts. Natürlich wäre ein "Responsive Layout" wünschenswert. Alle drei Spalten sollen ungefähr die gleiche Breite haben. Im Seiten-Layout habe ich für die linke und rechte Spalte jeweils 300 px angegeben. Bei großen und kleinen Auflösungen verhält sich das Design wie gewünscht. Die Spalten brechen korrekt um.
Allerdings bei Auflösungen zwischen 800x600 und 1024x768 erscheint nur die mittlere Spalte in der Mitte und das auch noch ziemlich schmal. Zu bewundern ist das momentan hier: http://kneipp-verein.kneippverein-obernkirchen.de
Ich könnte mir vorstellen, dass es mit dem responsive grid zu tun hat und man ggf. ein Vielfaches irgendeines Wertes angeben muss, damit es funktioniert. Aber alles Probieren hat nicht das gewünschte Ergebnis gebracht. Im Seiten-Layout sind die drei Optionen "CSS-Reset", "Layout-Builder" und "responsive grid" angehakt.
Vielleicht weiß jemand von euch Rat... ?

Gruß,
Clemens

**art-instinct** · 16.11.2012, 12:22

Guck dir mal das CSS an...

Wenn ich mir das mit Opera Dragonfly angucke, dann ist genau in dem Bereich der #container noch mit den 300px Paddings und die #main, #left, #right sind auch mit ihren Styles float:left;position:relative;
#main hat zwar width:100%; aber das bringt nix, weil #container ja die paddings hat.

***Nina*** · 17.11.2012, 20:11

Ne ne, die Anweisungen bei #container etc. sind schon korrekt, das ist die besondere HolyGrail-Technik von Contao.

Die Ursache liegt - bei schneller Betrachtung, also keine Garantie auf Korrektheit

- darin, dass die Aufteilung des Grid-Systems sich in Bezug auf die linke und rechte Spalte nicht automatisiert auch für die kleinere Auflösungen rein schreibt. Also musst du das manuell machen.

Wenn ich mir das Grid-CSS von Contao ansehe, sehe ich, dass darin neben der Ausgangslage auch ein CSS mit Media Query für kleinere Bildschirmbreiten vorgesehen ist. Du musst also am besten manuell ein vergleichbares Stylesheet anlegen und darin die Angaben für #left und #right ergänzen.

Ungetestet würde ich das ~ so machen:

1. Im Stylesheet-Generator ein neue Stylesheet mit folgenden Einstellungen anlegen:

Name "grid-min768-max979"
In das Feld Media-Query folgendes eingeben: (min-width:768px) and (max-width:979px)

In das Stylesheet folgende CSS-Anweisungen* schreiben:

Code:

#container {
  padding-right: 238px;
  padding-left: 228px;
}

#left {
  width: 228px;
  right: 218px;
}

#right {
  width: 228px;
}

2. Binde das Layout im Seitenlayout ein und teste, ob das Ergebnis nun besser ist.

* Wie ich auf die Werte komme?
300px ist ursprünglich der Ausgangswert. Dieser ist gleich auf mit dem Wert von .grid3 im Original-Grid-CSS von Contao. Also habe ich in diesem Stylesheet herausgesucht, welcher Wert für .grid3 gilt, sobald das MediaQuery darin auftaucht: 228px;

Dann habe ich mit Firebug geschaut, wie das HolyGrail-Layout + das Grid-System von Contao die Werte in der "Standarddarstellung" berechnen:

"angegebene Breite" = der Wert den du im Seitenlayout für die linke und rechte Spalte eingetragen hast (in deinem Fall ein Wert der mit .grid3 überein stimmt)

#container bekommt ein padding-left mit genau der angegebenen Breite und ein padding-right mit der angegebenen Breite plus +10px (um den Grid-Abstand auszugleichen der sich an der Stelle auswirkt; wäre zu kompliziert das jetzt an der Stelle zu erklären).
#left bekommt als width die angegebene Breite und für right die angegebene Breite minus 10px
#right bekommt als width die angegebene Breite