Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

CSS: Responsive Flexbox-Layouts für Profis

Erweiterte Navigation 2: Icons und Text gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Icons und der Text werden per Flexbox gestaltet: Icon und erstes Wort nebeneinander, darunter der Rest des Satzes.

Transkript

Jetzt soll die Navigation so weit gestaltet werden, diese erweiterte Navigation, dass die Icons neben dem Text stehen und am Ende soll das Ganze in etwas so aussehen wie hier. Dazu geht es ab in den Editor und "nav-advanced.html" wird gestaltet über "zentrale.css" und das Stylesheet, in dem die Gestaltung der Navigation aufbewahrt wird, ist "nav-advanced.css". Los geht es von innen nach außen mit dem Styling der Hyperlinks, die zwei "Div"s enthalten, eines für den Icon und ein für den Button-Text. Die Klasse für die Navigation heißt ".advanced-nav li", ist das Listenelement und die Hyperlinks darin sind das "a". Los geht es mit "display: flex;", damit stehen die schon nebeneinander und der Vollständigkeit halber schreibe ich hin: "flex-start", "justify -content", obwohl das streng genommen nicht nötig ist. weil das ja die Standardeinstellung ist; gespeichert ist und im Browser einmal neu laden und Sie sehen, es steht schon nebeneinander. Das ist "display: flex;" für die Hyperlinks, für die "a", die die beiden "Div"s enthalten und damit werden die "Div"s zu Flex-Items und stehen nebeneinander. Im nächsten Schritt möchte ich die Schriftgröße für die Icons verändern und auch gleich für den Text daneben, das ist dann also: "font-size: 1.8em;" und wieder schließen und das Gleiche mache ich für den Text, ich nehme aber zwei Styles, da die Icon-Style da oben gleich noch etwas mehr bekommt, der wird noch geflext. Und hier auch: "font-size: 1.8em;" und speichern, rüber in den Browser, neu laden und es sollte jetzt etwas größer sein, das haut schon hin. Jetzt kommt der Rest des Satzes nach dem ersten Wort, der in einer eigenen Zeile stehen soll und dazu kommt: ".button- text span", denn das haben Sie im HTML gesehen, dort liegen die Worte ab dem zweiten, "block" soll das hier werden, "display: block;", damit die auf einer eigenen Zeile stehen; "font-size: 40%;", ziemlich klein, "font-weight" machen wir mal "lighter" und "font-style" zum Schluss noch "italic", und auch hier jetzt noch einmal wieder anschauen im Browser. So sieht das schon [gut] aus, das passt eigentlich schon ganz gut, jetzt muss hier nur noch ein bisschen Abstand zwischen und das machen wir im Editor, indem wir hier der Icon-Klasse noch eine Flex-Eigenschaft zugeben: "flex: 0 0 1.5em;". Die Icon-Klasse können wir flexen, da hier die umgebenden Hyperlinks, das ist der Flex-Container und darin enthalten ist "div.icon", hier noch einmal im HTML ganz kurz zur Erinnerung, das ist unser Flex-Container, das ist also ein Flex-Item, der genau so, deswegen können wir hier "flex" verwenden und wir sagen: "Nicht wachsen, nicht schrumpfen, sondern sei 1.5em breit." Das ist letztendlich so ziemlich dasselbe, als wenn ich das mit "width" deklariere, aber ich benutze hier schon mal die Flex-Syntax. Damit ist die Breite der Icons festgelegt. Im nächsten Schritt wird dann die Navigation selbst gestaltet, so dass diese Menüpunkte nebeneinander stehen und responsiv sich flexibel verhalten.

CSS: Responsive Flexbox-Layouts für Profis

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 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!