Abstandselemente in Horizontaler Navigation

[Balduin]

Seit einiger Zeit generiert Contao in horizontalen Menüs (nav_default.html5) zwischen den li-tags immer eine Art „Abstandshalter“ der ein bischen wie ein Leerzeichen funktioniert. Der kann manchmal ganz hilfreich sein, aber manchmal nervt er auch. Kann mir jemand erklären wie das Dingen genannt und erzeugt wird und wie man es entfernen kann? Bisher habe ich dann immer die Menüelemente entweder mit float und display:block ausgerichtet oder hab den Inhalt von nav_default in eine Zeile geschrieben.
Aber es muß doch noch eine bessere Lösung geben, oder?

[mlweb]

Ich weiß leider nicht was Du meinst.
Link zur Seite mit dem Problem?

[tab]

Ich gehe davon aus, dass er den Zeilenumbruch meint, der seit geraumer Zeit beim nicht mehr (zu) agressiven Reduzieren des HTML-Codes erhalten bleibt. Das ist jedenfalls so, weil ansonsten durch das Reduzieren sich das Aussehen der Website verändern kann. Vorher: Whitespace in Form von Zeilenumbruch zwischen den li's. Nachher (früher): Alles in einer Zeile ohne Whitespace zwischen den li's. Jetzt bleibt der Zeilenumbruch erhalten und das ist auch gut so. Wer ihn bewusst nicht haben will, der muss eben selbst dafür sorgen, indem er keine Zeilenumbrüche zwischen den li's erzeugt.

[Balduin]

Hier eine Beispielseite: https://www.pflegenetzwerknord.de/

Wenn du dir den Code der Hauptnavigation (Stellenmarkt, Für Bewerber etc.) ansiehst, dann stehen die besagten Elemente immer zwischen den li-tags und erzeugen einen kleinen Abstand. Die Frage ist wie man den wegbekommt.

[Balduin]

Ich gehe davon aus, dass er den Zeilenumbruch meint, der seit geraumer Zeit beim nicht mehr (zu) agressiven Reduzieren des HTML-Codes erhalten bleibt. Das ist jedenfalls so, weil ansonsten durch das Reduzieren sich das Aussehen der Website verändern kann. Vorher: Whitespace in Form von Zeilenumbruch zwischen den li's. Nachher (früher): Alles in einer Zeile ohne Whitespace zwischen den li's. Jetzt bleibt der Zeilenumbruch erhalten und das ist auch gut so. Wer ihn bewusst nicht haben will, der muss eben selbst dafür sorgen, indem er keine Zeilenumbrüche zwischen den li's erzeugt.

OK, die Vermutung mit dem Zeilenumbruch hatte ich auch schon, weil der Abstand ja verschwindet wenn man im Template nav_default.html5 die Zeilenumbrüche rausnimmt und alles in eine Zeile schreibt. Ich frag mich halt, ob es noch einen einfacheren Weg gibt, weil ich wegen so einer Kleinigkeit nicht immer gleich ein neues nav_default.html5 anlegen möchte.

[tab]

Also ich kenne keine, was aber nicht heisst, dass es keine geben kann. Ist doch kein großes Ding mit dem zusätzlichen nav_default.html5. Einmal erstellen und überall nutzen wo es gebraucht wird. Templates kann man ja problemlos zwischen Installationen kopieren, jedenfalls sofern die Contao-Versionen (Minor) die selben sind.

[mlweb]

Also im Moment sehe ich das Problem nicht. Habe ich gerade Tomaten auf den Augen?

Insgesamt aufgefallen ist das was @tab beschrieben hat mir noch nie. Allerdings nutze ich für Navigationen auch nie inline-block. Früher habe ich alles mit float gemacht. Heute verwende ich Flexbox.

[Balduin]

Bei flexbox oder float tritt das auch nicht auf, sondern nur bei display:inline oder display:inline-block. Da gibt es dann zwischen den Menüpunkten immer einen kleinen Mindestabstand der durch das beschriebene Element ausgelöst wird.

[tab]

Das beschriebene Element ist der Zeilenumbruch im HTML-Quelltext bzw das, was der Browser und das CSS daraus macht. Einzig mir bekannte Lösung ist die von dir angewandte. Da hat Contao früher - zu deinen Gunsten - das HTML fehlerhaft reduziert. Whitespace, z.B. zwischen deinen li-Tags, wurde gnadenlos komplett gelöscht. Es darf aber nicht sein, dass durch die Reduzierung sich die Darstellung der Seite ändern kann. Wenn ich z.B. die li's im Blocksatz ausgeben lasse, macht der dazwischen rausgelöschte Whitespace eben einen gravierenden Unterschied. Die einzig korrekte Lösung ist m.E. die von dir angewandte: Wenn nach der Reduzierung kein Whitespace zwischen den li's sein soll, dann darf auch schon vor der Reduzierung da keinerlei Whitespace - also auch kein Zeilenumbruch - dazwischen sein.