Css breadcrumbs

tb-breadcrumbs1Si vous utilisez des breadcrumbs vous aurez peut être besoin de ses quelques lignes de css, indispensable pour une bonne navigation de l’utilisateur.

css-breadcrumds

Pour l’essentiel voici le CSS compressé :

#crumbs{height:2.3em;border:1px solid #dedede;margin:20px;}
#crumbs li{float:left;line-height:2.3em;color:#777;padding-left:.75em;}
#crumbs li a{background:url(crumbs.gif) no-repeat right center;display:block;padding:0 15px 0 0;}
#crumbs li a:link,#crumbs li a:visited{color:#777;text-decoration:none;}
a:link,a:visited,#crumbs li a:hover,#crumbs li a:focus{color:#dd2c0d;}

Et le Html

<ul id="crumbs">
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Sous-Catégoire</a></li>
<li><a href="#">Sous-Catégoire Section</a></li>
<li>Vous êtes ici</li>
</ul>

voilà tout simplement,
mais comme un exemple vaut plus que mille mots, voici l’exemple

Télécharger la démo (.rar 3.06 ko)
Détails : http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/

8 commentaires
  1. tetue 8 années ago

    Mais pourquoi utiliser une liste imbriquée pour faire un fil d’Ariane ?

  2. Auteur
    Admin 8 années ago

    Tout simplement parce que d’un point de vue sémantique une suite de liens doit être utilisée dans une liste non-ordonnée,
    maintenant rien ne vous empêche de faire autrement et de passer la validation W3C qui ne s’occupe pas de sémantique

  3. tetue 8 années ago

    Non, c’est justement d’un point de vue sémantique que ça m’intrigue.

  4. Auteur
    Admin 8 années ago

    Les éléments UL ont été créés pour des listes (items) ou groupe de listes, les breadcrumbs étant des listes de liens comme une barre de navigation il est plus sémantique d’utiliser les listes imbriquées pour cela.

  5. tetue 8 années ago

    Une ligne (p) de liens correctement espacés (de >) me semble sémantiquement correcte et très satisfaisante… Y a-t-il une doc de référence sur le sujet ?

  6. Auteur
    Admin 8 années ago

    les p sont à utiliser pour des paragraphes et non pour des menus

  7. cougar 7 années ago

    intéressant, j’étudie ça pour mon wordpress en ce moment

  8. tetue 7 années ago

    Quitte à utiliser une liste, celle-ci devrait être imbriquée pour refléter le niveau dans l’arborescence du site.

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

4 + vingt =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?