-
Nos Offres
-
Archives
- février 2010 (4)
- janvier 2010 (9)
- décembre 2009 (11)
- novembre 2009 (4)
- octobre 2009 (7)
-
Liens
-
Meta
Météo Niort
Vendredi, 30 Juillet 2010
Fair
Courant: 19˚C
Estimation: 19˚ C
Haute: 21˚, Basse: 16˚
weather feed courtesy of weather.com - thanks!
-
Prestataire
ProgOnline
Onglets en CSS
Un petit source pour vos sites Web.
Un onglet uniquement en CSS.
Source HTML:
<html>
<head>
<title>Onglet CSS</title>
<link rel="stylesheet" type="text/css" href="./css/onglet.css" media="all" title="onglets style"/>
</head>
<body>
<div id="toolbar-onglets">
<ul>
<li><a href="#">Acceuil</a></li>
<li id="current"><a href="#">Info</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Source CSS:
#toolbar-onglets {
float:left;
width:100%;
background:#DAE0D2 url(../img/onglet-bg.gif) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#toolbar-onglets ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#toolbar-onglets li {
float:left;
background:url(../img/onglet-left.gif) no-repeat left top;
margin:0;
padding:0 4px 0 9px;
}
#toolbar-onglets a {
float:left;
display:block;
background:url(../img/onglet-right.gif) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#toolbar-onglets a {float:none;}
/* End IE5-Mac hack */
#toolbar-onglets a:hover {
color:#333;
}
#toolbar-onglets #current {
background-image:url(../img/onglet-left-current.gif);
border-width:0;
}
#toolbar-onglets #current a {
background-image:url(../img/onglet-right-current.gif);
color:#333;
padding-bottom:5px;
}
et sans oublier les images pour effectuer la mise en œuvre, pour modifier l’apparence
il vous suffit de définir vos propres images et modifier le CSS à votre convenance.
