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)
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.
[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
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.
Pretty basic, but I guess someone could use it. Thanks.
It’s cool. Thanks
This is so simple and nice, hehe. Thanks for the lovely tutorial.
Very nice, thanks for the share.
Nice share post … thank’s.-= FoO Iskandar´s last blog ..News: Want To Impress Your Friends? Run Chrome OS 0.4.206 =-.
very nice… thank you for this cool tutorial
.-= vikas ghodke´s last blog ..50 Wonderful Poster and Advertisment Photoshop Tutorials =-.
Very nice, thanks 🙂
Being really picky, I think it would be semantically better to use an ordered list, since breadcrumbs show the order of pages in a site. The css would be pretty much exactly the same 🙂
Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources | Theme Center
Very nice
Loved the post.
I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.
Very nice post. But how can we implement this for dynamic pages.
Very nice post. But how can we implement this for dynamic pages using master pages as well.
it is a very good bread crumb. Thanks a lot.
Pingback: 50 FRESH CSS Techniques and Tutorials from Noupe - Internal Support
Pingback: 25 CSS3 Navigation and Menu Tutorials | 1step web design: Best for developer and designer
Pingback: Twenty Advanced CSS Tutorials - SitePoint
Pingback: CSS3制作Breadcrumbs » 站群之家
Chân chữ K thiết kế chắc chắn, tận dụng
được những khoảng góc giúp cho văn phòng trở nên lớn hơn.
Hi Chris,I’ve been a member of Clixsense for many years. When I first joined, I didn’t really think it was worth it but then i started understanding how you can earn with this platform and I’ve stuck with it (even if it’s just completing a survey a day). It’s one of those earning platforms that’s been consistent, never fails to pay on time and I like using it’s advertising platform. I am focusing more on creating websites now a days but I think that Clixsense is a great site to start with when you first start looking at earning money online. Thanks for sharing!