Advanced Search

Pipe-Delimited Inline List

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css" media="screen">
  2.  
  3.   body { font:12px/12px arial,helvetica,sans-serif; }
  4.  
  5.   a { text-decoration:none; }
  6.   a:hover { text-decoration:underline; }
  7.  
  8.   ul.inlineRuled {
  9.     list-style:none;
  10.     margin:0;
  11.     padding:0;
  12.     overflow:hidden;
  13.     _display:inline-block;
  14.   }
  15.  
  16.   ul.inlineRuled li {
  17.     float:left;
  18.     padding:0 2em 0 1em;      /* padding-right = 2 x padding-left */
  19.     margin-left:-1em;         /* margin-left = -1 x padding-left */
  20.     border-left:1px solid #ccc;
  21.     white-space: nowrap;
  22.   }
  23.  
  24.   ul.inlineRuledRight {
  25.     list-style:none;
  26.     margin:0;
  27.     padding:0;
  28.     overflow:hidden;
  29.     _display:inline-block;
  30.   }
  31.  
  32.   ul.inlineRuledRight li {
  33.     float:right;
  34.     padding:0 1em 0 2em;      /* padding-right = 2 x padding-left */
  35.     margin-right:-1em;         /* margin-left = -1 x padding-left */
  36.     border-right:1px solid #ccc;
  37.     white-space: nowrap;
  38.   }
  39.  
  40.   /* Decoration */
  41.   #footerNav { font-weight:bold; }
  42.   #footerNav #navLabel { float:left; text-transform:uppercase; width:160px; }
  43.   #footerNav ul.inlineRuled li { margin-bottom:3px; } /* used to increase the line-height without increasing the pipe height */
  44.   #footerNav ul.inlineRuled { margin-bottom:-3px; } /* removes the last bump for better vertical-alignment */
  45.  
  46.   #footerNav2 { font-weight:bold; }
  47.   #footerNav2 ul.inlineRuled li { margin-bottom:3px; } /* used to increase the line-height without increasing the pipe height */
  48.   #footerNav2 ul.inlineRuled { margin-bottom:-3px; } /* removes the last bump for better vertical-alignment */
  49. </style>
  50.  
  51.  
  52. <div id="footerNav">
  53.   <span id="navLabel">More from furf.com</span>
  54.   <ul class="inlineRuled">
  55.     <li><a href="#">American Idol</a></li>
  56.     <li><a href="#">2008 Emmys</a></li>
  57.     <li><a href="#">2009 Oscars</a></li>
  58.     <li><a href="#">Dancing With The Stars</a></li>
  59.     <li><a href="#">Robert Downey Jr.</a></li>
  60.     <li><a href="#">Survivor</a></li>
  61.     <li><a href="#">The Dark Knight</a></li>
  62.     <li><a href="#">Ausiello TV</a></li>
  63.     <li><a href="#">Hell's Kitchen</a></li>
  64.     <li><a href="#">America's Got Talent</a></li>
  65.     <li><a href="#">2008 Fall Movie Preview</a></li>
  66.     <li><a href="#">Radiohead</a></li>
  67.   </ul>
  68. </div>
  69.  
  70. <div id="footerNav2">
  71.   <ul class="inlineRuledRight">
  72.     <li><a href="#">American Idol</a></li>
  73.     <li><a href="#">2008 Emmys</a></li>
  74.     <li><a href="#">2009 Oscars</a></li>
  75.     <li><a href="#">Dancing With The Stars</a></li>
  76.     <li><a href="#">Robert Downey Jr.</a></li>
  77.     <li><a href="#">Survivor</a></li>
  78.     <li><a href="#">The Dark Knight</a></li>
  79.     <li><a href="#">Ausiello TV</a></li>
  80.     <li><a href="#">Hell's Kitchen</a></li>
  81.     <li><a href="#">America's Got Talent</a></li>
  82.     <li><a href="#">2008 Fall Movie Preview</a></li>
  83.     <li><a href="#">Radiohead</a></li>
  84.   </ul>
  85. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.