Piped Navigation Bar Links with CSS

Here’s the gas!

<ul class="pipes">
<li><a href="#">link 1</a></li>
<li><a href="#">another link</a></li>
<li><a href="#">more links</a></li>
<li><a href="#">the last link</a></li>
</ul>

And use this css:

.pipes, .pipes * {margin:0; padding:0; list-style:none; display:inline;}
.pipes {display:block; overflow:hidden; zoom:1; margin:10px;}
.pipes a {position:relative; left:-1px; float:left; padding:2px 8px; border-left:1px solid #888;}

Taken from this page: http://www.dillerdesign.com/css/cookbook/links_pipes_list_elements.html

Revisions

Tags: , , , , ,

No comments yet.

Leave a Reply