• Article Written 
  • on 26.09.2009
  •  at 07:03 AM
  •  by admin

How to Create Nice Scalable CSS Based Breadcrumbs

A few days ago I was implementing breadcrumbs in a website I’m working on. breadcrumbs are not using often but most of the corporate websites are using breadcrumbs. In this tutorial i will learn you how to create nice scalable CSS Based Breadcrumbs. I am using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.

Final Preview

This is what we gone do today. Download file (12.1 kb)

breadcrums-final

HTML Structure

Here is our HTML code. It’s a simple unordered list:

[code lang="htmlstrict"]

[/code]

CSS Styling

Here is simple css styling

[code lang="css"]
body {
font:0.69em/1.13em "verdana", arial, tahoma, sans-serif; 
background:#fff;
}
[/code]
[code lang="css"]
ul, li {
	list-style-type:none;
	padding:0;
	margin:0;
}
[/code]
[code lang="css"]
#breadcrumbs {
	height:2.7em;
	border:1px solid #c9c9c9;
	}
[/code]
[code lang="css"]
#breadcrumbs li {
	float:left;
	line-height:2.7em;
	color:#777;
	padding-left:.85em;
	}		
[/code]
[code lang="css"]
#breadcrumbs li a {
	background: url(breadcrums.jpg) no-repeat right center;
	display:block;
	padding:0 15px 0 0;
	}	
[/code]

This is the only simple right corner arrow image, which is i am using in this tutorial.

breadcrums

[code lang="css"]
#breadcrumbs li a:link,
#breadcrumbs li a:visited {
	color:#777;
	text-decoration:none;
	}	
[/code]
[code lang="css"]
a:link, a:visited,	
#breadcrumbs li a:hover,
#breadcrumbs li a:focus {
	color:#222
	}	
[/code]

Final Result

Here is the final Result

breadcrums-final

Conclusion

Apply these Tips to your current and next projects, and you will surely appreciate the efforts.

Download the source file

If you’d like to check your work, you may download the rar file for this tutorial.

cssbreadcrumbs.rar (12.1 kb)

If you think that tutorial can be more better, Please share with us. Comment us

if you would like to receive more inspiration from us, please consider subscribing to our feed by RSS or by email.

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,