Posted By

furf on 10/27/08


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

meetneps


Pipe-Delimited Inline List


 / Published in: 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.  
  50.  
  51. <div id="footerNav">
  52. <span id="navLabel">More from furf.com</span>
  53. <ul class="inlineRuled">
  54. <li><a href="#">American Idol</a></li>
  55. <li><a href="#">2008 Emmys</a></li>
  56. <li><a href="#">2009 Oscars</a></li>
  57. <li><a href="#">Dancing With The Stars</a></li>
  58. <li><a href="#">Robert Downey Jr.</a></li>
  59. <li><a href="#">Survivor</a></li>
  60. <li><a href="#">The Dark Knight</a></li>
  61. <li><a href="#">Ausiello TV</a></li>
  62. <li><a href="#">Hell's Kitchen</a></li>
  63. <li><a href="#">America's Got Talent</a></li>
  64. <li><a href="#">2008 Fall Movie Preview</a></li>
  65. <li><a href="#">Radiohead</a></li>
  66. </ul>
  67. </div>
  68.  
  69. <div id="footerNav2">
  70. <ul class="inlineRuledRight">
  71. <li><a href="#">American Idol</a></li>
  72. <li><a href="#">2008 Emmys</a></li>
  73. <li><a href="#">2009 Oscars</a></li>
  74. <li><a href="#">Dancing With The Stars</a></li>
  75. <li><a href="#">Robert Downey Jr.</a></li>
  76. <li><a href="#">Survivor</a></li>
  77. <li><a href="#">The Dark Knight</a></li>
  78. <li><a href="#">Ausiello TV</a></li>
  79. <li><a href="#">Hell's Kitchen</a></li>
  80. <li><a href="#">America's Got Talent</a></li>
  81. <li><a href="#">2008 Fall Movie Preview</a></li>
  82. <li><a href="#">Radiohead</a></li>
  83. </ul>
  84. </div>

Report this snippet  

You need to login to post a comment.