Posted By

PeteW on 09/08/09


Tagged

css navigation breadcrumb


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

PeteW
jitendraweb
silentbob84
WinterCrow
kubaitis


CSS Breadcrumb Markup


 / Published in: CSS
 

Nice clean, and semantically correct breadcrumb XHTML accompanied by the CSS.

Create a transparent GIF of the symbol '>' and save it in /img/gt.gif. This will be used for older browsers that don't support the :after pseudo element.

  1. <style type="text/css">
  2. #breadcrumbs li {
  3. display: inline;
  4. }
  5.  
  6. /* CSS3 breadcrumb */
  7. #breadcrumbs li:after {
  8. content: " > ";
  9. }
  10.  
  11. #breadcrumbs li.current:after {
  12. content: "";
  13. }
  14.  
  15. /* IE6 breadcrumb */
  16. *html #breadcrumbs li {
  17. background: url( /img/gt.gif ) no-repeat center right;
  18. padding-right: 10px;
  19. margin-right: 5px;
  20. }
  21.  
  22. *html #breadcrumbs li.current {
  23. background: none;
  24. padding-right: 0px;
  25. }
  26.  
  27. /* IE7 breadcrumb */
  28. html>body #breadcrumbs li {
  29. *background: url( /img/gt.gif ) no-repeat center right;
  30. *padding-right: 10px;
  31. *margin-right: 5px;
  32. }
  33.  
  34. html>body #breadcrumbs li.current {
  35. background: none;
  36. padding-right: 0px;
  37. }
  38. </style>
  39.  
  40. <ol id="breadcrumbs">
  41. <li><a href="/">Home</a></li>
  42. <li><a href="/lorum">Lorum</a></li>
  43. <li class="current">Ipsum</li>
  44. </ol>

Report this snippet  

You need to login to post a comment.