3-spaltiges Layout -> 1-spaltiges Layout
0 
molily
0 0 
Gunnar Bittersmann
3-spaltiges Layout -> 1-spaltiges Layout
Hallo,
ich versuche mich gerade an einem 3-spaltigem responsive Layout mit einem Breakpoint bei 800px. Alles <800px soll einspaltig dargestellt werden.
Hier mal eine kleine Skizze:
Bis mir die Idee mit den Boxen 4 und 5 gekommen ist, konnte ich das alles ganz gut umsetzen; da einfach nur die Boxen 1 und 3 links/rechts zu floaten waren. Box5 konnte ich auch noch umsetzen, indem ich den Inhalt ebenfalls die Eigenschaft float: left verpasst habe. Für Box3 fehlt nun eine Eigenschaft float both bzw. wohl eher eine Idee, wie ich die Box4 in der Großansicht (>800px) links von dem Inhalt (Box3) bekomme und in der Kleinansicht (<800px) darunter (siehe Skizze).
Mein HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test (Breakpoint bei 800px)</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">Header</div>
<div id="box1">Box1 links oben</div>
<div id="box2">Box2 rechts oben</div>
<div id="box3"><h1>Box3 mitte</h1>
<p>Blindtexte nennt man Texte, die bei der Produktion von Publikationen oder Webseiten als Platzhalter für spätere Inhalte stehen, wenn der eigentliche Text noch nicht vorhanden ist. Sie werden auch als Dummy-, Füll- oder Platzhaltertexte bezeichnet. Mitunter sollen Komponisten von Liedern Blindtexte beim Komponieren von Melodien benutzen und diese vor dem Dichten des Liedtextes singen. Bereits seit dem 16. Jahrhundert dürften Blindtexte bei Setzern üblich gewesen sein.</p>
</div>
<div id="box4">Box4 links unten</div>
<div id="box5">Box 5 rechts unten</div>
<div id="footer">Footer</div>
</body>
</html>
Mein CSS:
* { margin: 0; padding: 0; text-align: center; }
#header, #footer { background-color: black; color: white;}
#footer { clear: both; }
#box1 { background-color: blue; width: 30%; float: left; }
#box2 { background-color: green; width: 30%; float: right; }
#box3 { background-color: yellow; width: 40%; float: left; }
#box4 { background-color: pink; width: 30%; float: left; }
#box5 { background-color: silver; width: 30%; float: left; }
@media screen and (max-width: 800px) {
#box1, #box2, #box3, #box4, #box5 { width: 100%;}
}
Ich bin für alle Anregungen, Tipps, Ideen wie das skizzierte Beispiel umzusetzen sehr dankbar; gerne lade ich das vollständige Beispiel hoch, wenn dies hilfreich ist.
Gruß
Alex
-
Hallo,
ich behaupte mal, dass ein solches Layout (bzw. konkret die Serialisierung) mit float nicht möglich ist. Floats stapeln sich immer in Floatrichtung. Man könnte der Mittelspalte float: none geben, aber dann fangen die Boxen 4 und 5 erst darunter an.
Dass man da irgendwie tricksen kann mit negativen Margins usw., schließe ich nicht aus, aber robust wird das Layout dadurch nicht.
So ein Layout ist vielleicht mit Flexbox möglich, da sich dort die Reihenfolge bestimmen lässt. Wobei Flexbox eine Haupt-Fließrichtung kennt, in der sich die Boxen stapeln. Will man Boxen in zwei Dimensionen verteilen, braucht man verschachtelte Flex-Container. Dadurch fällt die Kontrolle bei der Serialisierung wieder weg, soweit ich weiß.
Grüße,
Mathias-
Hallo,
ich schließe mich Mathias Ausführungen (weitestgehend) an. Wobei ich so spontan eher der
Meinung bin, dass du auch mit verschachtelten Flex-Boxen durchaus eine Serialisierung erreichen könntest. Allerdings macht das aktuell aufgrund der verschiedenen Syntaxen und diverser Browser-Bugs alles andere als "Freude".Mir stellt sich aber einige ganz andere Fragen:
Machen diese ganzen Boxen wirklich Sinn?
Wo steckt die Navigation?
Beherbergt Box 3 den eigentlichen Inhalt? Wenn ja, sollte sie in der 1-Spalten Version direkt nach dem Header kommen und nicht nach den Boxen 1 + 2.Responsive Design hat für mich auch viel damit zu tun, seine Inhalte auf das Wesentliche zu beschränken und dem Benutzer ein Höchstmaß an "Übersichtlichkeit" zu bieten.
Denn was sich auf einem "breiten Viewport" (bspw. 1440px) noch halbwegs als "zusätzliche Informationen" in Randspalten unterbringen lässt (ohne zu sehr vom eigentlichen Inhalt abzulenken), wird auf "Small Screen Devices" zur "Scroll-Orgie" ...!
Gruß Gunther
-
Hallo Gunther,
vielen Dank für deine Antwort.
ich schließe mich Mathias Ausführungen (weitestgehend) an. Wobei ich so spontan eher der
Meinung bin, dass du auch mit verschachtelten Flex-Boxen durchaus eine Serialisierung erreichen könntest. Allerdings macht das aktuell aufgrund der verschiedenen Syntaxen und diverser Browser-Bugs alles andere als "Freude".Bis die Browser und mein Kopf bereit für Flexboxen sind, werde ich erstmal darauf verzichten.
Mir stellt sich aber einige ganz andere Fragen:
Machen diese ganzen Boxen wirklich Sinn?
Wo steckt die Navigation?
Beherbergt Box 3 den eigentlichen Inhalt? Wenn ja, sollte sie in der 1-Spalten Version direkt nach dem Header kommen und nicht nach den Boxen 1 + 2.Eine konkrete Verwendung habe ich nicht. Vielmehr wollte ich ein Prototyp bauen, welcher für verschiedene Projekte verwendet werden kann. Möglicherweise auch als Joomlatemplate.
Vorstellbar wäre, dass Box1 die Hauptnavigation beinhaltet und Box2 eine wichtige Infobox (News) darstellt. Box3 ist der Inhalt. Box4 und 5 sind eher zu vernachlässigende Box mit weniger wichtigen Infos. Box4 könnte z. B. eine Statistik sein (angemeldete User etc.) und Box5 ein zufälliges Bild aus einer Galerie. Deshalb sollen diese auch in der "Kleinansicht" unter den Content rutschen.
Box1 und Box2 zwei halte ich hingegen für so wichtig, dass diese vor dem Inhalt dargestellt werden; möglicherweise in minimierter Form (Nur Navigationspunkte 1. Ebene).
Responsive Design hat für mich auch viel damit zu tun, seine Inhalte auf das Wesentliche zu beschränken und dem Benutzer ein Höchstmaß an "Übersichtlichkeit" zu bieten.
Da stimme ich dir grundsätzlich zu; wobei das generell und nicht nur für Responsive Design gilt. Dennoch oder gerade deswegen wollte ich so flexibel sein, dass ich Inhalte in unterschiedlichen Boxen platzieren kann, um so die Übersichtlichkeit auch auf kleinen Bildschirmen zu wahren, indem weniger wichtige Informationen unter den Inhalt rutschen; währende zwingend notwendige Bedienelemente (Navigation) davor erscheinen. Gerade bei der Navigation entspricht dies doch auch der allg. Erwartung; zumindest ist dies auf den von mir besuchten Seiten meist der Standard (Navigation oberhalb des Contents).
Jetzt könnte man die weniger wichtigen Informationen natürlich auch in der "Großansicht" unterhalb des Inhalts positionieren, aber da hätte ich unnötig Platz (links und rechts) verschenkt und wenn man trotz dieses Platzes unter den Inhalt scrollen muss, spricht das ja auch nicht gerade für Bedienungsfreundlichkeit.
Denn was sich auf einem "breiten Viewport" (bspw. 1440px) noch halbwegs als "zusätzliche Informationen" in Randspalten unterbringen lässt (ohne zu sehr vom eigentlichen Inhalt abzulenken), wird auf "Small Screen Devices" zur "Scroll-Orgie" ...!
Dem stimme ich zu. Aber wenn es Inhalte von Relevanz sind, die nicht durch den v. g. Filter gefallen sind, ist es immer noch besser dafür zu Scrollen, als Besuchern diese Inhalte vorzuenthalten, nur weil sie mit einem kleineren Bildschirm auf die Seite kommen.
Freundliche Grüße
Alex-
Hallo Alex!
vielen Dank für deine Antwort.
Gern geschehen. ;-)
ich schließe mich Mathias Ausführungen (weitestgehend) an. Wobei ich so spontan eher der
Meinung bin, dass du auch mit verschachtelten Flex-Boxen durchaus eine Serialisierung erreichen könntest. Allerdings macht das aktuell aufgrund der verschiedenen Syntaxen und diverser Browser-Bugs alles andere als "Freude".Bis die Browser und mein Kopf bereit für Flexboxen sind, werde ich erstmal darauf verzichten.
Dann wirst du es sehr schwer haben, ein "brauchbares" Responsive Design zu erstellen, da aktuell nur Flexbox die Möglichkeit bietet, die Reihenfolge von HTML Elementen rein per CSS zu ändern.
Mir stellt sich aber einige ganz andere Fragen:
Machen diese ganzen Boxen wirklich Sinn?
Wo steckt die Navigation?
Beherbergt Box 3 den eigentlichen Inhalt? Wenn ja, sollte sie in der 1-Spalten Version direkt nach dem Header kommen und nicht nach den Boxen 1 + 2.Eine konkrete Verwendung habe ich nicht. Vielmehr wollte ich ein Prototyp bauen, welcher für verschiedene Projekte verwendet werden kann. Möglicherweise auch als Joomlatemplate.
Ich bin da eher der Auffassung, dass "Responsive Design" so sehr vom jeweiligen Einzelfall abhängig ist, dass "Prototypen" hier nicht unbedingt zum bestmöglichen Ergebnis führen.
Vorstellbar wäre, dass Box1 die Hauptnavigation beinhaltet und Box2 eine wichtige Infobox (News) darstellt. Box3 ist der Inhalt. Box4 und 5 sind eher zu vernachlässigende Box mit weniger wichtigen Infos. Box4 könnte z. B. eine Statistik sein (angemeldete User etc.) und Box5 ein zufälliges Bild aus einer Galerie. Deshalb sollen diese auch in der "Kleinansicht" unter den Content rutschen.
Box1 und Box2 zwei halte ich hingegen für so wichtig, dass diese vor dem Inhalt dargestellt werden; möglicherweise in minimierter Form (Nur Navigationspunkte 1. Ebene).
Auch das sehe ich anders ...! ;-)
Als Besucher weiß ich ja, welche Seite ich gerade angesteuert habe. Ergo erwarte ich (mit) als Erstes auf der Seite den eigentlichen Content zu sehen, und nicht jedes Mal erst über die Navigation und immer dieselbe Infobox (die spätestens ab der zweiten Seite eben nicht mehr "new" ist) hinwegscrollen zu müssen.Responsive Design hat für mich auch viel damit zu tun, seine Inhalte auf das Wesentliche zu beschränken und dem Benutzer ein Höchstmaß an "Übersichtlichkeit" zu bieten.
Da stimme ich dir grundsätzlich zu; wobei das generell und nicht nur für Responsive Design gilt. Dennoch oder gerade deswegen wollte ich so flexibel sein, dass ich Inhalte in unterschiedlichen Boxen platzieren kann, um so die Übersichtlichkeit auch auf kleinen Bildschirmen zu wahren, indem weniger wichtige Informationen unter den Inhalt rutschen; währende zwingend notwendige Bedienelemente (Navigation) davor erscheinen.
Es gibt durchaus die häufig anzutreffende Meinung, dass auf "schmalen (lineare einspaltige Darstellung) Viewports" die Navigation *nach* dem Inhalt kommen sollte. Persönlich bevorzuge ich einen Link/ Button ganz oben, um die Navigation ein- & auszublenden.
Gerade bei der Navigation entspricht dies doch auch der allg. Erwartung; zumindest ist dies auf den von mir besuchten Seiten meist der Standard (Navigation oberhalb des Contents).
Nicht ubedingt - s.o.
Jetzt könnte man die weniger wichtigen Informationen natürlich auch in der "Großansicht" unterhalb des Inhalts positionieren, aber da hätte ich unnötig Platz (links und rechts) verschenkt und wenn man trotz dieses Platzes unter den Inhalt scrollen muss, spricht das ja auch nicht gerade für Bedienungsfreundlichkeit.
Es gibt zahlreiche Untersuchungen (Eyetracking Verfahren), dass solche "Randinhalte" kaum wahrgenommen werden. Ich persönlich beachte solche Randspalten auch kaum, da ich quasi automatisch davon ausgehe, dass sie für mich keine relevanten Informationen beinhalten.
Denn was sich auf einem "breiten Viewport" (bspw. 1440px) noch halbwegs als "zusätzliche Informationen" in Randspalten unterbringen lässt (ohne zu sehr vom eigentlichen Inhalt abzulenken), wird auf "Small Screen Devices" zur "Scroll-Orgie" ...!
Dem stimme ich zu. Aber wenn es Inhalte von Relevanz sind, die nicht durch den v. g. Filter gefallen sind, ist es immer noch besser dafür zu Scrollen, als Besuchern diese Inhalte vorzuenthalten, nur weil sie mit einem kleineren Bildschirm auf die Seite kommen.
Stark vereinfacht könnte man wie folgt argumentieren:
Entweder sind Inhalte für die jeweilige Seite relevant, dann gehören sie zum Inhalt der Seite. Oder sie sind es nicht, dann gehören sie auch nicht "zwingend" auf die Seite.Man sollte ja auch an das Datenvolumen denken, insbesondere wenn User die Seite nicht über ihren heimischen DSL Anschluss oder irgendein flottes W-LAN abrufen.
Unter diesem Aspekt sehe ich "zusätzliche Informationen", die mir quasi ungefragt bei jeder Seite mitgeliefert werden, eher als Ärgernis, denn als wirklichen "Mehrwert".
Denkbar wäre bspw. auch diese Inhalte per AJAX abrufbar zu machen, oder gar auf eine eigenständige Seite auszulagern.Aber wie gesagt, das ist in weiten Teilen alles vom jeweiligen individuellen Fall abhängig.
Gruß Gunther
-
Hallo nochmal,
vielen Dank für die weiteren sehr interessanten Hinweise :-)
FG
Alex
-
-
@@Alex:
nuqneH
Bis die Browser und mein Kopf bereit für Flexboxen sind, werde ich erstmal darauf verzichten.
Jordan Moore: Why I believe Flexbox is production-ready
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
Hallo Mathias,
ich behaupte mal, dass ein solches Layout (bzw. konkret die Serialisierung) mit float nicht möglich ist. Floats stapeln sich immer in Floatrichtung. Man könnte der Mittelspalte float: none geben, aber dann fangen die Boxen 4 und 5 erst darunter an.
Diese Befürchtung habe ich auch und fühle mich jetzt darin bestätigt.
Dass man da irgendwie tricksen kann mit negativen Margins usw., schließe ich nicht aus, aber robust wird das Layout dadurch nicht.
Das ist nicht in meinem Sinne. In diesem Fall verzichte ich eher auf die Box4.
So ein Layout ist vielleicht mit Flexbox möglich, da sich dort die Reihenfolge bestimmen lässt. Wobei Flexbox eine Haupt-Fließrichtung kennt, in der sich die Boxen stapeln. Will man Boxen in zwei Dimensionen verteilen, braucht man verschachtelte Flex-Container. Dadurch fällt die Kontrolle bei der Serialisierung wieder weg, soweit ich weiß.
Also Flexbox ist ja mal ein Stichwort. Das war mir bisher völlig unbekannt. Wenn auch nicht für das v. g. Beispiel, werde ich mir das auf jeden Fall mal anschauen.
Vielen Dank für deine Antwort.
Freundliche Grüße
Alex
-
-
Hallo,
mir fällt auch nur negativer margin ein. Ein div mit negativem margin-top und width:100% um box4 und box5 legen, box5 float:right und bei <800px den negativen margin-top enfernen.
vg ichbinich
--
Kleiner Tipp:
Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...-
Hallo ichbinich,
vielen Dank für deine Antwort.
mir fällt auch nur negativer margin ein. Ein div mit negativem margin-top und width:100% um box4 und box5 legen, box5 float:right und bei <800px den negativen margin-top enfernen.
Das ihr euch alle so einig seid, freut mich :)
Das mit dem negativen margin ist hier m. E. keine Option, da die Höhen der Boxen nicht fest sind, sondern sich dynamisch an dem Inhalt anpassen. Hier wüsste ich nicht, wie ich den Wert für den negativen margin festlegen soll.
Dennoch vielen Dank für den Ansatz.
FG
Alex
-
-
@@Alex:
nuqneH
mit einem Breakpoint bei 800px
Breakpoints sollten nach dem Inhalt festgelegt werden, nicht nach Geräten. (Pitfall #5) Dazu ist em die weitaus bessere Einheit als px.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo Gunnar.
Breakpoints sollten nach dem Inhalt festgelegt werden, nicht nach Geräten.
Das ist mir klar.
Dazu ist em die weitaus bessere Einheit als px.
Das hingegen erschließt sich mir nicht.
FG
Alex-
Hallo!
Dazu ist em die weitaus bessere Einheit als px.
Das hingegen erschließt sich mir nicht.
Wenn du für deine Breakpoints von Pixeln ausgehst, und ein User eine größere oder kleinere Basis-Schriftgröße in seinem Browser eingestellt hat, dann "passt" dein Inhalt u.U. nicht mehr zu den angedachten Breakpoints.
Von daher immer 'EMs' verwenden, da diese eine relative Größe darstellen und du somit die "Wünsche" (Konfiguration) des Users respektieren kannst *und* trotzdem dein Layout "passt".
Gruß Gunther
-
-