Css breadcrumbs
Si vous utilisez des breadcrumbs vous aurez peut être besoin de ses quelques lignes de css, indispensable pour une bonne navigation de l’utilisateur.
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/
Loading ...
6 Responses to "Css breadcrumbs"
Mais pourquoi utiliser une liste imbriquée pour faire un fil d’Ariane ?
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
Non, c’est justement d’un point de vue sémantique que ça m’intrigue.
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.
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 ?
les p sont à utiliser pour des paragraphes et non pour des menus