Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Dreispaltiges Layout anlegen

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Zusätzlich ermöglicht CSS die Gestaltung eines dreispaltigen Layouts. Dabei dient die Definition negativer Abstände zwischen den einzelnen Spalten dazu, diese beliebig anzuordnen.

Transkript

Bei dreispaltigen Float Layouts gibt es einen Trick-Namens in negative margins, mit dem man am Bildschirm, am Desktop in Breite drin Browserfenstern eine fast beliebige Spalten Rheienfolge erreichen kann. Ausgangspunkt ist hier die Startseite mit dem Inhaltsbereich main und 2 Infobereichen, aside Infobereich und aside Infobereich 2 ganz einfache Namen. Die Inhalte spielen hier nicht so eine große Rolle. In kleineren Browserfenstern soll hier alles untereinander stehen, wenn ich das hier noch mal, so, etwas kleine mache, sieht man das hier auf ein Smartphone Bild, dass etwas so aussehen. Am Desktop soll die Inhaltspalte in der Mitte stehen, und die Infobereiche rechts und links davon. Und ideale Weise soll das sogar möglich sein, den Inhaltsbereich hier links zu lassen, um rechts eine doppeltes Sidebar zu machen. Das meine ich mit beliebige Spalten Reihenfolge und los geht es im Editor natürlich hier ist die index.html, main ist der Inhaltsbereich und darunter zwei aside Elemente mit ids Infobereich und Infobereich 2, gestaltet sollen die für den Desktop werden, also in Desktop css mit einer mindest Breite von 768px. Hier ist der Wrapper 80% maximal 60 eher, mimimal 720 und hier unten drunter kommt jetzt erst einmal die Gestaltung für main und aside. Der erste Schritt bei etwas komplex in Float Layouts ist auf, dass man das neue Border-Box-Modell zuweist, Boxsizing Border-Box. Wenn man merkt, dass fast alle Elemente dieser Border-Box bekommen, dann kann man die auch irgendwann hier in Fundament css hinterlegen mit Sternchen Boxsizing Border-Box für alle Elemente. So, die nächste Schritt ist hier die Gestaltund von main und das soll zu nächst nach links gefloatet werden, float:left bekommt eine Breite von 60%, einen margin:left von 60%, so, und einen margin:right und jetzt kommt es von minus (-80%). So, und hier margin:left 60 ein bischen viel, das soll 20 sein und da sehen Sie schon 60+ 20 sind 80, das ist kein Zufall, sondern den negativen Margin ist die Summe der Breite des Elementes und des linken Margins. Damit man den besser erkennen kann, am Bildschirm kommt jetzt hier noch Background ich nehme ein helles Gelb so, gespeichert ist rüber in dem Browser und hier sehen Sie, wie es aussieht das ist noch nicht ganz fertig, aber der mittlere Bereich hier der Inhaltsbereich der steht schon in dem Mitte hellgelber Hintergrund links margin 20 und rechts ist auch ein bischen margin. Was diese -80% bedeuten? Das werden wir gleich genauer sehen. So, jetzt kommen wir Editor erstmal die beiden Sidebars also, am Desktop sehen Sie Sidebars, Infobereich ist der Erste und der soll auch gefloatet werden natürlich float:left sagen wir mal auch width:20% und, damit man ihn erkennen kann. Background:light blue so, da haben wir in hin und einmal schauen, was das hier macht. Das hat sich bewerbt, wir sehen immer noch nicht perfekt, aber schon besser, als eben. Also der erste Infobereich steht an der Stelle, wo er stehen soll und passt farbliche perfekt mit dem anderen, will noch der dritte inbound. Das ist #infobereich2 und der soll nach rechts gefloatet werden, bekommt eine Breite von ebenfalls 20% und damit man in farblich erkennen kann, soll er mal helping werden. So, mal gelb, blau und pink float:right auch width 20, der einfach hat halber und einmal rüber. So sieht es gut aus und die 3 Spalten passen nebeneinander. Das besondere daran ist, dass im Quelltext diese Bereich zuerst kommt, dann kommt Infobereich und dann Infobereich 2. Mit normalen Floats ist das, was ich hier jetzt sehen nicht möglich, deswegen haben wir den Trick mit dem negativen Margin gemacht. So, ich zeige einmal hier in Inspektor, so, den main Bereich und, da sehen Sie hier den negativen Margin. sobald ich den ausstelle, sieht das so aussieht, kann ich jetzt denn wieder nach links floaten, Sie sehen das bleibt alles relativ stabil die Rheinfolge ist fast beliebig darum, aber das Zentrum der Kern dieses Tricks ist diese negative margin. Der ist nicht einfach zu verstehen, aber man sieht schon das er funktioniert.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!