title: Facebook Style YUI Tabs
body: <p>Does anyone know how to style YUI Tabview component [1] so it will look like Facebook tabs [2]?</p>
  
  <p>I am using YUI 2. A very crude attempt is below (I modified the example code given in Devtacular [3]). But it does not handle the spacing between the tabs, nor the outer lines around the selected tab.</p>
  
  <ol>
  <li><a href="http://developer.yahoo.com/yui/tabview/" rel="nofollow noreferrer">http://developer.yahoo.com/yui/tabview/</a></li>
  <li><a href="http://dl.dropbox.com/u/121472/facebook_tab.jpg" rel="nofollow noreferrer">http://dl.dropbox.com/u/121472/facebook_tab.jpg</a></li>
  <li><a href="http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/" rel="nofollow noreferrer">http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/</a></li>
  </ol>
  
  <p>Thanks!</p>
  
  <hr>
  
  <pre><code>.yui-navset .yui-nav a {
      padding: 8px;
      background-color: #d8dfea;
      color: #3b5998;
      font-weight: bold;
      font-size: 12px;
      float: left;
      margin-right: 4px;
      text-decoration: none;
      cursor: hand;
  }
  .yui-navset .yui-nav a:hover {
      background-color: #3b5998;
      color: #ffffff;
      text-decoration: none;
  }
  .yui-navset .yui-nav .selected a {
      background-color: #ffffff;
      color: #333333;
      text-decoration: none;
  }
  </code></pre>