Problème avec tuto pour onglet

[Cramby']

Bonjour !

J'ai suivis à la lettre ce tutoriel : https://forum.forumactif.com/t310879-tableaux-a-onglets

Cela devrait donc donner avec l'exemple n° 3 tableaux à onglets l'un en dessous de l'autre avec les onglets à gauche : http://aska.123.st/h18-test-tableau-onglets#trois

or, voila ce que ça me donne :

https://i.servimg.com/u/f55/17/47/11/20/bug10.jpg

J'ai aussi essayer avec celui-ci :  https://forum.forumactif.com/t302481-faire-des-onglets Le problème est que les onglets ne s'ouvre pas.

Quelqu'un aurait-il la solution ? Ca fait trois jours que je suis dessus a essayer de chercher une solution et honnêtement, je n'en peut plus :/

Merci d'avance à ceux qui pourront m'aider !

[Cramby']

Un petit up :/

[Cramby']

Un autre petit up ^^'

[Cramby']

Personnes ? :/

[Cramby']

Un autre up :/

[Brumes]

Bonsoir o/

Si tu as fais un copié-collé du code fourni, le problème doit venir de ton navigateur ; essaye d'en utiliser un autre qui prenne en compte les codes javascript (Firefox/Chrome notamment).
Relance internet, ou utilise F5.

Sinon, pourrais-tu fournir ton code, ou la page HTML où tu as utilisé ce code ?
Merci d'avance

[Cramby']

Bonjour ! Merci pour ta réponse !

J'utilise Chrome mais ça ne marche pas :/
J'ai utiliser ce code dans un sujet vide de mon forum, je voulais déja voir ce que les onglets donnaient afin de faire une fiche de présentation, donc il n'y a aucun code :/

[Cramby']

Petit up, nous avons réussis à mettre des onglets sur le côté mais comme vous pouvez le voir, ils sont décalé et pas complètement sur la gauche du tableau :/

https://i.servimg.com/u/f55/17/47/11/20/onglet10.jpg

Le html :

Code:

<div class="roleplaySheet"><div class="onglets"><!--  
--><span class="tab active" id="tab1">ONGLET 1</span><!--
 --><span class="tab" id="tab2">ONGLET 2</span><!--  </div>
--><div class="contentBox"><!--  
--><div id="content_tab1">Le contenu de mon premier onglet.</div><!--  
 --><div id="content_tab2">Le contenu de mon deuxième onglet.</div><!--  -
-></div><!--
--></div>

le css :

Code:

/* FICHE */
.roleplaySheet {
  width:350px; /* largeur de la fiche */
  text-align:center; /* centre les onglets */
}
/* ONGLETS */
.tab {
  display: block;
  width:100px; /* largeur */
  height:20px; /* hauteur */
 background-color:#ffffff; /* couleur de fond */
border-top:2px #000000 solid; /* bordure haut */
 border-left:2px #000000 solid; /* bordure gauche */
 border-right:2px #000000 solid; /* bordure droite */
cursor:pointer; /* change la souris au survol */
margin:0 5px; /* haut-bas droite-gauche ; espace entre les onglets */
padding:3px 0 0; /* haut droite-gauche bas ; replace le texte au centre de l'onglet */ }
 .tab.active { /* propriétés de l'onglet actif */
background-color:#cccccc; /* couleur de fond */ }

/* CONTENU */
 .contentBox { height:150px; /* hauteur */
padding:5px; /* espace entre le texte et le bord */
background-color:#ffffff; /* couleur de fond */
border:2px #000000 solid; /* bordure */
 text-align:left; /* aligne le texte à gauche */ }
.contentBox > div { height:100%; /* nécessaire pour overflow ; dit aux contenus d'adopter la hauteur de leur contenant (contentBox) */
overflow:auto; /* si le contenu dépasse la taille de la zone, il y a une barre défilante */ }
 #content_tab2 {  display:none; /* masque le contenu de l'onglet 2 */
}

.contentBox { float: right;} /* pour les aligner à côté*/
.roleplaySheet:after { content:" "; display: block; clear:"both";} /* pour régler les bugs des float */

Javascript :

Code:

$(function(){
  $('.tab').click(function(){ //quand je clique sur un onglet, les actions suivantes se déclenchent
      $('.active').removeClass('active'); //l'onglet actif change: on enlève la class de l'ancien onglet
      $('.contentBox > div').hide(); //tous les contenus sont masqués
      var tab = $(this).attr('id'); //je récupère l'id de l'onglet pour pouvoir cibler le contenu correspondant
      $('#content_' + tab).fadeIn(); //le contenu qui correspond à l'onglet s'affiche
      $(this).addClass('active'); //on ajoute la class "active" à l'onglet actif, soit celui qu'on vient de cliquer
  });
});

Merci d'avance  

[Cramby']

Résolu