Séparateurs pour la Navigation

Question

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 suit : ol > li > a > img.

Voici deux solutions possibles :

1. Ajouter plus de balises li pour la séparation (boo!),
2. Inclure un séparateur dans l'image de chaque élément (c'est mieux, mais cela augmente la possibilité que l'utilisateur clique, par exemple, sur "Accueil", mais se retrouve sur "Services", car ils sont l'un derrière l'autre et l'utilisateur peut cliquer accidentellement sur le séparateur appartenant à "Services");

Que faire ?

Answer 1

Si vous n'avez pas besoin d'utiliser des images pour les séparateurs, vous pouvez le faire avec du pur CSS.

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

Cela place une barre entre chaque élément de liste, tout comme l'image décrite dans la question originale. Mais comme nous utilisons les sélecteurs adjacents, cela ne place pas la barre avant le premier élément. Et comme nous utilisons le sélecteur pseudo :before, cela n'en place pas à la fin.

Answer 2

Utilisez simplement l'image séparatrice en tant qu'image d'arrière-plan sur le li.

Pour le faire apparaître uniquement entre les éléments de 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
}

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 que le sélecteur adjacent (li + li) ne fonctionne pas dans IE6, donc vous devrez simplement ajouter l'image d'arrière-plan à la li conventionnelle (avec une feuille de style conditionnelle) et peut-être appliquer une marge négative à l'un des bords.

Answer 3

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

     votre contenu 

     Prochain contenu 

     dernier élément 

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 cela ne chargera aucune image. essayez simplement.. :)

Answer 4

Ajoutez le séparateur à l'arrière-plan du li et assurez-vous que le lien ne s'étend pas pour recouvrir le séparateur, ce qui signifie que le séparateur ne sera pas cliquable.

Answer 5

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

    ...

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* le padding à gauche crée un espace entre les liens */

Ensuite, je recommande un balisage différent pour l'accessibilité :
Au lieu d'incorporer les images en ligne, mettre du texte comme texte, entourer chaque texte d'un span, appliquer l'image en arrière-plan au span, et ensuite masquer le texte avec display:none -- cela offre beaucoup plus de flexibilité en matière de style, permet d'utiliser les motifs avec une image d'arrière-plan de 1px de large, économise la bande passante, et vous pouvez l'intégrer dans un sprite CSS, ce qui permet d'économiser des appels HTTP :

HTML :

    texte du lien
    ...
    texte du lien

`

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 D'accord, je vois que d'autres ont obtenu une réponse similaire avant moi -- et je remarque que John inclut également un moyen d'empêcher le séparateur de s'afficher avant le premier élément, en utilisant le sélecteur li + li -- ce qui signifie que tout li vient après un autre li.

`