Hallo Community,
ich bin ziemlich neu in Sachen CSS / HTML und wollte fragen, wie sich ein Layout am besten umsetzen lässt, bei dem ich zwei Bereiche habe, in die ich schreiben kann, aber gleichzeitig nie etwas überlappt. Wie mir aufgefallen ist, funktioniert das bei der Facebook-Startseite so ähnlich (www.facebook.com). Wie kann man (zumindest grob) dafür sorgen, dass sich mein Design den Bildschirmen gut anpasst?
Präzisere Frage zum Thema: Wie kann ich 2 container so anlegen, dass links und rechts von ihnen freier Platz ist, und sich dieser einfach verkleinert wenn der Bildschirm kleiner ist, ohne dass sie sofort untereinander angeordnet werden?
nein, mit span’s nicht. Sondern mit geeigneten Elementen (main, article, section, aside, div) denen entsprechende Klassen (class=„…“) zugewiesen werden.
Kann ich auch zwei relativ kleine columns verwenden, die mittig ausgerichtet sind, aber wenn ich den Bildschirm verkleinere, der freie Platz verkleinert wird, ohne dass gleich alles untereinander angeordnet wird?
Fluid bedeutet ja, dass wenn Elemente bei einer Verkleinerung des Viewports nebeneinander keinen Platz mehr habe, sie untereinander angeordnet werden. Aber du musst die 12 columns nicht voll ausnutzen, sondern kannst per offset auch einige freilassen. Außerdem ist ein Kombination der vier Grids möglich, in dem bsw. eine große Auflösung dreispaltig und eine kleinere vierpaltig angeordnet wird. Last, not least, lassen sich Elemente per Media Queries auch komplett ausblenden.
Der beste Ansatz ist, beim Design mit der kleinsten Auflösung zu beginnen und sich dann „nach oben“ zu arbeiten.