MrMurphy1: Responsive Probleme mit vertikaler ul

Beitrag lesen

Hallo

Ohne den Quelltext läßt sich dein Problem nur allgemein lösen.

Vorzeige seiten habe ich leider nicht, da es beides geschützte Vereinsseiten sind.

Das hindert dich aber nicht daran eine anonymisierte Seite bei einem Freeware-Provider wie bplaced.net bereitzustellen. In die Navigation kannst du zum Beispiel Städtenamen oder Fahrzeugmarken eintragen.

Dein CSS enthält Fehler und Angaben, die so nicht verwendet werden sollten. Das läßt vermuten, dass du dich bislang davor gedrückt hast die Grundlagen von HTML und CSS zu lernen. Das wiederum fliegt dir jetzt bei der Navigation um die Ohren.

Ein Beispiel für Fehler: Durch das Float werden die a-Elemente aus dem Dokumentenfluß genommen. Dadurch musst du dann den a-Elementen eine Breite geben, anstatt den li-Elementen. Float sollte nur verwendet werden wenn auch dessen Nebenwirkungen bekannt sind und berücksichtigt werden.

Float ist zudem dafür gedacht, das Text andere Elemente wie zum Beispiel Bilder umfließten kann. Nicht jedoch, um Elemente auszurichten. Seit der Einführung von Flexbox sollte Float nur noch für seinen eigentlichen Zweck verwendet werden. Zumal Flexbox viel weniger Nebenwirkungen hat.

Ein Beispiel für Angaben, die so nicht verwendet werden sollten: Die height- und min-height-Angaben. Die Höhe von Containern richtet sich nach deren Inhalt. Deshalb sollten height- und min-height-Angaben nur in Ausnahmefällen verwendet werden.

Ein allgemeiner Lösungsvorschlag für dein Problem:

a) Auf die unnötige Liste verzichten.

b) Zum Layout der Navigation (und im Endeffekt nicht nur der Navigation) Flexbox verwenden.

Gruss

MrMurphy