Menüpunkte gleichmäßig über die gesamte Breite verteilen - Guru 2.0
Menüpunkte gleichmäßig über die gesamte Breite verteilen

Menüpunkte gleichmäßig über die gesamte Breite verteilen

Zaubern mit CSS!

Zaubern mit CSS!

Wir kennen eigentlich alle das Problem, die Navigation ist quer am oberen Bildschirmrand und jeder Punkt hat seine eigene Breite. Nun sollen die Elemente gleichmäßig verteilt werden: Das erste linksbündig, das letzte rechtsbündig und dazwischen alle mit einem gleichmäßigen Abstand. Ach ja und das ganze soll noch mit allen Bildschirmbreiten funktionieren, ist doch eh selbstverständlich.

Das zu schaffen ist gar nicht so schwer. Wir nehmen klassisches HTML und einen kleinen CSS-Trick und schon funktioniert alles wie wir es uns vorstellen.

Die Navigation in HTML

Index mit gleichmäßig verteilten Buchstaben als Navigation

Index mit gleichmäßig verteilten Buchstaben als Navigation

Das wir dir Navigation als unsortierte Liste mit ul/li-Elementen ausführen werden nicht extra besprechen. Manches ist im Webdesign ja so was von klar. Schauen wir mal mein Beispiel an. Ich hätte gerne so eine Art Index, jeden Buchstaben des Alphabets und mit Klick darauf springt man zum passenden Bereich auf der Seite. Und das soll sich so super schön gleichmäßig verteilen. Ich habe dir das im Bild rechts dargestellt.

So oben siehst du wie der Markup für die HTML-Datei aussieht. Es wird dich nichts überraschen, aber auf eine Kleinigkeit musst du aufpassen. Nach jedem li-Element kommt ein Leerzeichen und auch im letzten li-Element ist eines reingeschrieben. Ohne diese ganzen Leerzeichen klappt der css-Trick nicht. Und dieser kommt hier.

Zaubern mit CSS

Der einfach Gedanke ist, dass wir den Blocksatz in CSS mit der text-align-Eigenschaft benutzen. Und genau das stellen wir im ersten Styling ein. Wenn du dir aber deine Seite im Browser ansiehst wird nichts passieren. Warum klappt es nicht?
Ganz klar! Der Blocksatz funktioniert nur bei Text und dann auch nur bei mehrzeiligem Text. Ist es nur eine Zeile oder auch in der letzten Zeile wird kein Blocksatz angewendet. Daher ist es auch bei uns noch nicht so hübsch.

Jetzt bringen wir mal allen li-Elementen bei, dass sie sich ähnlich wie Buchstaben verhalten und nicht wie üblich Blockelemente sind. Dazu nutzen wir die display-Eigenschaft und verändern den Standard.

Jetzt stehen zwar alle Elemente hübsch nebeneinander, aber eben ohne Abstand, denn der Blocksatz klappt ja erst ab zweizeiligen Text. Jetzt könnten wir einfach mit einem br-element umbrechen, aber das ist einfach kein passender MarkUp. Daher haben wir ja am Ende der Liste in spezielles Element mit der ID line angefügt. Diese nutzen wir jetzt für die zweite Zeile. Wir stellen die padding-left-Eigenschaft einfach auf 100%, also die gesamte Seitenbreite. Daher wird dieses Element sicher in die zweite Zeile gestellt und für alle anderen li-Elemente der Blocksatz angewendet.

Du siehst, es ist gar nicht so schwierig diese Art der Navigation hinzukriegen. Hast du noch eine Frage? Dann schau mal da unten ist die Möglichkeit für einen Kommentar!

Es wurden 2 Kommentare zu diesem Beitrag geschrieben.

  • Michael Ritsch

    Interessante Taktik Clemens. Wenn ich vor dieser Aufgabe stehen würde hätte ich es sicher erstmal mit einer Tabelle oder per Jquery lösen versucht. So ist es natürlich schöner. Wobei das mit den Leerzeichen hinter den “li”s auch etwas häßlich ist. Aber solang es den W3C Validator nicht stört könnt ich damit leben. lg von nem ehemaligen Mediendesign HTLer

    • Guru 2.0 Autor

      Wobei meine Taktik zumindest nicht von JavaScript abhängig ist. Klar die Leerzeichen sind nicht super elegant, aber es klappt.
      LG von einem ehemaligen Mediendesign Lehrer

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.