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.
Wie können wir Schülerinnen und Schüler für die Informatik begeistern – und ihnen spannende berufliche…
Was ist AR,MR,VR und XR? Und wie ist es selber in der virtuellen Welt zu…
Vergangene Woche fand unser jährliches Netzwerk-Event der imx.Daten-und Serviceplattform statt. So viel sei vorab gesagt…
imx.Platform-Kunden nutzen bereits seit einigen Jahren Services aus dem Bereich der Künstlichen Intelligenz (KI), wenn…
Wie geht man am besten an einen Blogbeitrag über den Jahresauftakt #imxkickoff2024 des infomax-Teams vergangene…
Phil, Stefan und Vroni berichten vom Tag der Ausbildung in Traunstein, der größten Bildungsmesse in…