responsive grid mit navispalte
Hi Leute,
ich kämpfe gerade mit einer webseite die ich von 2.x auf 3.x upgedatet habe. Ursprünglich war es ein 2-spaltiges Layout mit einer linken Navispalte und einer rechten Inhaltsspalte.
Jetzt würde gerne das responvie grid verwenden und weiß nicht was besser ist: die linke Spalte belassen oder nur 1-spaltiges Layout und über das Grid die Navi links einfügen. Wo liegen hier die Vor- und Nachteile?
Geht das eingentlich so einfach im grid, links neben dem Inhalt eine Navi als Modul einfügen?
Grüße aus Ludwigsburg
Jochen Kubik
Responsive Grid mit Spalten aus dem Layout-Builder
Die linke Spalte sollte im Layout-Builder genau 240px breit sein. Das entspricht 3 Spalten. Dann bleiben 9 Spalten für den Inhalt.
Auf http://crg.pmueller.de/ kannst du dir (vorübergehend) ein Beispiel mit einer rechten Spalte anschauen. Benutzername responsive. Passwort contao30.
Und du wirst ein bisschen nachgestalten müssen, denn das Grid hat drei Stufen:
1. Bei einem Viewport > 980px sind die Spalten 80px breit
2. Bei einem Viewport < 980px sind die Spalten 62px breit
3. Bei einem Viewport < 768px ist es einspaltig
Man sieht das wunderbar mit dem Grid-Overlay aus den Contao Tools für Chrome, wenn man das Browserfenster vergrößert bzw. verkleinert verändern sich die pinkfarbenen Overlay-Spalten mit.
Wenn man in Contao im Inhaltsbereich die Grid-Klassen zuweist, regelt Contao die veränderten Spaltenbreiten von selbst. Wenn du aber wie in der linken Spalte im Layout-Builder 240px zuweist, dann müsstest du in einem Stylesheet mit einer entsprechenden Media Query für 769px bis 979px die Spaltenbreite noch auf 186px reduzieren (3 x 62px statt 3 x 80px).
Responsive Grid - Text bricht nicht um und Spalte sitzt nicht richtig
Wenn im Grid der Text nicht umbricht
Der Text bricht nicht um, weil du dem Slider grid8 gegeben hast. Dadurch ist der gefloatet.
Dann musst du entweder den Artikel direkt clearen oder ein Clearing-Element wie <br class="clear"> einbauen.
Die Spalte sitzt nicht richtig
Was die Verschiebung der linken Spalte angeht, die nicht ganz an der richtigen Stelle sitzt:
https://github.com/contao/core/issues/4829
"Leo: There is a (surprisingly) simple solution: just subtract the padding from the container width." Du musst das max-width für #container also auf 960px - 240px = 720px setzen, und dann stimmts.
Spaltenbreiten
.grid3 = 220px plus 2x10px margin = 240px Spaltenbreite
.grid4 = 300px plus 2x10px margin = 320px Spaltenbreite
.grid5 = 380px plus 2x10px margin = 400px Spaltenbreite
360px tauchen in dieser Rechnung nicht auf ;-)
Full Header mit Grid und 2 Spalten - Übersicht
Probiere doch bitte mal Folgendes:
Beim kleinen Grid (768px bis 979px)
Die Ausgangsbreite von #container ist beim kleinen Grid nicht 960px sondern 744px. Laut Formel gibt es also 744px - 248px = 496px. Und dann sollte es passen.
#left { width: 248px; right:248px;}
#container { padding-left:248px; width:496px;}
Beim großen Grid (> 979px)
Hier ist die Ausgangsbreite von #container ganz normal 960px, also braucht man eine Breite von 960px - 320px = 640px.
#left { width: 320px; right:320px;}
#container { padding-left:320px; width:640px;}
Für Mitleser zur Erinnerung: Es geht um ein - Full-Header-Layout
- mit Responsive Grid
- und Zweispaltigkeit aus dem Layout-builder.
- wobei die linke Spalte der Klasse grid4 entsprechen soll.
Das ist sozusagen die höchste Schwierigkeitsstufe. Zen für Fortgeschrittene ;-)
Liste der Anhänge anzeigen (Anzahl: 1)
Mein Kopf und Grid'n'Holygrail
Bei einem 2spalten muss man die linke Spalte auch ein grid2 oder grid 3 geben? zB Subnavi?
Das Problem ohne verkleinert sich nicht Wie die andern?
Dann ist mir die linke spalte von grid2 zu klein und grid3 fast zu gross. ich habe jetzt die briete Linke spalte 210px.
Wie Ihr auf dem Bild seht, ist der Inhalt spalte links ohne grid, aber der auch mit grid keinen abstand links macht nur rechts von der seite. Habe keine CCS definition von padding/margin so vile ich weiss.
2. Frage
Ich möchte auf der Page mal 1 Spalte und 2 Spalten haben. da muss ich ja mehrere CSS haben. zB beim Container mal 960px und mal 740px.
Macht ihr immer ganze CSS oder nur das was ändert als zweites CSS unten dran? Mit den verschiedenen CSS für die Geträten wie Computer, Tablet und Smartphones kommen einige CSS zusammen. und zB eine Farbe ändern were ja noch cool wenn mal das nur einmal machen muss.
Liste der Anhänge anzeigen (Anzahl: 3)
Erste Tests mit Contao 3 Grid
Ich versuche mich auch gerade einige Variationen mit dem Grid zu testen.
Im Seitenlayout habe ich in der Hauptspalte eine Navigation eingebunden, dieser hab ich im Modul die Klasse grid3 gegeben.
Wenn ich nun noch einen Artikel daneben positioniere z.B. grid3 offset3 sieht das bei volle Fensterbreite gut aus.
Wenn ich nun das Fenster zusammenschiebe, dachte ich, dass eigentlich die Navigation über dem Artikel stehen müsste. Bei mir leider nicht.
Ist mein Vorgehen so richtig? Stimmt die Ansicht?