CSS: Responsive Flexbox-Layouts für Profis

All Together 3: Das Card-Layout integrieren

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Zum Schluss wird das Card-Layout in den Inhaltsbereich eingefügt und nach ein paar kleinen Ausbesserungen ist die Seite fertig.

Transkript

Das Holy Grail Layout und die Navigation sind drin, was jetzt noch fehlt, ist das Card-Layout hier im Inhaltsbereich. Dazu wechsle ich rüber hier in "all-together.html", scrolle ein Stück runter und suche die <main class="main-area", den Hauptinhaltsbereich. Dort steht im Moment ein Artikel und der kann erst einmal komplett weg. Dann gehe ich in "card-layout.html" und suche dort die "section" mit der Klasse "cards", also <section class="cards" und dann weiter runter, das sind ein paar Artikel, die hier kommen. Da ist </section, kopieren und rüber in "all-together.html" und dort im Inhaltsbereich <main einfügen, <section class="cards" ist drin, in "zentrale-all-together.html", fehlt jetzt noch die Import Anweisung für das entsprechende Stylesheet und das hieß, wenn ich mich recht erinnere, "card-styles.css". So, damit haben wir alles. HTML ist drin, CSS ist drin und ab in den Browser, die Seite neu laden und schauen, es ist drin, aber es ist noch nicht ganz so, wie wir uns das vorgestellt haben. Der Header ist zu dunkel, das kommt von dem "card-styles.css". Hier ist überhaupt kein padding an der Seite und auch die Sidebar, die muss noch wieder eine andere Farbe bekommen, als der Hintergrund des Inhaltsbereiches, weil sonst sieht das gar nicht aus wie eine Sidebar. Dazu gäbe es jetzt zwei Möglichkeiten, entweder wir könnten in "card-styles.css" nachbessern oder wir erstellen schlicht und einfach ein neues Stylesheet für die "all-together"-Geschichte und bessern darin ein bisschen nach. Ich wähle den zweiten Weg: "all-together.css" So, das muss jetzt noch in der "zentrale" eingebunden werden. Da haben wir "all-together". Und dann geht es mal los mit dem Header, der hat die Klasse ".pagehead" und dann kommt der Background, etwas heller, "hsl(0, 0%, 90%)", probiere ich einmal, speichern, und rüber und neu laden. Das hat geklappt, aber jetzt sieht man, jetzt muss der Text dunkler [werden], das ist ".site-title", das kommt mal direkt hier drunter, ".site-title" und das wird einfach mal "color: black;" Und wieder rüber und kurz gucken. Damit sieht der Header soweit okay aus. Jetzt kommt das padding hier im Inhaltsbereich. Der Inhaltsbereich hat, wie eben gesehen, die Klasse ".main area" und dann gebe ich mal versuchsweise "2em" hier, bessere das einfach mal eben nach und lade das neu und es sieht zumindest in dieser Ansicht schon mal gut aus. Jetzt fehlt nur noch die Sidebar hier auf der rechten Seite und die soll weiß werden. Die Sidebar ist ein "aside" mit der Klasse ".sidebar", die soll "background:white" bekommen, damit müsste das alles soweit okay sein. Das sieht gut aus auf den ersten Blick, die Navigation funktioniert, die Sidebar springt hin und her und wird ausgeblendet und man sieht sehr schön, wie die Bilder dann die zur Verfügung stehende Fläche ausfüllen und damit ist das Layout so weit fertig. Man könnte bestimmt an einigen Stellen noch nachbessern, fertig ist das ja eigentlich sowieso nie mit einer Website, aber dieses Layout wäre so ohne Flexbox nicht möglich und Sie haben im Laufe des Trainings viele nützliche Techniken kennen gelernt und jetzt kann es eigentlich losgehen mit dem Experimentieren und dabei wünsche ich Ihnen viel Spaß mit eigenen Flexbox-Layouts.

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...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016

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!