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

Social-Media-Leiste gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Social-Media-Leiste enthält Links zu Ihren Profilen. Die entsprechenden Symbole werden automatisch ausgewählt und ein Screenreader liest den entsprechenden Text vor.

Transkript

Die Gestaltung der Social-Media-Leiste per Flexbox ist relativ unspektakulär. Man setzt die Liste auf "display: flex" und richtet anschließend mit "justify-content" die Icons innerhalb des Flex-Containers aus. Hier möchte ich Ihnen jetzt in erster Linie zeigen, wie die Symbole dargestellt werden und wie sie automatisch ausgewählt werden. Im HTML ziehen Sie im <head einen Link zu "Font Awesome", damit die Icons auch dargestellt werden können und hier ist das Menü, die Social-Media-Leiste. <nav id="social-menu" class="social-menu menu" Die Basisgestaltung wie immer über die Klasse "menu" aus "nav-base.css". Und hier gibt es dann einen Link zu diversen Social-Media-Diensten und in dem Link steht ein bisschen Text, hier könnte natürlich auch mehr Text stehen, da kann stehen, "Folgen Sie mir auf Twitter", "Der Link zu meinem Facebook-Profil" oder irgendwas anderes, denn der Text wird sowieso versteckt, es wird nur das entsprechende Symbol für den Dienst dargestellt. Hier bei den Adressen, bei den URLs, würde in einer realen Applikation hier natürlich noch Ihr Profil dahinter stehen, hier für Testzwecke reicht die Basis-URL des Dienstes. So, wie funktioniert das jetzt? Erstens, haben wir hier die URL, dann haben wir hier zweitens, das <span mit der Klasse "screen-reader-text", und diese beiden Komponenten kommen zusammen. Wir beginnen hier mit der Klasse "screen-reader-text", die wird definiert in "accessibility.css" und hat eigentlich nur die Aufgabe den Text am Bildschirm zu verstecken und für Screenreader zugänglich zu machen. "display: none" funktioniert natürlich leider nicht, weil damit lesen Screenreader den ja auch nicht vor. Diese Technik, da gibt es viele, viele verschiedene Möglichkeiten, diese hier gezeigte Technik basiert auf einer Diskussion auf github.com zur HTML5-Boilerplate, wird versteckt und dann trotzdem von Screenreadern vorgelesen. In "nav-social.css" wird die Technik zur Darstellung der Icons definiert. Das heißt, zuerst wird hier ein Basis-Icon definiert, '/f08e', das ist das für externe Links. Falls also kein Dienst gefunden wird, in der Liste hier, dann wird dieses Icon genommen. So, jetzt wird hier mit Attributselektoren gearbeitet, denn in "nav-social.css" hier, da gibt es keine Klassen, die irgendwie sagen, "Okay, nimm mal das Symbol für Twitter oder Facebook oder irgendwas", sondern das wird hier automatisch mit Attributselektoren gemacht. Das geht so, dass man hier sagt, "href" ist ein Attribut in einem Hyperlink und wenn in diesem Attribut irgendwo diese Buchstaben drin vorkommen, dann nimm dieses Icon. Die Icons stammen von "fontawesome.io/icons" und dann kann man eben suchen, "external link" hatte ich eben angesprochen und da ist er schon, wenn ich den anklicke, dann sehen Sie gleich hier "f08e" und entsprechend kann man hier alle anderen Dienste raussuchen, das "f08e" wird dann hier im CSS gebraucht. In dieser Liste tragen Sie alle relevanten Dienste ein, die vorkommen können. und dann wird im HTML automatisch der entsprechende Dienst ausgewählt. So, kommen wir zur Gestaltung per Flexbox, das ist relativ einfach hier. Wir wählen einfach das <nav-Element mit der Klasse "social-menu", da drin die Liste, und bei der Liste kommt einfach "display: flex;". Ich mache mal ein bisschen Platz hier unten drunter. "flex-wrap" nehmen wir mal dazu, "flex-wrap: wrap;" falls ein Umbruch erfolgen soll, und "justified-content" zur Ausrichtung und dann nehmen wir mal "flex-end" damit die dann horizontal rechtsbündig ausgerichtet werden. So, das ist alles per Flexbox hier, rüber in den Browser auf die richtige Seite, neu laden und da ist unsere Social-Media-Leiste.

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!