Coding Architecture

よくつかわれているパンくずリストです。Simple scalable CSS based breadcrumbs | Veerle's blogのサイトを見て、なんとなく気になったので。

demo

■CSS
ul, li {
list-style-type:none;
padding:0;
margin:0;
}		
#topicPath {
height:2.3em;
border:1px solid #dedede;
}
#topicPath li {
float:left;
line-height:2.3em;
color:#777;
padding-left:.75em;
}		
#topicPath li a {
background:url(common/images/topicpath_bg01.gif) no-repeat right center;
display:block;
padding:0 15px 0 0;
}


■HTML
<ul id="topicPath">
<li><a href="#">Home</a></li>
<li><a href="#">works</a></li>
<li>テスト</li>
</ul>