Ich muss Trennzeichen zwischen Navigationselementen hinzufügen. Trennzeichen sind Bilder.
Meine HTML-Struktur ist wie folgt : ol > li > a > img
.
Hier komme ich zu zwei möglichen Lösungen:
- Um weitere
li
Tags für die Trennung hinzuzufügen (boo!), - Fügen Sie ein Trennzeichen in das Bild jedes Elements ein (dies ist besser, aber es besteht die Möglichkeit, dass der Benutzer beispielsweise auf "Startseite" klickt, aber zu "Dienste" gelangt, da diese hintereinander liegen und der Benutzer möglicherweise versehentlich auf das Trennzeichen klickt gehört zu "Services");
Was ist zu tun?
css
navigation
usability
separator
daGrevis
quelle
quelle
Antworten:
Verwenden Sie einfach das Trennbild als Hintergrundbild auf der
li
.Positionieren Sie das Bild links neben dem Listenelement
li
, nicht jedoch auf dem ersten, damit es nur zwischen Listenelementen angezeigt wird .Beispielsweise:
Dieses CSS fügt das Bild jedem Listenelement hinzu, das auf ein anderes Listenelement folgt - mit anderen Worten, alle außer dem ersten.
NB. Beachten Sie, dass der benachbarte Selektor (li + li) in IE6 nicht funktioniert. Sie müssen daher nur das Hintergrundbild zum herkömmlichen li (mit einem bedingten Stylesheet) hinzufügen und möglicherweise einen negativen Rand auf eine der Kanten anwenden.
quelle
:before
Pseudo-Selektors verhindert, dass er nach dem letzten Element angezeigt wird.border-left
um eine vertikale Linie zwischen Elementen zu zeichnen.Wenn es nicht dringend erforderlich ist, Bilder für die Trennzeichen zu verwenden, können Sie dies mit reinem CSS tun.
Dies setzt einen Balken zwischen die einzelnen Listenelemente, genau wie das Bild in der ursprünglich beschriebenen Frage. Da wir jedoch die benachbarten Selektoren verwenden , wird der Balken nicht vor dem ersten Element platziert. Und da wir den
:before
Pseudo-Selektor verwenden, wird am Ende kein Selektor gesetzt.quelle
Sie können ein
li
Element hinzufügen , in dem Sie einen Teiler hinzufügen möchtenIn CSS können Sie folgenden Code hinzufügen.
Dies erhöht die Ausführungsgeschwindigkeit, da kein Image geladen wird. teste es einfach aus .. :)
quelle
Die andere Lösung ist in Ordnung, aber es ist nicht erforderlich, das letzte Trennzeichen hinzuzufügen, wenn : after verwendet wird, oder ganz am Anfang, wenn Folgendes verwendet wird : before .
SO:
Fall: nach
Fall: vorher
quelle
Um das Trennzeichen relativ zum Menütext vertikal zu zentrieren,
quelle
Fügen Sie das Trennzeichen zum
li
Hintergrund hinzu und stellen Sie sicher, dass der Link nicht erweitert wird, um das Trennzeichen abzudecken. Dies bedeutet, dass das Trennzeichen nicht anklickbar ist.quelle
Für diejenigen, die Sass verwenden , habe ich zu diesem Zweck ein Mixin geschrieben :
Beispiel:
Welches wird Ihnen dies geben:
quelle
Ich glaube, die beste Lösung dafür ist das, was ich benutze, und das ist eine natürliche CSS-Grenze:
Möglicherweise müssen Sie sich um die Polsterung kümmern wie:
Wenn Sie nicht möchten, dass das letzte Li diese trennende Grenze hat, geben Sie dem letzten Kind "keine" in "Grenze rechts" wie folgt:
Viel Glück :)
quelle
Fügen Sie es als Hintergrund in das Listenelement ein:
Als nächstes empfehle ich ein anderes Markup für die Barrierefreiheit:
Anstatt die Bilder inline einzubetten, fügen Sie Text als Text ein, umgeben Sie jedes mit einer Spanne, wenden Sie das Bild als Hintergrund an und verbergen Sie den Text mit Anzeige: keine - dies Bietet viel mehr Flexibilität beim Styling und ermöglicht die Verwendung von Kacheln mit einem 1 Pixel breiten Hintergrundbild, spart Bandbreite und kann es in ein CSS-Sprite einbetten, das HTTP-Aufrufe spart:
HTML:
CSS:
UPDATE OK, ich sehe, dass andere eine ähnliche Antwort vor mir erhalten haben - und ich stelle fest, dass John auch ein Mittel enthält, um zu verhindern, dass das Trennzeichen vor dem ersten Element erscheint, indem der li + li-Selektor verwendet wird - was bedeutet, dass jedes li nach dem anderen kommt li.
quelle