Display Flex


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


Von Voice Search und Sprachassistenten – Auftakt für das Digital Tourism Meetup

Autor*in: Olga Ruhl


infomax // Strategie & Konzeption // User Experience & Design


Mit unserem Digital Tourism Lab möchten wir eine Plattform schaffen für den Austausch zwischen Kunden und Dienstleistern, zwischen Designern, Konzeptern und Entwicklern, zwischen Produktverantwortlichen, Projektmanagern und allen, die für Tourismus und Mobilität brennen. Gemeinsam möchten wir Lösungen entwickeln für Themen, die die Branche bewegt. Und wir möchten Erfahrungsaustausch und Wissenstransfer fördern. In diesem Rahmen haben …


Beitrag lesen
15
JUN
20

Boah, Newsticker sind doch so…. 2016

Autor*in:


Technologie // User Experience & Design


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen. Problem 1: Responsivität Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind …


Beitrag lesen
29
APR
16

Neun Impacts von der EDCH 2019

Autor*in: Christine Pfleger


Strategie & Konzeption   //   Über den Tellerrand   //   User Experience & Design


EDCH 2019
EDCH 2019

Am 15. und 16.3.2019 habe ich die EDCH 2019 in München besucht. Mich erwarteten zwei Tage, randvoll gepackt mit Vorträgen rund um Visual Storytelling, Editorial Design und Digital Content.


Beitrag lesen
20
MRZ
19

CSS Selectors and Pseudo Selectors and browser support

Autor*in: Benjamin Hofmann


Technologie // User Experience & Design


Eben bin ich auf eine interessante Seite zum Thema Selektoren in CSS gestoßen, die sehr übersichtlich auflistet was geht und was nicht und vor allem in welchen Browsern dies der Fall ist. Leider ist die Seite nicht mehr ganz aktuell, aber für einen schnellen Überblick sollte sie allemal ausreichen. Und mit etwas Glück kommt auch …


Beitrag lesen
17
FEB
12