Whitespaces zwischen horizontalen li-Elementen
Für viele Layouts und Designs braucht man horizontal angeordnete Listen. Beispielsweise wenn man einen schicken Header designen will.
Das Problem dabei ist, dass Browser zwischen den li-Elementen (ListItems) meistens Whitespaces einfügen. Am Ende kann dies das geplante Layout einer Website total zerschießen. Aber woran liegt das? Machen das die Browser mit Absicht?
Die Antwort ist ganz klar: Ja, denn diese Whitespaces entstehen dadurch, dass wenn man seinen Quelltext ordentlich formatiert – das heißt alle Zeilenumbrüche, alle Tabs, etc. beibehält – interpretiert der Browser diese als Zeichen, in unserem Fall als Whitespaces.
Hier ein beispielsweise gut formatierter Quelltext für ein horizontales Menü: Wenn man sich nun das Ergebnis im Tab “Result” ansieht, stellt man fest, dass sich zwischen den li-Elementen (weiße Kästchen) Leerstellen befinden. Da dieses Verhalten aber meistens unerwünscht ist, zeige ich euch 4 Varianten, wie man die Whitespaces entfernen und die Formatierung des Queltextes dennoch beibehalten kann.
Das Auskommentieren fordert nämlich den Browser dazu auf, alles was zwischen disen Tags steht zuignorieren; in anderen Worten, die Leerstellen zwischen den li-Elementen werden einfach übersprungen.
Aber diese Methode bringt auch Nachteile mit sich. Zum einen bläht sich der Quelltext bei sehr vielen einzelnen Elementen unnötig auf, was sich auch im geringen Maße auf die Ladezeiten der Website ausüben kann. Zum anderen können sich leicht Fehler einschleichen, die die Formatierung der Website vollkommen aus dem Konzept bringen.
Diese Möglichkeit bringt uns zu genau dem selben Ergebnis, der Vorteil dabei ist allerdings, dass man nicht aus Versehen wichtige Elemente auskommentieren kann und außerdem bläht sicht der Quelltext nicht so sonderlich auf, wie in der oben genannten Methode.
Auf den ersten Blick sieht der Quelltext sauber und ordentlich aus, doch wenn die Seite komplexer wird kann man auch hier leicht den Überblick verlieren… Heißt also – nicht 100%-ig optimal.
Dieser Floatfixer dient ganz einfach dazu, die Float-Formatierung zurückzusetzen und die Höhe der Floatelemente zu stabilisieren:
An sich ist diese Methode fast perfekt… Der einzige Nachteil – man kann die Listenelemente nicht zentrieren.
Wer seine Listenelemente zentriert anordnen will, einfach die Methode #4 befolgen und der Liste das CSS-Attribut “text-align: center;” verpassen.
Der entscheidene Vorteil ist, dass man im Na̲chhinein die li-Elemente allein durch “text-align” link, zentriert oder rechts positionieren kann.
Das Problem dabei ist, dass Browser zwischen den li-Elementen (ListItems) meistens Whitespaces einfügen. Am Ende kann dies das geplante Layout einer Website total zerschießen. Aber woran liegt das? Machen das die Browser mit Absicht?
Die Antwort ist ganz klar: Ja, denn diese Whitespaces entstehen dadurch, dass wenn man seinen Quelltext ordentlich formatiert – das heißt alle Zeilenumbrüche, alle Tabs, etc. beibehält – interpretiert der Browser diese als Zeichen, in unserem Fall als Whitespaces.
Hier ein beispielsweise gut formatierter Quelltext für ein horizontales Menü: Wenn man sich nun das Ergebnis im Tab “Result” ansieht, stellt man fest, dass sich zwischen den li-Elementen (weiße Kästchen) Leerstellen befinden. Da dieses Verhalten aber meistens unerwünscht ist, zeige ich euch 4 Varianten, wie man die Whitespaces entfernen und die Formatierung des Queltextes dennoch beibehalten kann.
#1 – Auskommentieren
Eine Möglichkeit ist das Auskommentieren der Whitespaces zwischen den li-Endtags (</li>) und den li-Starttags (<li>):Das Auskommentieren fordert nämlich den Browser dazu auf, alles was zwischen disen Tags steht zuignorieren; in anderen Worten, die Leerstellen zwischen den li-Elementen werden einfach übersprungen.
Aber diese Methode bringt auch Nachteile mit sich. Zum einen bläht sich der Quelltext bei sehr vielen einzelnen Elementen unnötig auf, was sich auch im geringen Maße auf die Ladezeiten der Website ausüben kann. Zum anderen können sich leicht Fehler einschleichen, die die Formatierung der Website vollkommen aus dem Konzept bringen.
#2 – Whitespaces weglassen
Eine weitere, durch aus simplere Methode ist das einfache weblassen der Whitespaces.Diese Möglichkeit bringt uns zu genau dem selben Ergebnis, der Vorteil dabei ist allerdings, dass man nicht aus Versehen wichtige Elemente auskommentieren kann und außerdem bläht sicht der Quelltext nicht so sonderlich auf, wie in der oben genannten Methode.
Auf den ersten Blick sieht der Quelltext sauber und ordentlich aus, doch wenn die Seite komplexer wird kann man auch hier leicht den Überblick verlieren… Heißt also – nicht 100%-ig optimal.
#3 – Float-Formatierung (CSS)
Eine der besseren Möglichkeiten bietet diese CSS-Formatierung. Dabei formatieren wir die li-Elemente zu einfachen floats und fügen am Ende des ul-Elements dynamisch (:after) einen “Floatfixer” ein.Dieser Floatfixer dient ganz einfach dazu, die Float-Formatierung zurückzusetzen und die Höhe der Floatelemente zu stabilisieren:
An sich ist diese Methode fast perfekt… Der einzige Nachteil – man kann die Listenelemente nicht zentrieren.
Wer seine Listenelemente zentriert anordnen will, einfach die Methode #4 befolgen und der Liste das CSS-Attribut “text-align: center;” verpassen.
#4 – Whitespace-Größe minimieren (CSS)
Wie bereits geschrieben, wer seine li-Elemente als inline-blocks anzeigen möchte muss “font-size” des Elternelements auf 0 setzen. Dies führt logischerweise dazu, dass die Whitespaces zwischen den einzelnen Elementen zu 0 und somit nicht mehr angezeigt werden:Der entscheidene Vorteil ist, dass man im Na̲chhinein die li-Elemente allein durch “text-align” link, zentriert oder rechts positionieren kann.
