Display Flex

Avatar Datum: 13. Juli 2016
Autor: Philip Dumas


Folgende Problemstellung:

Mobile Navigationsdarstellung in Tirol. Es soll sich die Reihenfolge der Navigationselemente im Vergleich zur Desktopvariante ändern. Desweiteren soll beim Klick auf die Lupe die Volltextsuche unter der Navigation ausklappen und die volle Bildschirmbreite benutzen. Die Navigation ist hierbei eine „ul“, die einzelnen Navigationselemente „li“s.

Weisst man dem Suchformular hier nun width:100% zu, so bezieht sich dies auf das Listenelement darüber und die Suche hängt unmotiviert in der Mitte des Screens unter der Lupe.

Lösung:

Der „ul“ wird „display:flex“ zugewiesen. Allen „li“s werden eventuell vorhandene „position“ Anweisungen genommen und es wird für die Positionierung der „li“s im css ein „order“ tag zugewiesen (order:1 order:2 etc.). Es ist darauf zu achten ,dass auch wirklich ALLE „li“s einen solchen order tag erhalten. Dann werden die Listenelemente in aufsteigender Reihenfolge anhand ihrer Order-Tags angeordnet, hat ein Element keine Order Anweisung, wird es automatisch an den anfang der Liste gestellt.

Nun kann dem Formular unter dem „li“ width:100% zugewiesen werden und es bezieht sich tatsächlich auf die „ul“.

Umgesetzt so unter tirol.at.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema User Experience & Design


http://webplatformdaily.org/

Autor: Bastian Schwarz


Technologie // Über den Tellerrand // User Experience & Design


Ich habe eine neue Seite (http://webplatformdaily.org/) entdeckt, die täglich Links zu folgenden Themen aus Twitter sammelt: Open Web Platform (including the open standards that comprise it) JavaScript (the core language and libraries written in it) web-browsers (including their development tools) front-end web-development in general open source to some degree (e.g. GitHub related content) Das Projekt …


Beitrag lesen
09.
April
2013

BookBlock – A Content Flip Plugin

Autor: Benjamin Hofmann


User Experience & Design


Dank dem Newsletter vom Smashing Magazine bin ich eben über ein sehr cooles Galerie-Plugin gestoßen, welches nicht nur mit Bildern, sondern auch mit komplexeren Strukturen umgehen kann und diese wie ein Buch blätterbar gestaltet. Das Ganze nennt sich BookBlock und kann hier genauer unter die Lupe genommen werden.


Beitrag lesen
25.
Sep.
2012

Kundenworkshop imx.Platform 3

Autor: Christine Pfleger


infomax // Strategie & Konzeption // Technologie // Tourismus // Über den Tellerrand // User Experience & Design


Kundenworkshop GUI imx.Platform 3
Kundenworkshop GUI imx.Platform 3

Am 29. Mai 2019 haben wir den "Power-Usern" unter unseren Kunden, also denjenigen, die am intensivsten mit dem infomax-Technologie-Framework imx.Platform arbeiten, in einem Workshop den aktuellen Stand der neuen imx.Platform 3 präsentiert, ihre Wünsche an Features und Usability diskutiert und diese priorisiert in eine Roadmap überführt.


Beitrag lesen
29.
Mai
2019

Eine Möglichkeit den „Flash of unstyled text“ bei Webfonts zu vermeiden

Autor: Benjamin Hofmann


User Experience & Design


Animiertes GIF, welches die Vorschau des Font style matcher in Aktion zeigt.

Es gibt nicht viele Newsletter, die ich abonniert habe. Einer davon ist aber der Newsletter vom Smashing Magazine, da die Qualität davon bisher dauerhaft sehr gut war und dessen die Inhalte nicht nur einfache Links auf die ohnehin vorhandenen Beiträge der Seite selbst darstellen, sondern immer eine sehr schöne Ergänzung zu diesen liefern und auch …


Beitrag lesen
09.
Nov.
2017