Bei dreispaltigen Layouts (Hauptspalte + 2 Sidebars links und rechts) läuft man im Responsive Design in ein Problem, wenn man mit einem Grid-System arbeitet. Wenn nämlich alle Elemente mit ‚float:left‘ nach links rutschen, müssen die beiden Sidebars im Template-Code über der Hauptspalte eingetragen werden.
In der Desktop-Ansicht stört das nicht weiter, der Betrachter kriegt von der Reihenfolge der Elemente im Code nichts mit.
Anders sieht das bei der Ansicht für Mobilgeräte aus. Hier sind die Spalten nicht mehr nebeneinander angeordnet, sondern alle Elemente sitzen untereinander. In der mobilen Ansicht tauchen also zuerst die beiden Sidebars auf und erst danach – viel weiter unten – kommt der Hauptinhalt. Und ist damit aus dem Blickfeld verschwunden.
Es ist natürlich ungünstig, wenn die Besucher ausgerechnet den wichtigsten Text/das wichtigste Bild nicht sehen können und auf dem kleinen Smartphone-Display nur die Sidebars erscheinen.
Um das Problem zu umgehen, muss man sich bei einem 3-spaltigen Layout von der Methode „float:left für alle“ lösen. Das Ziel ist es, das CSS so zu gestalten, dass die Hauptspalte im HTML-Code zuerst erscheinen kann. Erst danach kommen die beiden Sidebars.
Das erreicht man zum Beispiel dieser CSS-Lösung:
Die Elemente #sidebar-1 und #main-content werden von einem zusätzlichen div-container umschlossen. Dieses umschließende Element bekommt die Anweisung ‚float:left‘ und wandert damit links neben den #sidebar-2.
Kommentare
•
Hallo Kirsten,
danke für Deinen hoffnungsvollen Artikel. Ich hab mich so gefreut und mich gleich an die Umsetzung gemacht. Allerdings ohne Erfolg.
Ich übernehme mal Deine Version und beschreibe meine Vorgehensweise:
1. Sidebar 1
2. Sidebar 2
3. Main-Content 3
Sidebar 2 habe ich mit „display: none;“ versehen.
Dann möchte ich „Main-Content 3“ auf Platz 1 und „Sidebar 1“ folgend.
„Sidebar 1“ und „Main-Content 3“ habe ich mit „Content-Gesamt“ umschlossen.
„Sidebar 1“ hat „float: left“,
„Main-Content 3“ hat „float: right“
und „Content-Gesamt“ hat „float: left“.
Leider hat diese Maßnahme überhaupt nichts bewirkt!
Hast Du irgendeine Idee, was ich falsch gemacht oder übersehen habe?
Einen schönen Abend
Wolfgang
•
Hallo, Wolfgang,
Du schreibst „Leider hat diese Maßnahme überhaupt nichts bewirkt!“
Kannst Du vielleicht etwas genauer beschreiben, was nicht geklappt hat? Was wolltest Du erreichen und was ist stattdessen passiert?
Herzliche Grüße von Kirsten
•
Hallo Kirsten,
danke für Deine Antwort.
Ich wollte erreichen, dass Elemente den Platz tauschen. Meine Desktop-Anzeige hat ein dreispaltiges Layout. Für Smartphones wollte ich nun die Anzeige der linken Sidebar unter den Main-Content schieben. Die rechte Sidebar wird für die Smartphone-Ausgabe nicht benötigt – deshalb „display: none;“.
HTML-mäßig sieht die Sache nach meinem Verständnis aus Ihrem Artikel so aus:
= Ihr umschließender zusätzlicher Container
… = Sidebar links
… = Main-Content
CSS-mäßig so:
#gesamt { float: left; }
#links { float: left; }
#mitte { float: right; }
OK – was ist passiert? Nun, es ging nur ein kurzes Flackern über den Bildschirm und alles blieb wie bisher – zuerst die Sidebar, dann der Main-Content.
Danke für Deine Mühe
Wolfgang
•
Wenn im HTML-Code der sidebar vor dem Main-content kommt, dann erscheint in der Smartphone-Ansicht der sidebar zuerst. Denn er steht ja im HTML an erster Stelle. Erst danach kommt der main-content. Genauso stellt es das Smartphone dar.
Schauen Sie sich mal meine Slides vom WPCamp an, darin habe ich das Vorgehen nochmal erklärt.
•
Hallo Kirsten,
nochmals danke für Deine Mühe. Da hatte ich Dich wohl falsch verstanden. Natürlich wusste ich, dass die HTML-Anordnung die Reihenfolge bestimmt. Deshalb habe ich nach einem Ausweg recherchiert und hatte gehofft, dass Dein „Trick“ dieser Ausweg ist. Ich habe zwar einige Möglichkeiten entdeckt, aber alle haben auch ihre Nachteile.
Nun gut, dann muss ich mir etwas anderes überlegen.
Schönen Feierabend
Wolfgang