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


Inhouse Hallway Testing bei infomax

Autor*in: Anna Zsófia Höfler


Strategie & Konzeption // User Experience & Design


Bei der Bereitstellung einer neuen Leistung für unsere Kunden gehörte „Testing“ bisher selbstverständlich zur Umsetzung dazu. Nach der Fertigstellung einer Umsetzung wurde die Funktionalität vom Entwickler, dem Projektmanager und vor Abnahme der Leistung auch von unseren Kunden getestet, sodass eine Qualitätssicherung durch mehrere Stufen erfolgte. Ein gerne vernachlässigter Fakt ist jedoch, dass diese Personen bereits …


Beitrag lesen
14
MAI
20

Flash stirbt, aber wie geht es weiter?

Autor*in: Axel Güldner


Technologie // User Experience & Design


Wir sind uns sicher weitestgehend einig, dass Flash am Sterben ist. Apple hat mit seiner Entscheidung, Adobes Plugin auf mobilen Geräten nicht zu unterstützen, eine Entwicklung ausgelöst, an derren Ende das Flashplugin komplett verschwinden wird. Und wir sind uns auch sicher hier wieder größtenteils einig, wenn ich behaupte, Flash werden nur wenige vermissen. Aber wie …


Beitrag lesen
23
FEB
12

Adobe kauft Figma …

Autor*in: Axel Güldner


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


… diese Nachricht hat im September die Welt der Kreativen erschüttert und Investoren der Photoshop und PDF Firma verunsichert.Zu teuer käme der 20 Mrd. Dollar Deal befinden viele und zu sehr getrieben vor der Furcht Adobes langfristig signifikante Marktanteile an die Konkurrenz zu verlieren. Nun hat Adobe eine gewisse Historie hinsichtlich der Übernahme von konkurierenden …


Beitrag lesen
19
OKT
22

Pixel Animation – Eine plattformübergreifende Disziplin

Autor*in: Carina Kruse


Über den Tellerrand   //   User Experience & Design


Während eines unserer wöchentlichen Designer Weeklys kam meine liebe Kollegin Sabrina Baumgartner mit einem kleinen Miniprojekt daher, welches sie uns stolz präsentierte. Ein Video im Pixelstil, so ähnlich wie man es von dem Spieleklassiker „Pokemon“ auch kennt. Hierbei läuft die Figur einen Gang runter, bis sie auf ein Geschenk stößt. Es folgt ein Dialog, sowie …


Beitrag lesen
09
DEZ
21