Display Flex

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


Flash stirbt, aber wie geht es weiter?

Autor: 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.
Februar
2012

Responsive Webdesign – Was hat das mit mir zu tun?

Autor: Axel Güldner


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


Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist. Jeder …


Beitrag lesen
18.
Januar
2012

font-face rendering Problem

Autor: Steven Schöning


User Experience & Design


Vielen ist bestimmt bekannt, dass Schriftarten auf Mac oder iOS anders dargestellt werden. Hier gab es einen Interessanten Beitrag, der sich mit dem Problem befasst und es einfach löst. Ihr müsst einfach diesen Styling hinzufügen: -webkit-font-smoothing: antialiased; Laut der Quelle ist es nicht möglich den Styling Global auf den body zu setzen, doch anscheinend ist …


Beitrag lesen
24.
August
2016

Boah, Newsticker sind doch so…. 2016

Autor: Benedikt Keller


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.
April
2016