Simple scalable CSS based breadcrumbs


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /* Simple scalable breadcrumb by Veerle Pieters
  2. ------------------------------------------------------------------*/
  3. body {
  4. font:71%/165% "Lucida Grande", Lucida, Verdana, sans-serif;
  5. }
  6. ul, li {
  7. list-style-type:none;
  8. padding:0;
  9. margin:0;
  10. }
  11. #crumbs {
  12. height:2.3em;
  13. border:1px solid #dedede;
  14. }
  15. #crumbs li {
  16. float:left;
  17. line-height:2.3em;
  18. color:#777;
  19. padding-left:.75em;
  20. }
  21. #crumbs li a {
  22. background:url(images/crumbs.gif) no-repeat right center;
  23. display:block;
  24. padding:0 15px 0 0;
  25. }
  26. #crumbs li a:link,
  27. #crumbs li a:visited {
  28. color:#777;
  29. text-decoration:none;
  30. }
  31. a:link, a:visited,
  32. #crumbs li a:hover,
  33. #crumbs li a:focus {
  34. color:#dd2c0d;
  35. }
  36.  
  37. <ul id="crumbs">
  38. <li><a href="#">Home</a></li>
  39. <li><a href="#">Main section</a></li>
  40. <li><a href="#">Sub section</a></li>
  41. <li><a href="#">Sub sub section</a></li>
  42. <li>The page you are on right now</li>
  43. </ul>

URL: http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.