Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Neues Stylesheet erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Float-Eigenschaft in CSS ermöglicht ebenfalls die Erstellung eines zweispaltigen Layouts mit fester Breite. Die vorbereitenden Maßnahmen hierfür umfassen das Anlegen eines neuen Stylesheets.

Transkript

Mit der Eigenschaft Float können Sie nicht nur Grafiken neben Text schweben lassen, sondern auch ganze Bereiche nebeneinander stellen, wie zum Beispiel hier in der Navigation, die jetzt horizontal verläuft, die kann man mit wenigen Maßnahmen, mit wenigen Styles links als eine Spalte darstellen, die dann neben dem Inhaltsbereich steht, also eine vertikale Navigation. Genau das werden Sie probieren hier und zwar passiert das in mehreren Schritten. Zuerst wird ein Stylesheet für die vertikale Navigation erstellt, dann wird der Navigationsbereich nach links gefloatet, der Inhaltsbereich bekommt einen Außenabstand um Platz für den Navibereich zu machen. Die Navigationsliste und Hyperlinks darin werden gestaltet. Sie sehen, hier schafft ein optisches Feedback für den Besucher, damit er sieht, auf welcher Seite er ist, und zum Schluss wird die Überschrift auf den Seiten ausgerichtet und der Fußbereich gecleart, damit das auch wirklich unterhalb der gefloateten Elemente bleibt. So weit der Überblick, hier im Browser ist das der Ausgangspunkt. Diese Navigation soll unterhalb von 767 Pixeln bleiben, also auf mobilen Geräten zum Beispiel und oberhalb davon soll es dann zweispaltig werden. Los geht es dazu im Editor. Als erstes hab ich navi-float-vertikal schon mal erstellt, ein fast leeres Stylesheet und in zentrale CSS eingebunden und zwar nach navi-float-horizontal. Damit der Wirkungsbereich von navi-float-horizontal eingeschränkt wird, ergänze ich den Medientyp zu einer MedienQuery und schreibe and (max-width:767px). Wenn der andere ab 768 gelten soll, dann soll diese maximal width jetzt stimmt auch die Einfärbung, Sie haben das eben gesehen, wenn das hier rot ist, dann stimmt irgendwas nicht, kleiner Tippfehler mit großer Wirkung @media screen and (max-width:767px). Das heißt also, wenn ich jetzt darüber gehe in den Browser und das aufrufe, dann haben Sie diesen Effekt, weil die Navigation gilt bereits nicht mehr. Unterhalb von 767 Pixeln, ich rufe hier mal das Menü Entwickler-Werkzeuge auf und den Befehl Bildschirmgrößen testen, dann sehen Sie hier, funktioniert nach wie vor und sobald wir auf 767 Pixel kommen, - ups hier es ist geschehen - ist das ungestaltet, denn da wird navi-vertikal an die Reihe kommen, und da schränken wir auch gleich hier den Wirkungbereich ein und sagen and (min-width:768px). So ergänzen die einander perfekt. Maximal 767, minimal 768. In zentrale.css ist alles eingebunden und damit sind die ersten vorbereitenden Schritte erledigt.

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!