Breadcrumb(s) is a term used to describe hierarchical links that tell the visitor where he/she currently is on your site. Visually breadcrumbs are just links with some sort of separator between them, such as a bullet image. This CSS code transforms ordinary looking links into a breadcrumb by giving each link a background image.
There are many different ways to implement breadcrumbs in CSS. This is one; it works in all three major browsers. I will just give the style sheet, rest you can work out-
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.breadcrumb{
font: bold 12px "Lucida Grande", sans-serif;
}
.breadcrumb a{
background: transparent url(media/breadcrumb.gif) no-repeat center right;
text-decoration: none;
padding-right: 10px; /*adjust bullet image padding*/
color: red;
}
.breadcrumb a:visited, .breadcrumb a:active{
color: red;
}
.breadcrumb a:hover{
text-decoration: underline;
}
<strong>end of style sheet</strong>
Subscribe
Subscribe to RSS feed
Sponsors
