Tutoriel : Réaliser un fil d’ariane avancé en css

Les fils d’ariane aussi appelés breadcrumbs en anglais sont utilisés pour faciliter la navigation sur un site web. Aujourd’hui nous allons voir comment utiliser la puissance des CSS couplé au xhtml pour ajouter un peu d’esthétisme à cet élément favorisant l’ergonomie d’un site.

Le but de ce tutoriel est d’arriver à créer un fil d’ariane constitué d’images et qui s’adapte au contenu (technique des sliding-door ou portes-coulissantes).

Démonstration

Screenshot breadcrumbs

Vous pouvez dès maintenant télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS.

Une version de démo est visible sur cette page : Démo : fil d’ariane avancé en css.

Explications

Pour réaliser notre fil d’ariane nous allons nous servir des balises html <ul> et <li> et nous allons y placer des images de fond.

L’important ici c’est de repérer les ensembles d’éléments. Ici il y en a trois :

  • Le premier élément de la liste : l’image de fond est différente des autres
  • Tous les éléments de la liste sauf le premier et le dernier : l’image de fond est identique à chaque fois
  • Le dernier élément de la liste : ne contient pas de lien

Un petit schéma pour mieux comprendre la construction html de notre fil d’ariane :

Construction HTML

Pour chaque élément de la liste il y a trois images. Puisque les « multiple-backgrounds » n’en sont encore qu’à leur début en CSS3, il faudra se contenter d’une seule image de fond par élément html. Il faut donc nécessairement 2 éléments html en plus du <li>. J’ai utilisé les balises <a> et <span>.

Puisque le dernier élément de la liste n’est pas cliquable, j’utiliserai deux balises <span> côte à côte.

Construction css

Venons-en au cœur du problème à savoir le code…

Le code html




Le code CSS


/*Largeur du div englobant*/
#breadcrumb{width:500px;}

/*Reset sur les éléments de la liste*/
#breadcrumb ul, #breadcrumb li {
list-style-type:none;
margin:0;
padding:0;
}	

/*Style de la liste*/	
#breadcrumb ul{
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
margin:10px auto;
padding:10px;
}	

/*Premier élément de la liste*/
#breadcrumb li.first {
background:url(../images/first-left.png) 0 0 no-repeat;
height:33px;
}

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}	

/*Style de élément central : a (pour tous les éléments sauf le dernier) et span(pour dernier élément de la liste)*/
#breadcrumb li a, #breadcrumb li span {
float:left;
background:url(../images/bg-gradient.jpg) 0 0 repeat-x;
height:33px;
margin:0;
padding:0 0 0 5px;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.02em;
}	

/*Style du span.end pour image de droite*/
#breadcrumb li span.end {
float:left;
background:url(../images/general-right.png) 0 0 no-repeat;
width:15px;
height:33px;
}							

Quelques explications complémentaires…




Ce div englobant peut vous permettre d’éviter les soucis d’interprétation du modèle de boite par les différents navigateurs… Ainsi vous pouvez donner une largeur au div#breadcrumb et donner les valeurs de padding/margin à votre liste ul. Aucun de ces deux éléments ne couple width+margin+padding. En codant ainsi, vous ne rencontrerez aucune différence de rendu entre navigateurs.


/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}

Ici on place l’image de fond située sur la partie gauche des <li> principaux. Pour ne pas que le contenu empiète sur l’image de fond, on donne un padding-left de la même largeur que l’image de fond soit 13px.

Pour centrer verticalement le contenu d’un élément de type « inline » on utilise la formule : height = line-height.

Compatibilité IE6…

J’ai volontairement utilisé des images transparentes en png pour cet exemple puisque les navigateurs sont maintenant capables de très bien gérer ce format. Cependant, le format png n’est pas pris en compte par IE6 et cet exemple ne fonctionnera donc pas vraiment sur ce navigateur.

Pour ceux qui sont pour le progrès, laissez tombez ce qui va suivre…

Pour ceux qui sont souhaitent encore optimiser leur contenu web pour les utilisateurs d’IE6, voici 3 solutions pour gérer correctement la transparence du format png sur ce navigateur :

Vous trouverez une solution qui fonctionne parfaitement en allant voir de ce côté : IE PNG Alpha Fix v2.0 Alpha 4.

