CSS Library: Links & Buttons: Here
CSS Breadcrumbs
Author: Dynamic Drive
Breadcrumbs 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. Ideally the separator image should not even be part of the link, but dynamically inserted using CSS Generated content. However, since IE6 does not support generated content, that's not feasible at the moment. Then there's the debate over whether breadcrumbs should be implemented as a list, which I personally think is no more appropriate than just using regular <a> elements.
Demo:
The bullet image:
The CSS:
Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.
Comment Pages 1 of 4 pages 1 2 3 > Last »
.breadcrumb a{
[strike]background: transparent url(media/breadcrumb.gif) no-repeat center right;[/strike]
text-decoration: none;
[strike]padding-right: 18px; /*adjust bullet image padding*/[/strike]
color: navy;
}
.breadcrumb a:after
{
content: " » " ;
}
Or no?
http://www.webreference.com/js/scripts/breadcrumbs/
This technique could be part of your page template, and as long as you're using a fairly rational site organization (e.g. you keep images of spain in site.net/images/spain) it would be a nice feature with really very little work on the part of the developer.