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

Die ganze Karte als Link

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Damit die gesamte Karte anklickbar ist und beim "Hovern" der definierte Schatten erscheint, wird auch die Karte selbst zum Flex-Container befördert.

Transkript

Das reponsive Card-Layout hier sieht eigentlich schon ganz gut aus, es gibt nur noch ein kleines Problem, auf das ich Sie eben hinweisen möchte und zwar, wenn man hier mit der Maus über eine lange Karte fährt, dann ist die gesamte Karte hier ein Link. Das ist wie im HTML gezeigt. Ich zeige es noch einmal. Das ist wie im HTML vorgegeben. Hier sehen Sie, innerhalb der Karte ist der Link, der alles ausfüllt und da drin sitzen die Graphik und der Text. Das ist hier bei den hohen Karten der Fall, aber bei den etwas kürzeren Karten hier, mit weniger Inhalt... Naja, die Karten sind gleich lang, aber bei dem etwas kürzeren Inhalt hier fällt auf, dass wenn ich nach unten gehe, plötzlich der Link weg ist. Das heißt also: Hier wird gelinkt. Hier wird nicht gelinkt. Das hat Konsequenzen, denn das liegt daran, dass hier der Hyperlink nicht die gesamte Karte ausfüllt und so sieht man hier z. B. den eigentlich definierten Box-Shadow nicht. Hier ist ein "box-shadow" in "card-styles.css" definiert. Etwas weiter oben, da ist er "card a:hover" "box-shadow: 3px 3px 8px" und hier so ein Grauton und der ist gar nicht zu sehen. Die Lösung ist simpel, denn im Grunde genommen müssen wir hier nur dafür sorgen, dass der Hyperlink, also das <a-Element, den gesamten zur Verfügung stehenden Platz ausfüllt. Das ist nun das Standardverhalten von Flex-Items. Also gehe ich hier rüber in das CSS und sage hier, wenn die Flexbox aktiv wird, also ab "min-width: 40em", dann suche ich mir die Card hier, article ".card" und dem sage ich: Du bist jetzt auch eine Flexbox. Ich lasse mal eine Zeile leer, damit man das sieht. "display: flex" und damit sind alle Probleme behoben, auch wenn man das glaubt oder nicht, denn jetzt werden die Hyperlinks innerhalb der Karte zu Flex-Items und Flex-Items stretchen vertikal und horizontal. So... einmal hier neu laden. Hier hat sich optisch erst einmal nichts verändert, aber wenn ich jetzt mir der Maus hier über die Links fahre, dann sieht man hier den Schatten im Hintergrund erscheinen, den "box-shadow". Und wenn ich jetzt nach unten fahre, bleibt es ein Hyperlink. Das heißt also, alle Probleme beseitigt mit einer einzigen CSS-Anweisung "display: flex" für die Karten. Für die höhere "@media"-query gilt das natürlich auch und auf kleineren Viewports hier, weniger Breiten auf schmaleren Viewports, passiert nichts.

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!