Et revoici le tuto pour faire des onglets coulissants (comme sur le côté gauche du blog) en plus développé, mais plus simple à coder ;)
/!\ Compatible seulement avec les dernière version de Chrome, Safari et Firefox. Ne fonctionne pas avec IE. Autre navigateur non testé.
Commençons par le css:
Explications:
Modifiez les Xpx
Pour height, par la hauteur de vos onglets
Pour width, par la largeur de vos onglets
Top indique à combien de px du haut de la page sont placé les onglets
Left est une marge négative servant à masquer l'onglet. Si vos onglets font 100px en largeur, mettez environ -80px à left, pour laisser dépasser 20px.
Au survol (hover) la valeur de left indique de combien de px dépasse l'onglet. Je vous conseil de laisser à -1px.
Si vous voulez les onglets à droite, remplacez "left" par "right"
Si vous voulez les onglet en haut gauche, inversez "top" et "left"
Si vous voulez les onglets en haut à droite, remplacez "top" par "right" et "left" par "top"
Voici le css de base. Rajoutez des bordures, de la couleur ou autre pour faire quelque chose de joli ;)
Passons au HTML. Mettezr le code suivant dans un module simple de votre blog
Structure de base pour 4 onglets. Pour éviter qu'ils ne se chevauchent, il faut rajouter "stlyle="top: Xpx"" à partir du deuxièmes: Remplacez Xpx par la hauteur de l'onglet (+les marges). Pour le troisième, remplacez Xpx par la hauteur de 2 onglets (+les marges) etc...
Pour les connaisseur, je pense que je n'ai pas besoin d'en dire plus, vous aller me personnaliser tou ça ;)
Pour ceux qui ne comprenne pas grand chose, je vous propose un exemple de personnalisation. Après, vous faie comme vous voulez ;)
=> Apperçu
CSS
HTML
<div class="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
<div class="bout">Galerie</div>
<a href="#">Clique ICI</a>
</div>
Voilà sur deux onglets quelques exemple de ce que vous pouvez faire =)
Tuto d'Eklatuce plus simple pour faire un lien sur les image =)