Problème avec un tableau à onglet

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

Résolu Problème avec un tableau à onglet

Message par etoile pailletée le Sam 1 Fév 2014 - 17:22

Bonsoir,
J'ai trouvé un code que j'ai pris ici mais j'arrive pas à enlever le blanc autour du tableau en dessous des onglets :
http://appel-des-animaux.forumactif.org/

Voici mon javascript :
Code:

$(function(){
          var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
        "tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
        });

Mon HTML
Code:

<div class="systab">
 
<div>
 <span>Bienvenue {USER&amp;#8288;NAME}</span>
<table border="1">
 
<tbody>
 
<tr>
 
<td colspan="3">
 
<center>
 Acceuil
</center>
 Bienvenu(e) sur le forum de l'Appel Des Animaux (L'Appel D.A) !<br /> Je vous conseille d'aller d'aller jetez un coup d'oeil dans "Le Forum" <br /> qui se trouve en haut à coté de <br /> "Bienvenu(e){USER&amp;#8288;NAME}" ça vous aideras et vous guideras ! <br />Amusez-vous bien !! <br /> <br /> <br />
</td>
 
</tr>
 
<tr>
 
<td rowspan="1">
 
<center>
 News
</center>
 *Forum en construction<br /> *New Page d'acceuil<br /> *News Catégories<br /> *Futur mascotte<br /> <br />
</td>
 
<td colspan="2">
 
<center>
 L'Association
</center>
 L'association
</td>
 
</tr>
 
<tr>
 
<td>
 
<center>
 Mascotte
</center>
 Le mascotte va bientôt arriver sur le forum !
</td>
 
<td rowspan="2">
 
<center>
 Notre Bouton
</center>
 
<center>
 Nos partenaire
</center>
 
</td>
 
<td rowspan="2">
 
<center>
 STAFF
</center>
 
<center>
 Modérateurs
</center>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</div>
 
<div>
 <span>Onglet 2</span>
</div>
 
<div>
 <span>Onglet 3</span> Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
</div>
 
<div>
 <span>Onglet 4</span> Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.
</div>
 
</div>

Mon code CSS :
Code:

       /* .systab .tab => les onglet */
        .systab .tab {
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border: 1px solid #000;
          cursor: pointer;
        }
        /* .systab .tab:hover => les onglets survolés */
        .systab .tab:hover {
          background: #b8efa1;
          color: #487f31;
          border-color: #487f31;
        }
        /* .systab .tab.selected => les onglets sélectionnés */
        .systab .tab.selected{
          color: #ccc;
          background: #333;
        }
        /* .systab .contents => les conteneurs des contenus associés aux onglets  */
        .systab .contents {
          margin-top: 1px;
          margin-bottom: 1px;
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
        }
        /* style des onglets si ils sont à gauche ou à droite */
        .systab.s_float .tab,.systab.s_float .tab {
          display: block;
          margin: 5px;
        }
        /* flottement des conteneurs si les onglets sont à gauche où à droite */
        .systab.s_float .tabs,.systab.s_float .contents {
          float: left;
        }

Voilà si quelqu'un arrive à m'aider merci d'avance
Remerciments

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par Milouze14 le Sam 1 Fév 2014 - 20:07

Salut etoile pailletée ,

en fait , il faut bien regarder ton code HTML et relier ta C.S.S ensuite Wink  .

