it-swarm.com.de

Trennzeichen für die Navigation

Ich muss Trennzeichen zwischen Navigationselementen einfügen. Trennzeichen sind Bilder.

Separators between elements.

Meine HTML-Struktur ist wie folgt: ol> li> a> img.

Hier komme ich zu zwei möglichen Lösungen:

  1. Hinzufügen weiterer li Tags zur Trennung (boo!),
  2. Beziehen Sie das Trennzeichen in das Bild jedes Elements ein (dies ist besser, aber es gibt die Möglichkeit, dass der Benutzer auf "Home" klickt, aber zu "Services" gelangt, weil sie hintereinander liegen und der Benutzer versehentlich auf das Trennzeichen klickt gehört zu "Services");

Was ist zu tun?

106
daGrevis

Verwenden Sie einfach das Trennbild als Hintergrundbild auf dem li.

Positionieren Sie das Bild links vom li, aber nicht auf dem ersten, damit es nur zwischen Listenelementen angezeigt wird.

Beispielsweise:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Dieses CSS fügt das Bild jedem Listenelement hinzu, das auf ein anderes Listenelement folgt - mit anderen Worten, allen bis auf das erste.

NB. Beachten Sie, dass benachbarter Selektor (li + li) in IE6 nicht funktioniert. Sie müssen also nur das Hintergrundbild zum konventionellen li (mit einem bedingten Stylesheet) hinzufügen und möglicherweise einen negativen Rand anwenden zu einer der Kanten.

63
ajcw

Wenn die Verwendung von Bildern für die Separatoren nicht unbedingt erforderlich ist, können Sie dies mit reinem CSS tun.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Dies setzt einen Balken zwischen die einzelnen Listenelemente, genau wie das Bild in der ursprünglichen Frage beschrieben. Da wir jedoch benachbarte Selektoren verwenden, wird der Balken nicht vor das erste Element gesetzt. Und da wir den Pseudo-Selektor :before Verwenden, setzt er keinen am Ende.

127
jrue

Die andere Lösung ist in Ordnung, bei Verwendung von : after oder bei Verwendung von : before am Anfang muss jedoch kein Trennzeichen hinzugefügt werden.

SO:

fall: nach

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

fall: vor

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}
3
T04435

Um das Trennzeichen relativ zum Menütext vertikal zu zentrieren,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }
3
user7149870

Für diejenigen, die Sass verwenden, habe ich zu diesem Zweck ein mixin geschrieben:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Beispiel:

@include addSeparator('li', '|', 1em);

Welches wird Ihnen dies geben:

li+li:before {
  content: "|";
  padding: 0 1em;
}
2
d4nyll

Sie können ein li -Element hinzufügen, in das Sie einen Teiler einfügen möchten

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

In CSS können Sie folgenden Code hinzufügen.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Dies erhöht die Ausführungsgeschwindigkeit, da kein Bild geladen wird. teste es einfach aus .. :)

2
Rajiv Pingale

Fügen Sie das Trennzeichen zum Hintergrund li hinzu und stellen Sie sicher, dass der Link nicht erweitert wird, um das Trennzeichen zu verdecken. Dies bedeutet, dass das Trennzeichen nicht angeklickt werden kann.

2
Soufiane Hassou

Fügen Sie es als Hintergrund für das Listenelement ein:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

Als nächstes empfehle ich ein anderes Markup für die Barrierefreiheit:
Anstatt die Bilder inline einzubetten, fügen Sie Text als Text ein, umschließen Sie sie mit einem Rahmen, wenden Sie das Bild als Hintergrund an und blenden Sie den Text dann mit der Anzeige aus: keine - dies bietet viel mehr Flexibilität beim Stylen , und ermöglicht die Verwendung von Kacheln mit einem 1px breiten Hintergrundbild, spart Bandbreite und kann in ein CSS-Sprite eingebettet werden, das HTTP-Aufrufe speichert:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE OK, ich sehe, dass andere vor mir eine ähnliche Antwort erhalten haben - und ich stelle fest, dass John auch ein Mittel einschließt, um zu verhindern, dass das Trennzeichen vor dem ersten Element erscheint , mit dem li + li-Selektor - was bedeutet, dass ein li nach einem anderen li kommt.

1
Faust

Ich glaube, die beste Lösung dafür ist, was ich benutze, und das ist eine natürliche CSS-Grenze:

border-right:1px solid;

Möglicherweise müssen Sie sich um die Polsterung kümmern:

padding-left: 5px;
padding-right: 5px;

Wenn Sie nicht möchten, dass das letzte Li diese separate Grenze hat, geben Sie als letztes Kind "none" in "border-right" ein:

li:last-child{
  border-right:none;
}

Viel Glück :)

1
Avi