Tableau à onglets

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Tableau à onglets

Message par Cali93110 Dim 12 Jan 2014 - 12:43

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

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par Cali93110 Lun 13 Jan 2014 - 16:38

Je me permets une relance. Merci !  Surprised 
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par [Nihil] Lun 13 Jan 2014 - 17:46

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 Wink ?
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par Cali93110 Lun 13 Jan 2014 - 18:11

Voici le JS :

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. Wink
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par [Nihil] Lun 13 Jan 2014 - 18:23

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 Wink

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>
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par Cali93110 Lun 13 Jan 2014 - 19:21

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 ?
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par [Nihil] Lun 13 Jan 2014 - 19:25

Dans ton CSS tu as ceci :
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
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par Cali93110 Lun 13 Jan 2014 - 19:27

Parfait ! C'est nickel, merci encore une fois pour ton aide !  Very Happy 
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum