Onglets YUI Facebook Style

Question

Est-ce que quelqu'un sait comment styliser le composant YUI Tabview [1] pour qu'il ressemble à des onglets Facebook [2]? J'utilise YUI 2. Une tentative très grossière est ci-dessous (j'ai modifié l'exemple de code donné dans Devtacular [3]). Mais il ne gère pas l'espacement entre les onglets, ni les lignes extérieures autour de l'onglet sélectionné.

1. http://developer.yahoo.com/yui/tabview/
2. http://dl.dropbox.com/u/121472/facebook_tab.jpg
3. http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/

Merci!

---

.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; 
} 

Answer 1

J'ai fini avec le CSS suivant. C'est une adaptation de la documentation de YUI avec des essais et des erreurs, peut contenir des erreurs CSS très stupides mais les onglets ressemble à des onglets FB.

/* .yui-navset defaults to .yui-navset-top */ 
.yui-navset .yui-nav, 
.yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */ 
    border-color: #d8dfea; 
    border-style:solid;/* #2647a0; /* color between tab list and content */ 
    border-width:0 0 1px 0; 
    Xposition:relative; 
    zoom:1; 
    padding-left: 4px; 
} 

.yui-navset .yui-nav li, 
.yui-navset .yui-navset-top .yui-nav li { 
    margin:0 0.16em 0 0; /* space between tabs */ 
    padding: 0px; 
    zoom:1; 
} 

.yui-navset .yui-nav .selected, 
.yui-navset .yui-navset-top .yui-nav .selected { 
    margin:0 0.16em -1px 0; /* for overlap */ 
} 

.yui-navset .yui-nav a, 
.yui-navset .yui-navset-top .yui-nav a { 
    background-color:#d8dfea; 
    border:solid #a3a3a3; 
    border-width: 0px; /*top right bottom left*/ 
    color:#3b5998; 
    text-decoration:none; 
    padding: 4px 8px; 
} 

.yui-navset .yui-nav a em, 
.yui-navset .yui-navset-top .yui-nav a em { 
    border:solid #a3a3a3; 
    border-width:1px 0 0; 
    cursor:hand; 
    padding:0.25em .75em; 
    left:0; right: 0; bottom: 0; /* protect from other orientations */ 
    top:-1px; /* for 1px rounded corners */ 
    position:relative; 

} 

.yui-navset .yui-nav .selected a, 
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ 
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */ 
    background-color: #ffffff; 
    color: #333333; 
    text-decoration: none; 
    border-width: 1px 1px 0px 1px; 
    border-style: solid; 
    border-color: #d8dfea; 
} 

.yui-navset .yui-nav a:hover, 
.yui-navset .yui-nav a:focus { 
    background-color: #3b5998; 
    color: #ffffff; 
    text-decoration: none; 
} 

.yui-navset .yui-nav .selected a { 
    padding: 8px 8px; /* raise selected tab */ 
} 

.yui-navset .yui-nav .selected a, 
.yui-navset .yui-nav .selected a em { 
    border-color: #d8dfea; 
    /*border-color:#243356; /* selected tab border color */ 
} 

.yui-navset .yui-content { 
    background-color: #ffffff;/*#edf5ff;/*#D8DFEA;/*#edf5ff; /* content background color */ 
} 

.yui-navset .yui-content, 
.yui-navset .yui-navset-top .yui-content { 
    /*border:0px solid #808080; /* content border */ 
    padding:0.25em 0.5em; /* content padding */ 
    border-bottom-width: 1px; 
    border-bottom-color: #d8dfea; 
    border-bottom-style: solid; 
} 

.yui-navset .yui-content h2 { 
    background-color: #ffffff; /*#edf5ff;*/ 
}