Ton code HTML (j'ai juste ajouté des class sur les trois dernières div ):
Code:

 
<div class="systab">
   
   <div>
       <span>Bienvenue {USER&amp;#8288;NAME}</span>
      <table border="1">
         
         <tbody>
            
            <tr>
               
               <td colspan="3">
                  
                  <center>
                      Acceuil
                  </center>
                   Bienvenu(e) sur le forum de l'Appel Des Animaux (L'Appel D.A) !<br /> Je vous conseille d'aller d'aller jetez un coup d'oeil dans "Le Forum" <br /> qui se trouve en haut à coté de <br /> "Bienvenu(e){USER⁠NAME}" ça vous aideras et vous guideras ! <br />Amusez-vous bien !! <br /> <br /> <br />
               </td>
               
            </tr>
            
            <tr>
               
               <td rowspan="1">
                  
                  <center>
                      News
                  </center>
                   *Forum en construction<br /> *New Page d'acceuil<br /> *News Catégories<br /> *Futur mascotte<br /> <br />
               </td>
               
               <td colspan="2">
                  
                  <center>
                      L'Association
                  </center>
                   L'association
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                  
                  <center>
                      Mascotte
                  </center>
                   Le mascotte va bientôt arriver sur le forum !
               </td>
               
               <td rowspan="2">
                  
                  <center>
                      Notre Bouton
                  </center>
                  
                  <center>
                      Nos partenaire
                  </center>
                  
               </td>
               
               <td rowspan="2">
                  
                  <center>
                      STAFF
                  </center>
                  
                  <center>
                      Modérateurs
                  </center>
                  
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
   
   <div class="M14_div">
       <span>Onglet 2</span> texte de l onglet deux
   </div>
   
   <div class="M14_div">
       <span>Onglet 3</span> Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
   </div>
   
   <div class="M14_div">
       <span>Onglet 4</span> Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.
   </div>
   
</div>



La css:

Code:

/*LES BACKGROUNDS DE CHAQUE CONTENU D ONGLET*/
.systab .contents table , .systab .contents div.M14_div
{background:#ffffff;}
       
              /* .systab .tab => les onglet */
                .systab .tab {
                  padding: 2px 10px;
                  margin-right: 5px;
                  color: #000;
                  background: #fff;
                  border: 1px solid #000;
                  cursor: pointer;
                }
                /* .systab .tab:hover => les onglets survolés */
                .systab .tab:hover {
                  background: #b8efa1;
                  color: #487f31;
                  border-color: #487f31;
                }
                /* .systab .tab.selected => les onglets sélectionnés */
                .systab .tab.selected{
                  color: #ccc;
                  background: #333;
                }
                /* .systab .contents => les conteneurs des contenus associés aux onglets  */
                .systab .contents {
                  margin-top: 1px;
                  margin-bottom: 1px;
                  color: #000;
                  background: transparent;
                  border: 1px solid #000;
                  padding: 10px;
                }
                /* style des onglets si ils sont à gauche ou à droite */
                .systab.s_float .tab,.systab.s_float .tab {
                  display: block;
                  margin: 5px;
                }
                /* flottement des conteneurs si les onglets sont à gauche où à droite */
                .systab.s_float .tabs,.systab.s_float .contents {
                  float: left;
                }



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par etoile pailletée le Dim 2 Fév 2014 - 11:14

Merci beaucoup pour ton aide, l'autre petit problème c'est que oui ça enlève le blanc pour l'onglet n°1 mais pas pour les autres onglets, si tu pouvais m'aidez encore une fois merci d'avance^^

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par Milouze14 le Dim 2 Fév 2014 - 11:30

Salut etoile pailletée ,

ce sont les onglets non sélectionnés  Wink  , tu veux changer la couleur aussi ?



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par etoile pailletée le Dim 2 Fév 2014 - 11:36

Oui j'aurais aimé mettre la même que le 1er onglet.
merci

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par Milouze14 le Dim 2 Fév 2014 - 11:39

Re,

@etoile pailletée a écrit:Oui j'aurais aimé mettre la même que le 1er onglet.
merci

ben disons que c'est bien plus explicite sur le visuel .

Il faut modifier la couleur #333 par celle que tu souhaites ici:
Code:

 /* .systab .tab.selected => les onglets sélectionnés */
                .systab .tab.selected{
                  color: #ccc;
                  background: #333;
                }

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par etoile pailletée le Dim 2 Fév 2014 - 12:00

merci

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par etoile pailletée le Dim 2 Fév 2014 - 12:02

EDIT : je n'arrive pas à modifier comme dans le premier onglet ...

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par Milouze14 le Dim 2 Fév 2014 - 12:10

Re,

@etoile pailletée a écrit:EDIT : je n'arrive pas à modifier comme dans le premier onglet ...

tu veux le même affichage que le premier onglet ?

Je reviens ce soir  Wink  .
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par etoile pailletée le Dim 2 Fév 2014 - 18:28

Oui je voudrais exactement pareil que le premier onglet
merci

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par Milouze14 le Dim 2 Fév 2014 - 18:32

Re ,

Supprimes la C.S.S

Code:

/*LES BACKGROUNDS DE CHAQUE CONTENU D ONGLET*/
.systab .contents table , .systab .contents div.M14_div
{background:#ffffff;}
        
              /* .systab .tab => les onglet */
                .systab .tab {
                  padding: 2px 10px;
                  margin-right: 5px;
                  color: #000;
                  background: #fff;
                  border: 1px solid #000;
                  cursor: pointer;
                }
                /* .systab .tab:hover => les onglets survolés */
                .systab .tab:hover {
                  background: #b8efa1;
                  color: #487f31;
                  border-color: #487f31;
                }
                /* .systab .tab.selected => les onglets sélectionnés */
                .systab .tab.selected{
                  color: #ccc;
                  background: #333;
                }
                /* .systab .contents => les conteneurs des contenus associés aux onglets  */
                .systab .contents {
                  margin-top: 1px;
                  margin-bottom: 1px;
                  color: #000;
                  background: transparent;
                  border: 1px solid #000;
                  padding: 10px;
                }
                /* style des onglets si ils sont à gauche ou à droite */
                .systab.s_float .tab,.systab.s_float .tab {
                  display: block;
                  margin: 5px;
                }
                /* flottement des conteneurs si les onglets sont à gauche où à droite */
                .systab.s_float .tabs,.systab.s_float .contents {
                  float: left;
                }


Et remplaces par celle-ci:
Code:

/*PA JQUERY*/
.systab .contents table , .systab .contents div.M14_div
{background:#ffffff;}
        
              /* .systab .tab => les onglet */
                .systab .tab {
                  padding: 2px 10px;
                  margin-right: 5px;
                  color: #ccc;
                  background: #666;
                  border: 1px solid #000;
                  cursor: pointer;
                }
                /* .systab .tab:hover => les onglets survolés */
                .systab .tab:hover {
                  background: #b8efa1;
                  color: #487f31;
                  border-color: #487f31;
                }
                /* .systab .tab.selected => les onglets sélectionnés */
                .systab .tab.selected{
                  color: #fff;
                  background: #666;
                }
                /* .systab .contents => les conteneurs des contenus associés aux onglets  */
                .systab .contents {
                  margin-top: 1px;
                  margin-bottom: 1px;
                  color: #000;
                  background: transparent;
                  border: 1px solid #000;
                  padding: 10px;
                }
                /* style des onglets si ils sont à gauche ou à droite */
                .systab.s_float .tab,.systab.s_float .tab {
                  display: block;
                  margin: 5px;
                }
                /* flottement des conteneurs si les onglets sont à gauche où à droite */
                .systab.s_float .tabs,.systab.s_float .contents {
                  float: left;
                }
/*FIN PA JQUERY*/


Pense à cliquer sur le bouton

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par etoile pailletée le Lun 3 Fév 2014 - 18:51

merci beaucoup !!

etoile pailletée
**

Messages : 82
Inscrit(e) le : 14/02/2012

http://les-loup-sauvage.creerforumgratuit.com/
etoile pailletée a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau à onglet

Message par Chacha le Dim 9 Fév 2014 - 10:42

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 50926
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha 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