Abstand von Listenelementen

  • Ich möchte die Elemente einer Liste bündig nebeneinander anzeigen. Mit dem IE funktioniert das auch wie gewünscht. Beim FF bleibt immer eine Lücke. Hier ist Beispielcode (Valides HTML und CSS!):

    An welcher Einstellung muß ich noch schrauben? Oder hab ich den FF doch bei einem Darstellungsfehler erwischt? 8)

  • Lade doch bitte zwei Grafiken, so soll es sein - so ist es, hoch.
    Der Link zur Seite zur Verfolgung des Problems wäre auch nicht schlecht.

  • Ich hab mal ein bisschen damit rumgespielt. Wenn ich bei li float:left; eintrage, hab ich dieses Ergebnis:
    [Blockierte Grafik: http://img3.imagebanana.com/img/vfm17lil/test1.jpg]
    Wie man sieht, erscheinen die Zwischenräume abgesetzt.

    Lass ich jedoch die ganze li-zeile weg und trage float:left; stattdessen bei li a ein, erhalte ich dieses Ergebnis:
    [Blockierte Grafik: http://img3.imagebanana.com/img/2kjvnh64/test2.jpg]
    Hier habe ich einen geraden Rand.

    Die Frage ist jetzt, welches dieser Ergebnisse von Junker Jörg gewünscht ist. :wink:

    [Blockierte Grafik: http://firefox.czapura.de/gruss2.png]
    Win XP Home SP3, CPU: Pentium 4, 2,6 GHz, Dual Core, 1 GB RAM
    Mozilla/5.0 (Windows NT 5.1; rv:22.0) Gecko/20100101 Firefox/22.0
    Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20130620 Thunderbird/17.0.7
    Meine Add-Ons

  • Estartu wrote:

    Zitat

    Ich hab mal ein bisschen damit rumgespielt. Wenn ich bei li float:left; eintrage, hab ich dieses Ergebnis:
    [Blockierte Grafik: http://img3.imagebanana.com/img/vfm17lil/test1.jpg]
    Wie man sieht, erscheinen die Zwischenräume abgesetzt.

    Kann ich mit einem sauberen Profil nicht bestätigen.

  • Danke, boardraider, funktioniert. :D Manchmal kommt man nicht auf das naheliegendste. Trotzdem ist mir immer noch unklar, was das eigentlich für ein Abstand ist. Aus dem Box-Modell, soweit ich es verstanden hab, erklärt er sich jedenfalls nicht. Naja, was soll's. Solange es eine standardkonforme Lösung gibt ist die Welt in Ordnung.

    Estartu, auch Dank an dich. Natürlich ist das zweite Ergebnis gewünscht. :wink: Mit was für einem Browser ist das getestet? Schon mit boardraiders Empfehlung erhalte ich nämlich im FF 3.0.7 das gewünschte Ergebnis.

  • Zitat

    Trotzdem ist mir immer noch unklar, was das eigentlich für ein Abstand ist.

    Nach meinem Verständnis von
    http://www.w3.org/TR/html401/struct/lists.html
    ist die Darstellung von Listen vom UA abhängig.

    Zitat

    The exact presentation of the three list types depends on the user agent.

    Imho ist es auch nicht vorgesehen eine solche horizontale "Navigationsleiste" mit li-Elementen aufzuziehen. Dafür kann man sich auf div und span beschränken, die sich auch ohne Nebeneffekte dem Box-Modell unterordnen.

  • Zitat von Junker Jörg

    Danke, boardraider, funktioniert. :D Manchmal kommt man nicht auf das naheliegendste. Trotzdem ist mir immer noch unklar, was das eigentlich für ein Abstand ist. Aus dem Box-Modell, soweit ich es verstanden hab, erklärt er sich jedenfalls nicht. Naja, was soll's. Solange es eine standardkonforme Lösung gibt ist die Welt in Ordnung.

    Estartu, auch Dank an dich. Natürlich ist das zweite Ergebnis gewünscht. :wink: Mit was für einem Browser ist das getestet? Schon mit boardraiders Empfehlung erhalte ich nämlich im FF 3.0.7 das gewünschte Ergebnis.


    Das hatte ich mit der 3.1 Beta3 getestet.
    Und hier noch mal im Firefox 3.0.6 und einem cleanen Profil:
    [Blockierte Grafik: http://img3.imagebanana.com/img/ansndi/test3.jpg]
    Auch hier ist es abgesetzt.

    [Blockierte Grafik: http://firefox.czapura.de/gruss2.png]
    Win XP Home SP3, CPU: Pentium 4, 2,6 GHz, Dual Core, 1 GB RAM
    Mozilla/5.0 (Windows NT 5.1; rv:22.0) Gecko/20100101 Firefox/22.0
    Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20130620 Thunderbird/17.0.7
    Meine Add-Ons

  • Zitat von boardraider

    Windows/Linux-Unterschied?


    Kann sein. Habs jetzt unter Linux nicht getestet. Bin hier gerade mit Windows XP online.

    Edit: Hab jetzt mal das Update auf 3.0.7 gemacht. Kein Unterschied in der Darstellung. Liegt wohl tatsächlich an den unterschiedlichen Systemen.

    [Blockierte Grafik: http://firefox.czapura.de/gruss2.png]
    Win XP Home SP3, CPU: Pentium 4, 2,6 GHz, Dual Core, 1 GB RAM
    Mozilla/5.0 (Windows NT 5.1; rv:22.0) Gecko/20100101 Firefox/22.0
    Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20130620 Thunderbird/17.0.7
    Meine Add-Ons

  • Also ich nutze hier WinXP Pro SP3 und habe dasselbe Ergebnis wie boardraider. Vielleicht liegts am Windows-Theme? Nutze Windows klassisch.

    Zitat von boardraider

    Imho ist es auch nicht vorgesehen eine solche horizontale "Navigationsleiste" mit li-Elementen aufzuziehen.

    Und wozu gibt es dann die CSS-Eigenschaft display? Genau dazu, damit man etwas anders darstellen kann, als das HTML-Tag impliziert. Trennung von Inhalt und Präsentation! Eine Navigation ist für mich eine Liste von Links und wird deshalb semantisch korrekt durch eine Liste dargestellt. Viele CMS sehen es ebenso. Das bedeutet aber nicht, das ich deswegen die Listenelemente untereinander darstellen muß. Es ist ja einer der großen Vorteile von CSS, wenn die Trennung von Präsentation und Inhalt korrekt gemacht wurde, das ich nur die CSS-Dateien und evtl. einige Bilder tauschen muß, um einem Internetauftritt ein komplett anderes Ausehen zu geben, ohne eine Seite anzufassen.

  • Junker Jörg wrote:

    Zitat

    Also ich nutze hier WinXP Pro SP3 und habe dasselbe Ergebnis

    In der VM zeigt Windows XP das selbe. Hätte mich auch ansonsten stark gewundert.

    Zitat

    Eine Navigation ist für mich eine Liste von Links und wird deshalb semantisch korrekt durch eine Liste dargestellt.

    Ich sehe in einer Liste eine strukturelle Form der Informationsdarstellung innerhalb eines Textes. Diesen Wert hat eine Navigationsleiste nicht. Diese dient eben der Navigation und nicht der struktuierten Darstellung von Textinformation in einem Kontext. Allerdings ist diese Unterscheidung debattierbar und ich bezeichne deine Ansicht auch nicht als die falsche.

    Die Navigation kann man allerdings bequem über diverse neutrale Elemente definieren. Bei Listen hat man das Problem, dass man zunächst die potentiell unterschiedlichen Default-Stylesheets der verschiedenen Browser überschreiben muss.

    Zitat

    Und wozu gibt es dann die CSS-Eigenschaft display? Genau dazu, damit man etwas anders darstellen kann, als das HTML-Tag impliziert.

    Dann stellt sich für mich die Frage, warum man nicht gleich ein anderes Element verwendet. Statt also eine Liste mit CSS umzuformen, damit sie in eine horizontale Darstellung passt, kann man gleich ein div-Element mit spans füllen und hat bereits den gewünschten Effekt ohne erst eine andere Darstellung über CSS erzwingen zu müssen.

  • Hier mal ein Grund, warum ich eine Liste für die Navigation verwende:
    http://www.barrierefreies-webdesign.de/knowhow/naviga…ler-aufbau.html

    Ein andere Grund ist für mich meine Auffassung von semantischen Code. Div und Span haben für mich die gleiche Bedeutung - gleichartige Elemente werden zusammengefaßt und von andersartigen Elementen getrennt, einmal auf Block-Ebene und einmal auf Inline-Ebene. Im Falle der Navigation würden aber gleichartige Elemente durch das Span voneinander getrennt. Bei einer Liste werden gleichartige Elemente durch die Liste selbst zusammengefaßt und durch das Listenelement voneinander getrennt - genau, was gewünscht ist. Deswegen muß ich das noch lange nicht untereinander darstellen.

  • Junker Jörg wrote:

    Zitat

    Hier mal ein Grund, warum ich eine Liste für die Navigation verwende:
    http://www.barrierefreies-webdesign.de/knowhow/naviga…ler-aufbau.html


    Gutes Argument. Wenn Hilfsprogramme mit Listen umgehen können, das "Überspringen" aber bei verschachtelten divs/spans nicht funktioniert, dann ist das sicherlich vorzuziehen. Wie sich solche Programme im Detail verhalten kann ich mangels Erfahrung nicht sagen.

    Zitat

    Div und Span haben für mich die gleiche Bedeutung - gleichartige Elemente werden zusammengefaßt und von andersartigen Elementen getrennt, einmal auf Block-Ebene und einmal auf Inline-Ebene. Im Falle der Navigation würden aber gleichartige Elemente durch das Span voneinander getrennt.


    Bei einer Struktur eines umschließenden div und der Auflistung von Links innerhalb von span-Elementen bildet man 1:1 die Struktur einer unsortierten Liste (ul-li) nach. Somit trennt man "gleichartige" Elemente entweder durch li oder durch span. Macht so gesehen keinen Unterschied.
    Im oben erwähnten Kontext solcher Hilfsporgramme kann es dann aber geben und da greift dann dein Argument.

  • Ich bau Menus schon seit Jahren als Listen. Und unser Junker hat recht. Wie die Liste nach CSS-Behandlung aussieht, ist reichlich egal. Ein Menu ist eine Liste an Optionen. Immer an die Struktur denken und einfach mal CSS ausschalten. Wenn die Seite immer noch übersichtlich strukturiert ist, ist man auf einem guten Weg.

    Das das "display"-Attribut angeht... Firefox beherrscht den inline-box-Wert erst seit Firefox 3.0, aber genau das wäre für horizontale Menus quasi perfekt. Aber das macht mit älteren Browsern Probleme. Daher kommt als alternative float zum Einsatz. Bis irgendwann der letzte IE6/7 verschwunden ist und man display:table nutzen kann.....