Navigation als Liste mit Trennlinien semantisch korrekt

[cgu]

Guten Morgen Zusammen,

Kurze Frage zum logischen und sauberen Aufbau einer Navigationsliste:

Aus logischer sicht sollte eine Navigation so gut wie immer eine HTML-Liste sein. Gut, das stellt soweit kein Problem dar. Wie sieht es aus, wenn ich zwischen den einzelnen, vertikal verlaufenden Navigationspunkten horizontale Trennlinien haben möchte? Wie sollte man das semantisch korrekt schreiben?

Lösung A:
Macht man in jedem <LI> - Element nach dem Navigationspunkt ein <BR />und fügt dann das Bild bzw das <HR> ein?

Lösung B:
Gibt man jeder Trennlinie ein eigenes <LI> - Element? (halte ich ja eher für unwahrscheinlich)

Lösung C:
Lässt man die Liste in diesem Fall komplett weg?

Lösung D:
Andere Lösung.


Vielleicht könnt ihr mir helfen.

Beste Grüße und vielen Dank im Voraus.


Florian

[schnuppel]

Hallo,

#navlist li {
list-style: none;margin: 0;padding: 0.25em;border-top: 1px solid gray;
}

Gruß

Schnuppel

[Eyecatcher]

Guten Morgen,

ich würds ähnlich wie schnuppel auch mit einem Rand(Border) lösen.
Einfach jedem Navigationselement einen unteren Rand geben, und dem letzten gar keinen, fänd ich zumindest die sauberste Formatierungsmethode.

Habs mal fix ausgeteste, siehe Anhang...

[cgu]

Danke für eure Antworten, ihr beiden.

Prinzipiell intelligente Lösung. Ich habe jetzt nur das Problem, dass ich ein Aufzählungsteichen haben möchte (kleines Bild eines speziellen Pfeiles). Diese Grafik kann ich ja, soweit ich das bislang gelesen habe, bei einer Liste auch als Aufzählungszeichen definieren.

Wenn ich jetzt aber ein Aufzählungszeichen definiere (unabhängig, ob eine Grafik oder einfach nur einen Kreis), geht die Linie nicht bis unter das Aufzählungszeichen, sondern beginnt erst unter dem Text (rot gestrichelte Linie).

Beispiel:

[Eyecatcher]

Versuchs mal so, das du den Abstand zwischen dem Zeichen und dem Text auf 0 setzt, das geht auf jeden Fall irgendwie, also das der Text quasi über dem Zeichen liegt. Dann sollte ja auch der Border dementsprechend weit gehen. Nun setzt du noch per manuellem Leerzeichen, GIF- Grafik oder per Padding- Attribut (sofern das anspricht) den Abstand zum Bild wieder größer...

[cgu]

Also mein Hauptproblem wurde gelöst. Ich habe jetzt mit border-bottom gearbeitet. Klappt gut. Zumindest in meinem ersten Tests.

Das Problem mit der Linie, die zu kurz ist, ist noch nicht gelöst. Jedoch ist das nicht weiter tragisch. Kann auch momentan leider keine weitere Zeit in das Problem investieren (zumindest für dieses Projekt). Generell wäre eine Lösung aber schon interessant, wenn euch also noch etwas einfällt ... immer her damit!

Momentan sieht es so aus, und das ist ein guter Kompromiss: