kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Flexbox


Responsive Sticky Footer

Wenn der Inhalt einer Website kürzer ist als der Viewport hoch ist, kommt es häufig zu der Fehldarstellung. Es entsteht ein Freiraum unter der Fußzeile, da diese sich an der Länge des Inhalts orientiert. Mit Hilfe eines sog. »Sticky Footers« wird die Fußzeile immer am Ende der Seite bzw. am unteren Ende des Viewports positioniert. In diesem Beitrag zeigen wir verschieden Lösungen.

Beitrag zu Ende lesen

Flexbox: Mehrspaltige Liste von Boxen mit vertikal zentrierten Inhalten

Vertikales Zentrieren einerseits und gleich hohe Elemente andererseits stellten Webdesigner lange Zeit vor große Herausforderungen. Dank Flexbox gehört dies mittlerweile der Vergangenheit an. In diesem Beitrag archivieren wir ein häufig benötigtes Flexbox-Pattern in dem einige Teaser-Boxen mehrspaltig nebeneinander angezeigt werden sollen, sobald ausreichend Platz vorhanden ist. Innerhalb der einzelnen Box befindet sich in Icon und beschreibender Text unterschiedlicher Länge. Das Icon soll immer vertikal in der Mitte des Textes positioniert werden. Mit zwei verschachtelten Flexboxen kein großes Problem.

Beitrag zu Ende lesen

Text mit CSS vertikal zentrieren

Texte auf einer Website horizontal zu zentrieren sollte für die meisten Webdesigner kein Problem darstellen. Auch wie gefloatete und absolut positionierte Elemente horizontal zentriert werden können haben wir bereits in einem Beitrag erklärt. Eine vertikale Zentrierung von Texten kann da schon etwas komplizierter sein. In diesem Artikel erklären wir euch, wie ihr mit wenigen CSS-Angaben zum Ziel kommt und ansprechende gestalterische Ergebnisse erzielt. Insbesondere im Responsive Webdesign kann diese Technik von Vorteil sein.

Beitrag zu Ende lesen

Prozess- / Fortschritts-Navigation mit CSS

Bei der Gestaltung von Prozess- bzw. Check-Out-Navigationen wird häufig auf Grafiken zurückgegriffen, um das gewünschte Aussehen zu erreichen.
In diesem Beitrag zeigen wir euch eine Lösung, wie ihr eine solche Navigation mit reinem CSS und ganz ohne Grafiken realisieren könnt. Wir gehen dabei auf eine Lösung mit floatenden Elementen und auf eine Lösung mit dem CSS Flexbox-Modell ein.

Beitrag zu Ende lesen

Content Choreography für responsive Websites

In der Smartphone-Ansicht einer Website werden die Inhalte i. d. R. »gestapelt«. Alle Elemente werden linear untereinander angeordnet und die Reihenfolge der einzelnen Bereiche (z.B. Header, Hauptnavigation und Inhaltsbereich) entspricht der Reihenfolge der Elemente im HTML-Dokument.
Da dieses Verhalten bei komplexeren Projekten schnell zu Schwierigkeiten führen kann, sucht die Webdesign-Community nach Lösungen um die Reihenfolge bei Bedarf verändern zu können. Das Stichwort lautet »Content Choreography«.

Beitrag zu Ende lesen