Problème tableau a onglet fiche de présentation

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

Résolu Problème tableau a onglet fiche de présentation

Message par Cramby' Dim 24 Jan 2016 - 13:39

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
avatar

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 tableau a onglet fiche de présentation

Message par Cramby' Lun 25 Jan 2016 - 13:48

Bonjour je me permets un petit up Clin d\'oeil
avatar

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 tableau a onglet fiche de présentation

Message par Cramby' Mar 26 Jan 2016 - 14:31

Un second Sourire2
avatar

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 tableau a onglet fiche de présentation

Message par Cramby' Mer 27 Jan 2016 - 13:53

Personne ? Snifff

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 I love you
avatar

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

- Sujets similaires

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