Problème avec tuto pour onglet
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
Problème avec tuto pour onglet
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 !
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
Re: Problème avec tuto pour onglet
Un petit up :/
Re: Problème avec tuto pour onglet
Un autre petit up ^^'
Re: Problème avec tuto pour onglet
Personnes ? :/
Re: Problème avec tuto pour onglet
Un autre up :/
Re: Problème avec tuto pour onglet
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
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
Re: Problème avec tuto pour onglet
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 :/
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 :/
Re: Problème avec tuto pour onglet
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 :
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>
- 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 */
- 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
});
});
Sujets similaires
» Problème avec les codes pour 3 tableaux a onglet pour le message d'accueil
» Probleme avec tuto pour referencement Yahoo!
» Problème avec le tuto pour obliger les membres à se présenter
» Problème avec un tuto anglais pour modifier l'apparence de l'éditeur
» Problème avec un tuto : Une couleur pour les nouveaux messages privés
» Probleme avec tuto pour referencement Yahoo!
» Problème avec le tuto pour obliger les membres à se présenter
» Problème avec un tuto anglais pour modifier l'apparence de l'éditeur
» Problème avec un tuto : Une couleur pour les nouveaux messages privé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