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


Einschränkung für Video AutoPlay ab Chrome 66

Autor: Stefan Oswald


Technologie // User Experience & Design


Seit der Verteilung von Chrome Version 66 tritt das Problem auf, dass Videos plötzlich nicht mehr von alleine starten, obwohl Autoplay vorgesehen und auch richtig konfiguriert ist. Besonders unpraktisch ist das für Bewegtbilder-Keyvisuals. Die Debug-Konsole liefert dabei folgenden Hinweis: Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD …


Beitrag lesen
07.
Mai
2018

Bilder SEO – Bisher eigentlich komplett vernachlässigt

Autor: Axel Güldner


Technologie // User Experience & Design


Heute möchte ich ein Thema anschneiden, welches bisher wohl so niemand auf dem Schirm hatte (ich zumindest habe bisher keinen Gedanken daran verschwendet). Aber als ich dann in einem anderen Blog darüber gelesen habe, hat mich dann sofort die Faust der Erkenntnis getroffen, ähnlich einer Brockhaus-Enzyklopädie, die einem ins Gesicht fällt. Wir bemühen uns immer …


Beitrag lesen
07.
Februar
2012

JavaScript, HTML5 & Angular Days 2016

Autor: Benedikt Keller


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


Einige von uns Portalentwicklern waren im Oktober in Berlin auf den JavaScript, HTML5 & Angular Days 2016. Hier nachträglich noch kurz meine und Bennis Highlights: „Dem Benedikt seine Highlights“ CSS3 Flexbox Der Style „display: flex;“ ist ein unglaublich flexibles und simples Werkzeug, um Responsivität in die kleinsten Module zu bringen. Wo wir heute noch mit Style-Hacks arbeiten, …


Beitrag lesen
28.
Nov.
2016