I am currently working on a site with breadcrumbs, but I'm not using either JavaScript or server-side code to create them, I just put them in as they are.
Here is how I'm doing it:
I have a slash that is an image file for the breadcrumbs and it is placed between all items in an area defined in the header. Here's how I define things:
/* breadcrumbs --------------------------------------------------------*/
#header #breadcrumbs{
bottom: 11px;
left: 30px;
font-style: italic;
color: #999;
font-size: 10px;
}
#header #breadcrumbs a{
color: #bfbdbd;
text-decoration: none;
background: url("../img/breadcrumb-slash.png") no-repeat top right;
padding-right: 14px;
}
Now, for the HTML:
<!-- Breadcrumb-->
<div id="breadcrumbs">
<a title="Home" href="index.html">Home</a>
<a title="Home" href="personal.html">Personal</a>
</div>
<!-- ENDS Breadcrumb-->
Someone clicking on any of the links above will go to the page specified.
