Die linke Spalte rutscht unter die Hauptspalte

[bjoernson]

Hello

ich habe leider in diesem Forum noch keine Antwort zu meiner Frage gefunden, daher mach ich mal einen neuen Thread auf.

Und zwar rutscht die Linke Spalte eines Layouts ja unter die Hauptspalte, wenn man das Browserfenster kleiner schiebt. Ist auch logisch, da Contao wohl nach dem Prinzip: Header > Hauptspalte > linke Spalte > rechte Spalte > Footer die Seite aufbaut.
Ich Frage ich mich nun zuerst nach dem Sinn. Denn wenn ich in der linken Spalte beispielsweise eine Menü habe, sollte dies bei kleinerer Browserdarstellung doch bestenfalls vor der Hauptspalte erscheinen und nicht erst danach?
Als zweites würde ich gern eure Meinung wissen. Macht es denn Sinn das besagt Menü zum Beispiel mit in die Hauptspalte zu setzen und dann zu floaten, so dass es Links von der Hauptspalte erscheint? Wäre das noch eine saubere Umsetzung?

Vielen Dank

[mlweb]

Im Prinzip hast Du eine Reihe Möglichkeiten das Verhalten von Contao anzupassen sowie Du es möchtest.

• Anpassen des fe_templates
• Verwenden eigenen Layoutbereiches für die Navigation, den Du so platzierst wie Du es für richtig hälst
• Verwenden des Flexboxmodells, dann kannst Du auch mit dem Original fe_template steuern, das die linke Spalte bei kleinen Layouts nicht unter den Haupteil rutscht

Bei contao ist der main-Bereich zumindestens im fe_template der aktuellen LTS Version (bei Contao 4 habe ich diesbezüglich noch nicht drauf geachtet) ein ganz normales <div>. Damit steht aus semantischen Gründen eher dem Platzieren der Navigation in left bzw. right etwas entgegen. Die sind von Haus aus nämlich <aside>.

[planepix]

Hallo Maren,

fe_template = fe_page?

Nur damit keiner dieses Template sucht

[planepix]

Hallo bjoernsen,

oft setzt man auch die Navigation für die Desktop-Ansicht in die linke Spalte und setzt die Sichtbarkeit in der responsiven Ansicht auf unsichtbar (display:none und baut eine mobile Navigation, zum Beispiel mit der Erweiterung mmenue, ein, die dann auch in der Hauptspalte positioniert wird und über CSS in der Desktop-Ansicht unsichtbar gesetzt wird und erst bei kleineren Viewportbreiten (Stichwort Mediaqueries) sichtbar gesetzt wird. Somit kann das „Problem” gelöst werden.

[mlweb]

fe_template = fe_page?

Nur damit keiner dieses Template sucht

Ja klar fe_page. Ist wohl doch schon etwas spät. Hatte erst Frontendtemplate stehen und wollte es besser machen indem ich das Template gleich richtig benenne.

[mlweb]

oft setzt man auch die Navigation für die Desktop-Ansicht in die linke Spalte und setzt die Sichtbarkeit in der responsiven Ansicht auf unsichtbar (display:none und baut eine mobile Navigation, zum Beispiel mit der Erweiterung mmenue, ein, die dann auch in der Hauptspalte positioniert wird und über CSS in der Desktop-Ansicht unsichtbar gesetzt.

Setzt Du das häufig so ein?
Ich liebe die dadurch entstehende Dopplung der Navigation nicht sonderlich, habe das deshalb noch nie verwendet.

[planepix]

Ja meistens so. Es sei denn es braucht Sonderlösungen. Oder andere Ansätze - da bin ich für andere Ansätze offen.

Im Seitenlayout eben beide Navigationen platziert und via Mediaqueries ein- oder ausblenden.

[mlweb]

Ich habe mit mehreren Eigenlösungen experimentiert.
Bei Lösungen mit :target gefällt mir das Verhalten bei "Seite zurück" nicht. Bei Lösungen mit "checked", gibt es das Problem mit der Semantik.
Im Moment setze ich eine Lösung mit minimalem javascript und nur einer Navigation ein.
Irgendwie sind mir die zwei gleichen Navigationen die beim mmenue entstehen ein Dorn im Auge.

[Physiklehrer]

Ich Frage ich mich nun zuerst nach dem Sinn.

Der Sinn lautet "Content first"-Prinzip. Nutzer mit langsamer Internetverbindung freut es, wenn der Inhalt zuerst geladen wird und nicht irgendwelche seitlichen Banner oder Menüs. Und Suchmaschinen freut es, wenn der Hauptinhalt im Code möglichst weit oben steht...

[bjoernson]

Super vielen Dank für eure Antworten.

Den zusätzlichen Layoutbereich hab ich glatt übersehen. Und an die Templateanpassung überhaupt nicht gedacht. So öffnen sich ja auch wieder Welten in der Umsetzung

Die Möglichkeit mit dem verstecken Menü wäre auch eine Notlösung gewesen. Aber in diesem Fall ginge es um Untermenüs jeweils in der Linken spalte. Das wäre dann etwas mehr Arbeit geworden