Vous pouvez aussi utiliser des images en gif en plus de vos images png et faire en sorte qu’elles ne soient prisent en compte que pour IE6 grâce à la propriété : «!important». Je vous renvoie à l’article de Gopal Raju sur son blog ProductiveDreams : IE CSS hack without using any hacks!

La troisième et dernière solution consiste à utiliser les filtres Alphaimageloader. Elle est à bannir si vous voulez passer la validation du W3C mais s’avère être tout à fait fonctionnelle. Pour plus d’infos à ce sujet je vous renvoie à l’article d’Alsacreations : Obtenir la transparence PNG avec Internet Explorer 6.

Conclusion

Cet article touche à sa fin ! N’hésitez pas à me faire des retours. J’ai essayé de trouver un moyen fonctionnel pour arriver à mes fins mais il y a peut-être mieux ?! Pour finir je vous donne les deux liens de téléchargement et de démonstration :

Télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS. Le contenu du zip est visible sur cette page : Démo : fil d’ariane avancé en css.

Quelques liens pour finir :

16 réflexions au sujet de « Tutoriel : Réaliser un fil d’ariane avancé en css »

  1. Very detailed and nicely explained tutorial, I dont know which language you written in .. but google translated it very well !!
    thank you so much for these efforts !! :)

  2. DesignFollow : thanks ;)
    Blazouf : Merci du compliment, cela dit, il n’y a pas vraiment de maitrise puisque rien n’est trop compliqué dans cet article. Quant à l’aspect « pédagogique », j’ai essayé de faire « au plus simple » histoire de ne pas perdre les lecteurs.
    Content que l’article t’ai plu !
    v-render : Hi ! It’s in french ! Thanks for your feedback !
    If the google translation is fine I would maybe add a google translation feature ?!

  3. Ping : Vent des blogs #53 | Fredzone

  4. Sympa comme article :)

    J’aurai peut être utilisé la technique des « Portes coulissantes CSS » (http://www.pompage.net/pompe/portescoulissantes/) pour se dispenser d’utiliser un span qui n’apporte pas grand chose niveau sémantique.

    Sympa aussi le design, pour info j’ai trouvé l’adresse ici : http://net.tutsplus.com/articles/web-roundups/color-inspiration-wonderful-uses-of-beige/
    .-= Dernier blog de Antoine : Partager votre clavier et votre souris entre Mac OS et Windows avec Synergy =-.

  5. Bonjour !

    Vraiment super tuto qui va bien me servir pour un petit site en création mais…
    Suis vraiment novice : où changer la couleur des liens ?
    Où mettre par exemple :

    a:link
    {color: #xxx;
    text-decoration: none;
    background-color: transparent }
    a:visited
    { color: #xxx;
    text-decoration: none;
    background-color: transparent }
    a:hover
    { color: #xxx;
    text-decoration: underline;
    background-color: transparent }
    a:active
    { color: #xxx;
    text-decoration: underline;
    background-color: transparent };

    Je vous remercie beaucoup de m’aider !

  6. @Kiwi Salut,
    la couleur des liens se change au niveau du code CSS.
    Tu peux donc inclure ton code directement dans le fichier css avant ou après ma partie peu importe.

    Les couleurs se changent aux endroits où tu as placé des XX, tu remplace par des codes hexadécimaux (ex : #000000 pour du noir) ou RGB (ex : rgb(127,127,127) pour du gris).

    Pour cibler de façon spécifique les liens du breadcrumb et seulement du breadcrumb, tu peux préfixer tes déclarations par #breadcrumb.

    exemple :

    #breadcrumb a:link{color: #000000;text-decoration: none;}

    et tu préfixe ainsi toutes les déclarations réservées aux styles appliqués sur les liens du breadcrumb.

    Voilà j’espère avoir été assez clair, bon courage en tous cas et merci pour tes encouragements :)

  7. Désolée de revenir à la charge… je n’arrive pas à changer la couleur du dernier span…

    C’est quand même bien ça, non ?
    #breadcrumb li span.end {color:#fff;}

    Merci…

  8. @msh tout à fait. Je rappelle que cet article à 4ans, à l’époque c’était encore viable mais 4 ans dans le monde du web c’est une éternité.

  9. @Aure : merci justement d’avoir laissé cet article malgré les années. Dans le cas d’un site qui doit respecter une compatibilité avec les vieux navigateurs ne supportant pas CSS3, ça reste toujours d’actualité.
    Dernier article de Tony : Obtenir des liensMy Profile

Laisser un commentaire

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

CommentLuv badge