Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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


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

Cramby'
****

Féminin
Messages : 282
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 : 282
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 : 282
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 : 282
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 : 282
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
avatar

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

Cramby'
****

Féminin
Messages : 282
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 : 282
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