preston-net
blog
wiki
photo
shop
news
RSS Antenna
Here is the HTML for this list:
<div id="navcontainer"> <ul id="navlist"> <li><a href="http://www.preston-net.com/" title="preston-net">preston-net</a></li> <li><a href="http://kengo.preston-net.com/" title="blog">blog</a></li> <li><a href="http://www.preston-net.com/wiki/" title="wiki">wiki</a></li> <li><a href="http://www.preston-net.com/futurephoto/index.shtml" title="photo">photo</a></li> <li><a href="http://www.preston-net.com/shopping/index.shtml" title="shop">shop</a></li> <li><a href="http://www.preston-net.com/news/rss/recent_entry.html" title="news">news</a></li> <li><a href="http://www.preston-net.com/antenna/rss/recent_entry.html" title="RSS Antenna">RSS Antenna</a></li> </ul> </div>
Here is the CSS for this list:
#navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #f5d7b4; border-left: 1px solid #f5d7b4; border-bottom: 1px solid #f5d7b4; border-right: none; padding: 0; margin: 0 0 10px 0; color: #f5d7b4; text-decoration: none; display: block; text-align: center; font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #930; background: #f5d7b4; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; }