Tabs Generator : Fabriquez vos onglets en 3 clics

Pour créer et réussir une barre d’onglets en CSS comme celle-ci :

Il vous faut :

– Une liste gérée dans votre template :

<div id="m_horizontal">     <ul> 	<li><a href="#">Accueil FT</a></li> 	<li><a href="#">Design</a></li> 	<li><a href="#">Contact</a></li>     </ul> </div>

– Un zeste de CSS :

#m_horizontal {     float:left;     width:100%; 	background:#DAE0D2 url("tab.png") no-repeat-x; 	font-family: Helvetica, sans-serif; 	font-size:93%;     line-height:normal;     } #m_horizontal ul {     margin:0; 	padding:10px 10px 0;     list-style:none;     } #m_horizontal li {     float:left;     background:url("tab.png") no-repeat left top;     margin:0;     padding:0 0 0 9px;     }  #m_horizontal a, #m_horizontal strong, #m_horizontal span {     display:block;     background:url("tab.png") no-repeat right top;     padding:5px 15px 4px 6px;     text-decoration:none;     font-weight: bold;     color: orange; }

– Une image d’onglet :

Vous n’êtes pas sans le savoir, le plus chiant à dégôter ou à fabriquer, c’est l’image ! Surtout quand on n’est pas doué avec les outils de type photoshop ou The Gimp.

Aussi, pour vous éviter les noeuds au cerveau et les longues lectures de tutoriels portant sur la gestion des outils graphiques, je vous livre le secret d’un bout de barre d’onglet réussi : Tabs Generator.

C’est une solution en 3 clics. Hauteur, largeur, couleur… clic ! Plus qu’à charger et utiliser selon le patron fourni ci-dessus.