Advanced Search

Simple scalable CSS based breadcrumbs

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

Expand | Embed | Plain Text

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.