Problème avec tuto pour onglet

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

Résolu Problème avec tuto pour onglet

Message par Cramby' le Mar 8 Oct 2013 - 19:14

Bonjour !

J'ai suivis à la lettre ce tutoriel : http://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://i55.servimg.com/u/f55/17/47/11/20/bug10.jpg

J'ai aussi essayer avec celui-ci :  http://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 !


Dernière édition par Cramby' le Mar 15 Oct 2013 - 19:15, édité 1 fois

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Cramby' le Mer 9 Oct 2013 - 18:04

Un petit up :/

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Cramby' le Jeu 10 Oct 2013 - 18:29

Un autre petit up ^^'

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Cramby' le Ven 11 Oct 2013 - 19:00

Personnes ? :/

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Cramby' le Dim 13 Oct 2013 - 0:42

Un autre up :/

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Brumes le Dim 13 Oct 2013 - 1:30

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 Wink

Brumes
Nouveau membre

Messages : 28
Inscrit(e) le : 26/09/2013

http://empire-ultime.forumgratuit.fr/
Brumes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Cramby' le Dim 13 Oct 2013 - 13:25

Bonjour ! Merci pour ta réponse ! Smile

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'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Cramby' le Lun 14 Oct 2013 - 12:21

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://i55.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 I love you 

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec tuto pour onglet

Message par Cramby' le Mar 15 Oct 2013 - 19:14

Résolu

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

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


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