Tabs Generator : Fabriquez vos onglets en 3 clics

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

Barre onglets

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 : tab

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.

tabs generator

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

Giskette

Geekette coquette avec un chat et un gros défaut... mes parents : je m'appelle Gisèle

3 réponses

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*