Revision 257 is a pre-publication revision. (Viewing current revision instead.)

Piped Navigation Bar Links with CSS

Here's the gas! [html]<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>[/html] And use this css: [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;}[/css] Taken from this page: http://www.dillerdesign.com/css/cookbook/links_pipes_list_elements.html

Revisions

  • August 30, 2012 @ 00:26:11 [Current Revision] by PeterLugg
  • August 30, 2012 @ 00:23:53 by PeterLugg

Revision Differences

August 30, 2012 @ 00:23:53Current Revision
Content
Deleted: Added: Here's the gas!
 Added: [html]&lt;ul class=&quot;pipes&quot;&gt;
 Added: &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link 1&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt;a href=&quot;#&quot;&gt;another link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt;a href=&quot;#&quot;&gt;more links&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt;a href=&quot;#&quot;&gt;the last link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;/ul&gt;[/html]
 Added: And use this css:
 Added: [css].pipes, .pipes * {margin:0; padding:0; list-style:none; display:inline;}
 Added: .pipes {display:block; overflow:hidden; zoom:1; margin:10px;}
 Added: .pipes a {position:relative; left:-1px; float:left; padding:2px 8px; border-left:1px solid #888;}[/css]
 Added: Taken from this page: <a href="http:// www.dillerdesign.com/css/ cookbook/links_pipes_list_ elements.html" target="_blank" >http://www.dillerdesign.com/ css/cookbook/ links_pipes_ list_elements.html</a>

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: , , , , ,

No comments yet.

Leave a Reply