Tableau à onglets
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Tableau à onglets
Bonjour,
J'ai commencé à travailler sur un système d'onglet, mon seul soucis est que je n'arrive pas à supprimer l'espace entre ces onglets. J'aimerai qu'ils se place les uns en dessous des autres, sans autant d'espace.
Rendu actuel : https://2img.net/h/oi42.tinypic.com/2cr63ck.png
Code html :
Code CSS :
Merci d'avance pour votre aide ! :3
J'ai commencé à travailler sur un système d'onglet, mon seul soucis est que je n'arrive pas à supprimer l'espace entre ces onglets. J'aimerai qu'ils se place les uns en dessous des autres, sans autant d'espace.
Rendu actuel : https://2img.net/h/oi42.tinypic.com/2cr63ck.png
Code html :
- Code:
<div class="tabs-onglets">
<a href="#premier_onglet">Akya</a>
<a href="#deuxieme_onglet">Nim's</a>
<a href="#troisieme_onglet">Yaourt</a>
</div>
<div id="contenu">
<div id="premier_onglet">
<h1>Description Akya</h1>
</div>
<div id="deuxieme_onglet">
<h1>Description Nim's</h1>
</div>
<div id="troisieme_onglet">
<h1>Description Yaourt</h1>
</div>
</div>
Code CSS :
- Code:
#tabs {
width: 350px;
height: 250px;
box-shadow: 0 0 10px #95b5cd;
overflow: auto;
}
.tabs-onglets {
background: #cccac8;
margin-top: 36px;
padding: 5px;
float: left;
width: 85px;
height: 240px;
}
.tabs-onglets.right { float: right }
.tabs-onglets a { display: block;
background: #654d40;
color: #fff;
text-decoration: none;
padding: 0 10px;
height: 30px;
line-height: 30px;
margin-right: -5px;
margin-left: -5px;
}
.tabs-onglets .selected, .tabs-onglets a:hover {
background: #fff;
color: #654d40;
margin-right: -5px;
margin-left: -5px;
}
.tabs-onglets.right .selected, .tabs-onglets.right a:hover {
margin-right: 0;
margin-right: -5px;
margin-left: -5px;
}
#contenu { background: #fff;
padding: 10px;
height: 230px;
overflow: auto;
width: 500px;}
#contenu h1 { margin-top: 0 }
Merci d'avance pour votre aide ! :3
Dernière édition par Cali93110 le Lun 13 Jan 2014 - 19:27, édité 1 fois
Re: Tableau à onglets
Je me permets une relance. Merci !
Re: Tableau à onglets
Je pense qu'il manque le JS dans le premier post, pour qu'on puisse tester.
Pourrais tu éventuellement donner le lien vers ton essai pour que l'on puisse voir directement ?
Pourrais tu éventuellement donner le lien vers ton essai pour que l'on puisse voir directement ?
Re: Tableau à onglets
Voici le JS :
Et le lien d'où se trouve le tableau en question : http://huntress-lgdc.forumactif.org/t22-staff
Encore merci.
- Code:
/**
* Système d'onglets automatisé
* Version : 1.0
* Par Emmanuel "Manumanu" B.
**/
$(document).ready(function() {
var ongletActuel = null;
ongletActuel = $('.tabs-onglets a:first').attr('href');
// Ajout de classe au premier onglet
$('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');
// Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
$(ongletActuel).show().siblings().hide();
// Gestion de l'événement clic
$('.tabs-onglets a').click(function(e) {
idOnglet = $(this).attr('href');
// Si l'élément est déjà sélectionné, ne rien faire
if (idOnglet == ongletActuel)
e.preventDefault();
else {
// Afficher le contenu demandé et masquer le contenu restant
$(idOnglet).fadeIn().siblings().hide();
// Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
$(this).addClass('selected').siblings().removeClass('selected');
ongletActuel = idOnglet;
}
// Empêche le déclenchement du lien
e.preventDefault();
});
});
Et le lien d'où se trouve le tableau en question : http://huntress-lgdc.forumactif.org/t22-staff
Encore merci.
Re: Tableau à onglets
Dans ton HTML, au niveau de la div ".tabs-onglet", il faut enlever tous les retours à la ligne et les espaces entre les liens. En effet, les retours à la ligne entre les a sont transformés en balise br par l'éditeur de forumactif
- Code:
<div class="tabs-onglets">
<a href="#premier_onglet">Akya</a><a href="#deuxieme_onglet">Nim's</a><a href="#troisieme_onglet">Yaourt</a>
</div>
Re: Tableau à onglets
Ok ! On y est presque j'ai encore une sorte de petite marge au dessus du premier onglet. Un margin top dans le premier <a> suffit ?
Re: Tableau à onglets
Dans ton CSS tu as ceci :
C'est le padding qui pose problème. En effet il met tous les padding (top / bottom / left / right) à 5px et crée donc le décalage.
Tu peux le remplacer par ce code pour enlever le padding en haut :
- Code:
.tabs-onglets {
background: #cccac8;
margin-top: 36px;
padding: 5px;
float: left;
width: 85px;
height: 240px;
}
C'est le padding qui pose problème. En effet il met tous les padding (top / bottom / left / right) à 5px et crée donc le décalage.
Tu peux le remplacer par ce code pour enlever le padding en haut :
- Code:
padding: 0 5px 5px 5px
Re: Tableau à onglets
Parfait ! C'est nickel, merci encore une fois pour ton aide !
Sujets similaires
» 3 tableau à onglets
» Tableau onglets
» Tableau à onglets coulissants
» Tableau à onglets
» Tableau à onglets bloqués
» Tableau onglets
» Tableau à onglets coulissants
» Tableau à onglets
» Tableau à onglets bloqués
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum