Problème avec un tableau à onglet

[etoile pailletée]

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

[Invité]

Salut etoile pailletée ,

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

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++

[etoile pailletée]

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^^

[Invité]

Salut etoile pailletée ,

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



a++

[etoile pailletée]

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

[Invité]

Re,

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++

[etoile pailletée]

merci

[etoile pailletée]

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

[Invité]

Re,

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    .
a++

[etoile pailletée]

Oui je voudrais exactement pareil que le premier onglet
merci

[Invité]

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++

[etoile pailletée]

merci beaucoup !!

[Chacha]

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