Spalte #left über #main darstellen bei geringer Bildschirmbreite | Contao 3

Hallo,

ich hab das neue Layout-System jetzt noch nicht so ganz begriffen, da werde ich wohl noch eine Zeit brauchen.
Allerdings brauche ich jetzt mal eine schnelle Lösung (und ganz so schwer kann es eigentlich auch nicht sein^^)

Ich habe eine Seite mit den Spalten #left und #main. Im Bereich #left befindet sich nur die Navigation und diese möchte ich gerne bei kleiner Bildschirmbreite über dem Content haben, um nicht immer bis ganz unten scrollen zu müssen um die Navi zu finden.

Das habe ich soweit auch hinbekommen, indem ich die Reihenfolge im Template fe_Page verändert und #left über #main platziert habe.
Das sieht dann bei kleiner Bildbreite auch alles richtig aus. Nur in der normalen Ansicht sind die Bereiche falsch positioniert.

Bekomme ich das jetzt mit CSS hin? Wenn ja, wie?

Simon

hm, schmeiß den Contao Layoutbuilder raus und definier es selbst. War in der 2.x auch so angeordnet.

Ich habe genau das selbe Problem.

Eine Seite mit dem Contao Layoutbuilder erstellt. Sieht super aus, aber beim Verkleinern des Bildschirms wird meine Navigation im Bereich #left unter den Content (#main) geschoben.

Ist ja klar wegen dem Aufbau

Code:

---

<div id="main>
  //...code
</div>
<aside id="left">
 //...code
</aside>
<aside id="right">
 //...code
</aside>

---

... aber ist einfach unschön, wenn das Menü dann in der Mitte der Seite ist.

Wie kann man dies umstellen, unterbinden?

Danke und Gruss
Marco

Und hat es jemand irgendwie geschafft?

http://codepen.io/InitArt/pen/kiqJd

Funktioniert überall außer im IE 7 und niedriger.
Ich empfehle jedoch den Layout Builder zu deaktivieren (der macht imho an den falschen Stellen mehr als er sollte) und einfach das Template abzuändern.

Zitat:

---

Zitat von InitArt

http://codepen.io/InitArt/pen/kiqJd

Funktioniert überall außer im IE 7 und niedriger.
Ich empfehle jedoch den Layout Builder zu deaktivieren (der macht imho an den falschen Stellen mehr als er sollte) und einfach das Template abzuändern.

---

Hm, mit deinem Code werden bei mir die Divs untereinander angezeigt. So gehts: http://codepen.io/anon/pen/DeArv

Im Prinzip muss man dann bei einem bestimmten Umbruch Punkt einfach in "display:block" ändern, dann sind alle schön untereinander ;).
Der IE 7 bekommt dann alle drei Elemente als Block elemente geliefert. Ist auch kein Verbrechen. Die Leute können was erkennen :D

Zitat:

---

Zitat von Zero

Hm, mit deinem Code werden bei mir die Divs untereinander angezeigt.

---

Das war ja auch der Sinn ;). Mit seinem code wird #left über #main (bzw. im Beispiel #top über #middle) angezeigt, obwohl #left bzw. #top im DOM nach #main/#middle vorkommt.

Habe ich dann danach auch gemerkt... :(

Alles funktioniert perfekt, außer beim Safari komischer weise. Kann mir dazu jemand eine Erklärung geben? http://tsv-ueffeln-schwimmen.de.dd29020.kasserver.com

Dazu müsst ihr natürlich das Fenster kleiner als 768px machen, dann sollte eigentlich die Navigation über das Main springen...

Danke im Voraus!

Hm, also im Safari 5.1.7 für Windows funktioniert es.


Übrigens wäre es evt. nicht schlecht für den IE8 ein stylesheet (evt. mit conditional comments) zu inkludieren, dass den wrapper auf width:960px fixiert (außer dir is es egal, dass im IE8 dann alles kaputt wird <960px :D).

Danke für den Hinweis! Mit dem Safari 6.0.5 auf dem Mac macht er irgendwie nicht! Kann dies vielleicht jemand bestätigen? Hab es grad noch auf einem anderen Mac ausprobiert -> selbe Problem!

Sollte gehen. Vielleicht was anderes nicht richtig?
http://caniuse.com/#search=table

Ja rein theoretisch sollte es gehen, aber es funktioniert nur nicht beim Mac :-/ Was kann ich nun machen? Spezialisten sind nun gefragt!

Hallo,

bin hier auch am rumprobieren die Linke Spalte beim verkleinern der Seite über den Main zu bringen. (CMS 3.2.3)
Krieg es mit obigen Angaben jedoch nicht hin.
Das 12-Spalten Grid sowie den Layout-Builder möchte ich gerne "aktiviert" lassen.

Hat jemand einen Tipp ?

Besten Dank

Das geht nicht mit dem Layout-Builder und seinem "Holy Grail".

Wenn ihr mehr über den "Holy Grail" wissen wollt und wieso #left unterhalb von #main erscheint, schaut auch das PDF zu meinem Vortrag "Responsive Contao" vom Contao-Nordtag 2013 an (http://pmueller.de/downloads.html).