Problème tableau a onglet fiche de présentation
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 tableau a onglet fiche de présentation
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour !Je souhaite faire un tableau a onglet dans les fiches de presentation de mes membres.
J'ai utilisée votre tuto => https://forum.forumactif.com/t310879-tableaux-a-onglets
J'ai donc bien ajoutée le javascript et celui-ci est activé, j'ai également ajouter le css dans ma page css et j'ai collée ce code dans ma page :
- Code:
<div class="systab">
<div>
<span>Mon onglet 1</span>
Mon contenu 1
</div>
<div class="selected">
<span>Mon onglet 2</span>
Mon contenu 2
</div>
<div>
<span>Mon onglet 3</span>
Mon contenu 3
</div>
</div>
Mais ça ne fonctionne pas (voir rendu sur le screen) en plus de cela, le code rétrécie mon bloc d’écriture et fait disparaitre les boutons (police, taille, couleurs etc etc...)
Quelqu'un aurait-il donc un code pour tableau à onglet qui fonctionne dans les pages html ?
Je vous remercie d'avance ♥
Dernière édition par Cramby' le Jeu 28 Jan 2016 - 11:18, édité 1 fois
Re: Problème tableau a onglet fiche de présentation
Bonjour je me permets un petit up
Re: Problème tableau a onglet fiche de présentation
Personne ?
Edit : J'ai trouvée un code :
html
css :
javascript
+ Quelqu'un pourrait-il me dire comment faire pour que les onglets soient l'un à côté de l'autre et non pas l'un au dessus de l'autre ?
+ De plus, comment faire pour que les onglet soient en dessous du cadre et non pas au dessus ?
Je vous remercie
Edit : J'ai trouvée un code :
html
- Code:
<div class="roleplaySheet"> <div class="onglets"><!-- --><span class="tab active" id="tab1"><img src="http://i.imgur.com/8TOmJ4p.png" height="70px" width="70px"/></span><!-- --><span class="tab" id="tab2"><img src="http://i.imgur.com/8TOmJ4p.png" height="70px" width="70px"/></span><!-- --><span class="tab" id="tab3"><img src="http://i.imgur.com/8TOmJ4p.png" height="70px" width="70px"/></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 id="content_tab3">Le contenu de mon troisieme onglet.</div><!-- --><!-- --></div></div>
css :
- Code:
/* ONGLETS */
.tab {
display: block;
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 */}
/* CONTENU */
.onglets, .contentBox { float: top;} /* pour les aligner à côté*/
.contentBox { height:100px; width: 380px;/* hauteur */
padding:5px; /* espace entre le texte et le bord */
margin: 20px;
box-shadow: inset 0px 0px 5px #D0C1BB;
border: 1px solid #D0C1BB;
background-color:#ffffff;
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, #content_tab3 { display:none; /* masque le contenu de l'onglet 2 et 3 */
}
.contentBox { float: top;} /* 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
});
});
+ Quelqu'un pourrait-il me dire comment faire pour que les onglets soient l'un à côté de l'autre et non pas l'un au dessus de l'autre ?
+ De plus, comment faire pour que les onglet soient en dessous du cadre et non pas au dessus ?
Je vous remercie
Sujets similaires
» Problème au niveau de l'apparence de ma fiche de présentation.
» Problème avec un code de fiche de présentation
» Problème d'affichage avec mon générateur de fiche de présentation
» Problème avec un tableau à onglet
» Problème de longueur et hauteur du tableau a onglet
» Problème avec un code de fiche de présentation
» Problème d'affichage avec mon générateur de fiche de présentation
» Problème avec un tableau à onglet
» Problème de longueur et hauteur du tableau a onglet
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