css - attribute - img title




Séparateurs pour la navigation (6)

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 .

Ici, je viens à deux solutions possibles:

  1. Pour ajouter plus de tags li pour la séparation (boo!),
  2. Inclure séparateur dans l'image de chaque élément (c'est mieux, mais il est possible que l'utilisateur peut cliquer sur, par exemple, "Accueil", mais obtenir "Services", car ils sont l'un derrière l'autre et l'utilisateur peut accidentellement cliquer sur séparateur appartient à "Services");

Que faire?


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


Je crois que la meilleure solution pour cela, c'est ce que j'utilise, et c'est une bordure css naturelle:

border-right:1px solid;

Vous pourriez avoir besoin de prendre soin de rembourrage comme:

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

Enfin, si vous ne voulez pas que le dernier li ait cette frontière séparatrice, donnez à last-child "none" dans "border-right" comme ceci:

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

Bonne chance :)


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

<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, placez le texte sous forme de texte, entourez chacune d'une portée, appliquez l'image comme arrière-plan et puis massez le texte avec l'affichage: none - cela donne beaucoup plus de flexibilité de style et vous permet de utilisez le pavage avec une image bg large 1px, économisez de la bande passante et vous pouvez l'intégrer dans une image-objet CSS, 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 eu une réponse similaire avant moi - et je note que John inclut également un moyen d'empêcher le séparateur d'apparaître avant le premier élément, en utilisant le sélecteur li + li - ce qui signifie que li vient après l'autre li.


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

.menustyle li + li:before

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

S'il n'y a pas un besoin urgent 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 met une barre entre chaque élément de la liste, tout comme l'image dans la question d'origine décrite. Mais puisque nous utilisons les sélecteurs adjacents , il ne met pas la barre avant le premier élément. Et puisque nous utilisons le :before pseudo-sélecteur :before , il n'en met pas un à la fin.


Vous pouvez ajouter un élément li où vous voulez ajouter un diviseur

<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. il suffit de le tester .. :)





separator