Responsive mit #left und #right?

**ElMariachi** · 28.01.2013, 10:11

Hallo,

ich probiere mich gerade ein wenig mit Contao3 und responsive webdesign...

Eine Frage:
Ich habe im Seitenlayout den Layoutbuilder und das Responsive Grid aktiviert.

Kann ich nun trotzdem #left und #right aktivieren oder soll ich einfach nur #main machen und eine linke Spalte durch ein Grid erstellen?
Wenn ich #left und #right verwende ich wahrscheinlich eine prozentuale Breitenangabe am besten oder?

**BugBuster** · 28.01.2013, 10:17

Wenn du left und right verwendest und das Grid, dann musst du dich an den Angaben im Grid halten.
left/right muss die Breite in Pixel bekommen einer Grid Klasse +20px (2x10px Abstand). Grund ist, dass in Summe von left,main,right du wieder auf die 960px kommen musst, sonst verschiebt sich alles.

Wenn du prozentual arbeiten willst, brauchst du ein prozentuales Grid, was C3 aber nicht mitliefert.

Ich habe bisher mit prozentualem Grid gearbeitet und mir die Spalten selber per Grid gemacht, ohne die Layoutbilder-Spalten.

**ElMariachi** · 28.01.2013, 10:29

Hi, danke für die schnelle Antwort.

Ich verwende das Grid hier: http://contaogrid.glen-langer.de/prozent-grid-1140.html

Sehe aber eigentlich auch keinen Vorteil darin #left und #right anzulegen. Also einfach drei Grids und fertig sind die Spalten...

**BugBuster** · 28.01.2013, 14:17

Hehe, das sehe ich genauso. Dann solltest man aber das Reset noch mitnehmen wenn man den Layoutbuilder nicht mit nimmt.

Das Grid ist übrigens von mir :-)

**elmuerto** · 30.01.2013, 13:26

Wie kann ich dann Module einbinden?
Oder muss ich alles als Inhaltselement einbineden?
Was meinst Du mit drei Grids?

**ElMariachi** · 30.01.2013, 15:05

Yep, ich weiß.

Werde demnächst auch ein Grid basteln...

Statt #left, #main, #right machst du nur #main und teilst das in drei Grids auf, also z.B.
grid 2, grid 8, grid 2 -> Bei einem 12er Grid.

**elmuerto** · 30.01.2013, 15:11

Ja das verstehe ich.
Ich weise dann den Artikeln grid2 grid8 grid2 zu.
Was ist aber mit Modulen die permanent angezeigt werden sollen.
Die muss ich ja auf jeder seite wieder als Inhaltselement einbinden?

**BugBuster** · 30.01.2013, 17:46

Du musst auf jeder Seite die 3 Artikel packen und und jeweils das Modul z.b. immer in Artikel 1.
Das macht man natürlich nicht per Hand sondern kopiert sich eine Seite die speziell dafür vorgesehen ist.

Eine Alternative, ab Contao 3.0.3, ist es eine Kombination von Layout Builder und Grid einzusetzen.
Da muss man aber genug Ahnung von beiden haben um es richtig zu machen. Demnächst gibt es auf meiner Grid Akademie Seite Beispiele dazu.

**elmuerto** · 31.01.2013, 11:51

O.K. genau das wollte ich wissen.
Ich hab mich nur gefragt ob ich das auch richtig mache.
Das macht der Performance der Website aber nix?
LG
Martin

**elmuerto** · 01.02.2013, 08:57

Sorry,

jetzt habe ich noch ein Problem:

Ich habe ja das 1140er 16Spalten Grid mit Sticky Footer und ich habe ein Nachrichtenarchiv mit .grid10 und eins mit .gid6.
Wenn ich das .grid10 Nachrichtenarchiv durchblättere ist auf der letzten Seite nur eine Nachricht.
Das bewirkt, dass das .grid6 Nachrichtenarchiv dann nachrutsch und unter dem .grid10 Nachrichtenarchiv ist.
Was kann ich da machen?

Grüße
Martin

**BugBuster** · 01.02.2013, 09:26

Kann man das irgendwo sehen? Ich kann mir das so nicht vorstellen. Wenn das grid6 nach unten rutscht, dann ist irgendwas im grid10 oder im grid6 zu breit würde ich mal blind sagen.

**elmuerto** · 01.02.2013, 10:55

http://musikladen-salzburg.at.
Wenn Du die News auf bis seite 3 durchböätterst siehts Du es.

**elmuerto** · 01.02.2013, 11:38

So hab's jetzt selbst kapiert.
Ich habe für die "rechte Spalte" 2 Artikel angelegt.

**elmuerto** · 23.02.2013, 14:28

Hi, ich bräuchte dringend nochmal Hilfe.
Die Seite http://musikladen-salzburg.at ist am Responsinator
auf allen Apple Produkten (iPhone und iPad) zu breit.
Ich versuche das schon den ganzen Tag zu lösen komme aber auf meinen Fehler einfach nicht drauf.
Ich benutze das Glen Langer Responsive Grid, Prozent, 1140px-16.
Für Hilfe wäre ich echt dankbar.
Danke und Grüße!

**BugBuster** · 23.02.2013, 15:50

Wodurch sollte es denn schmaler werden?

**elmuerto** · 23.02.2013, 17:58

Ich schätze dass ich irgendwo einen margin übersehe.
Jedenfalls erscheint bei den Apple Produkten im Portrait Modus ein horizontaler Scrollbalken.

**elmuerto** · 24.02.2013, 09:46

Wenn ich's in Firebug im Responsinator anschaue dann wird mir beim #wrapper in der iPad Portait Ansicht eine Breit von 768px angezeigt.
Wenn ich die Grid academy im Responsinator anschaue dann wird beim #wrapper max-width:100%; ausgegeben.
Beim iPhone bin ich genau um einen Pixel zu breit.

**MacPix** · 26.03.2013, 21:29

Hallo grid Profis

Ich hätte paar anfänger fragen gerne nur in kompination grid/responsitiv

- muss ich im css die grids definieren? .g1 .g2 und so weiter ?
- wenn ja was noch ?
- em ihr redet von automatischen verkleinern? Muss ich nicht ein anderes css für zb ipad hochformat erstellen?

Hoffe jemand weiss was ...

**Ainschy** · 26.03.2013, 23:28

Mit der Verwendung des im Contao 3 vordefinierten Responsiv-Grid Systems brauchst du keine eigenen CSS Definitionen.

Du vergibst den Inhaltselementen oder Artikel die Klassen g1 - g12.

g1 bedeutet 1/12 der maximalen Breite
g6 entspricht 6/12 = die Hälfte der maximalen Breite usw.

Es gibt für den Google Chrome Browser ein Addon: Contao-Tools damit lässt sich ein Grip Overlay einblenden und vieles mehr.

Das mitgelieferte Grid ist auf 960 Pixel Breite ausgelegt, wird der Viewport schmaler schieben sich die einzelnen Boxen entsprechend.

Gruß Oliver