![\"breadcrums-final\"](\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/09\/breadcrums-final.jpg\" "\\"breadcrums-final\\"")
<\/p>\n
HTML Structure<\/h4>\n
Here is our HTML code. It’s a simple unordered list:<\/p>\n
\r\n[code lang=\"htmlstrict\"]\r\n
- \r\n
- Home<\/a><\/li>\r\n
- Main Lavel<\/a><\/li>\r\n
- Sub Lavel<\/a><\/li>\r\n
- Sub sub Lavel<\/a><\/li>\r\n
- Your Current page<\/li>\r\n<\/ul>\r\n[\/code]\r\n<\/pre>\n
CSS Styling<\/h4>\n
Here is simple css styling<\/p>\n
\r\n[code lang=\"css\"]\r\nbody {\r\nfont:0.69em\/1.13em \"verdana\", arial, tahoma, sans-serif; \r\nbackground:#fff;\r\n}\r\n[\/code]\r\n<\/pre>\n\r\n[code lang=\"css\"]\r\nul, li {\r\n\tlist-style-type:none;\r\n\tpadding:0;\r\n\tmargin:0;\r\n}\r\n[\/code]\r\n<\/pre>\n\r\n[code lang=\"css\"]\r\n#breadcrumbs {\r\n\theight:2.7em;\r\n\tborder:1px solid #c9c9c9;\r\n\t}\r\n[\/code]\r\n<\/pre>\n\r\n[code lang=\"css\"]\r\n#breadcrumbs li {\r\n\tfloat:left;\r\n\tline-height:2.7em;\r\n\tcolor:#777;\r\n\tpadding-left:.85em;\r\n\t}\t\t\r\n[\/code]\r\n<\/pre>\n\r\n[code lang=\"css\"]\r\n#breadcrumbs li a {\r\n\tbackground: url(breadcrums.jpg) no-repeat right center;\r\n\tdisplay:block;\r\n\tpadding:0 15px 0 0;\r\n\t}\t\r\n[\/code]\r\n<\/pre>\nThis is the only simple right corner arrow image, which is i am using in this tutorial.<\/p>\n
![\"breadcrums\"](\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/09\/breadcrums.jpg\" "\\"breadcrums\\"")
<\/p>\n\r\n[code lang=\"css\"]\r\n#breadcrumbs li a:link,\r\n#breadcrumbs li a:visited {\r\n\tcolor:#777;\r\n\ttext-decoration:none;\r\n\t}\t\r\n[\/code]\r\n<\/pre>\n\r\n[code lang=\"css\"]\r\na:link, a:visited,\t\r\n#breadcrumbs li a:hover,\r\n#breadcrumbs li a:focus {\r\n\tcolor:#222\r\n\t}\t\r\n[\/code]\r\n<\/pre>\nFinal Result<\/h4>\n
Here is the final Result<\/p>\n
<\/p>\nConclusion<\/h4>\n
Apply these Tips to your current and next projects, and you will surely appreciate the efforts.<\/p>\n
Download the source file<\/h4>\n
If you\u2019d like to check your work, you may download the rar file for this tutorial.<\/p>\n
cssbreadcrumbs.rar<\/a> (12.1 kb)<\/p>\n
If you think that tutorial can be more better, Please share with us. Comment us<\/strong><\/p>\n
if you would like to receive more inspiration from us, please consider subscribing to our feed by RSS<\/strong><\/a> or by email<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
A few days ago I was implementing breadcrumbs in a website I\u2019m 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 … Continue reading
- Main Lavel<\/a><\/li>\r\n