Séparateurs pour la navigation

J'ai besoin d'ajouter des séparateurs entre les éléments de navigation. Les séparateurs sont des images.

Ma structure HTML est comme: ol > li > a > img.

J'arrive ici à deux solutions possibles:

1. Pour ajouter plus de libalises pour la séparation (boo!),
2. Inclure le séparateur dans l'image de chaque élément (c'est mieux, mais cela permet à l'utilisateur de cliquer sur, par exemple, "Accueil", mais d'accéder à "Services", car ils sont l'un derrière l'autre et l'utilisateur peut accidentellement cliquer sur le séparateur qui appartient aux "Services");

Que faire?

Utilisez simplement l'image de séparation comme image d'arrière-plan sur le li.

Pour qu'elle n'apparaisse qu'entre les éléments de la liste, positionnez l'image à gauche du li, mais pas sur le premier.

Par exemple:

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

Ce CSS ajoute l'image à chaque élément de liste qui suit un autre élément de liste - en d'autres termes tous sauf le premier.

NB. Soyez conscient du sélecteur adjacent (li + li) ne fonctionne pas dans IE6, vous devrez donc simplement ajouter l'image d'arrière-plan au li conventionnel (avec une feuille de style conditionnelle) et peut-être appliquer une marge négative à l'un des bords.

S'il n'y a pas un besoin pressant d'utiliser des images pour les séparateurs, vous pouvez le faire avec du CSS pur.

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

Cela place une barre entre chaque élément de la liste, tout comme l'image de la question d'origine décrite. Mais puisque nous utilisons les sélecteurs adjacents , cela ne place pas la barre avant le premier élément. Et puisque nous utilisons le :beforepseudo-sélecteur, il n'en met pas un à la fin.

Vous pouvez ajouter un liélément où vous souhaitez ajouter un séparateur

<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>

En CSS, vous pouvez ajouter le code suivant.

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

Cela augmentera votre vitesse d'exécution car il ne chargera aucune image. testez-le simplement .. :)

L'autre solution est OK, mais il n'est pas nécessaire d'ajouter un séparateur à la toute dernière si vous utilisez : after ou au tout début si vous utilisez : before .

ALORS:

cas: après

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

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

cas: avant

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

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

Pour obtenir le séparateur centré verticalement par rapport au texte du menu,

.menustyle li + li:before

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

Ajoutez le séparateur à l' liarrière - plan et assurez-vous que le lien ne se développe pas pour couvrir le séparateur, ce qui signifie que le séparateur ne sera pas cliquable.

Pour ceux qui utilisent Sass , j'ai écrit un mixin à cet effet:

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

Exemple:

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

Ce qui vous donnera ceci:

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

Je pense que la meilleure solution pour cela, c'est ce que j'utilise, et c'est une frontière css naturelle:

border-right:1px solid;

Vous devrez peut-être prendre soin du rembourrage comme:

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

Enfin, si vous ne voulez pas que le dernier li ait cette frontière séparée, donnez-lui le dernier enfant "none" dans "border-right" comme ceci:

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

Bonne chance :)

Mettez-le en arrière-plan sur l'élément de liste:

<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 */

Ensuite, je recommande un balisage différent pour l'accessibilité:
plutôt que d'incorporer les images en ligne, mettez du texte sous forme de texte, entourez chacune d'elles avec une étendue, appliquez l'image en arrière-plan le, puis masquez le texte avec affichage: aucun - ceci donne beaucoup plus de flexibilité de style, et vous permet d'utiliser le carrelage avec une image bg de 1px de large, économise de la bande passante et vous pouvez l'intégrer dans un sprite CSS, ce qui enregistre les appels HTTP:

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;}

MISE À JOUR OK, je vois que d'autres ont obtenu une réponse similaire avant moi - et je note que John inclut également un moyen pour empêcher le séparateur d'apparaître avant le premier élément, en utilisant le sélecteur li + li - ce qui signifie que tout li vient après un autre li.