Problème avec un script Onglet

[popoliline]

Rappel du premier message :

Bonjour à tous,

Toujours sur mon codage du futur design d'un forum. Cette fois c'est un script onglet qui fait des siennes. Sur le forum test (en lien, car l'actuel forum est en hiatus le temps qu'on installe le design) tout marchait comme il faut. En transférant le codage nous avons eu des bugs.

Parmi ceux-ci :

- l'onglet 1 ne s'affiche pas en totalité lorsque l'on arrive sur le forum, il faut cliquer pour qu'il se développer, or nous voudrions que "tout" soit visible en arrivant sur le forum.
- L'image de bas de catégorie a disparu dans l'onglet 1, elle n’apparaît qu'au bas de la toute dernière catégorie, hors nous voudrions qu'elle apparaisse à la fin de chaque catégorie de l'onglet : http://hpics.li/e201776

EDIT: 18h28 le 19/09
Le CSS uniquement ce que j’ai ajouté, pas le CSS en entier

Code:



/*POW*/   

td.catHead, th.thHead {
    border-width: 0px 0px 0px;
    font-size: 12px;
  border-color:#D7D7D7!important;
}
td.catBottom, th.thBottom {
    border-width: 0 1px 1px;
  border-color:#D7D7D7!important;
}
.espacetrop{
 margin-top: 0px;
    margin-bottom: -5px;
  background-color:#D7D7D7;
}


.espacetrop1{
 margin-top: -10px;
      margin-bottom: -10px;    line-height: -5px;
background-color:#D7D7D7!important;
}

.postbody {
    display: block;
    padding-left: 15px;
  padding-right: 15px;
    text-align:justify;
}

.forumline{
  border-color:#D7D7D7!important;}

/*Boite MP*/
.pourcentback {
width:65Opx!important;
}

/* PA */
 
/* image de fond */
 
.en_tete{
position:relative;
width:750px;
height:568px;
background-image:url('http://i.imgur.com/mPt95CH.png');
margin:auto;
overflow:hidden;
}
 
/* case contexte */
 
.en_tete .contexte{
position:absolute;
width:232px;
height:153px;
top:123px;
left:50px;
padding:10px;
overflow:auto;
font-family:arial;
font-size:13px;
letter-spacing:0px;
line-height:12px;
text-align:justify;
}
 
/* case partenaire */
 
.en_tete .partner{
width:230px;
height:70px;
position:absolute;
left: 365px;
top: 208px;
text-align:center;
}
 
/* case news */
 
.en_tete .news{
width:213px;
height:130px;
position:absolute;
left: 38px;
top: 318px;
overflow:auto;
z-index:1;
}
 
/* case map */
/* fait avec une image coulissante */
 
.en_tete .map{
width:235px;
height:235px;
background:url(http://imgur.com/qjqbdjS.png) left;
position:absolute;
left: 242px;
top: 293px;
padding:0;
overflow:hidden
}
.map a {display: block;
position:absolute;border-radius:50%;}
 
#staten {left: 0px; top: 147px; width: 88px; height: 88px;}
#queens {left: 122px; top: 67px; width: 112px; height: 137px;}
#brook {left: 88px; top: 99px; width: 82px; height: 95px;}
#bronx {left: 133px; top: 4px; width: 74px; height: 74px;}
#manhat {left: 74px; top: 24px; width: 86px; height: 98px;}
 
#staten:hover,#queens:hover,#brook:hover,#bronx:hover,#manhat:hover {
background: url(http://imgur.com/qjqbdjS.png) no-repeat;
border-radius:0px;}
 
#staten:hover {background-position:-235px -147px;}
#queens:hover {background-position:-357px -67px;}
#brook:hover {background-position:-558px -99px;}
#bronx:hover {background-position:-603px -4px;}
#manhat:hover {background-position:-779px -24px;}
 
/* case staff */
 
.en_tete .staff{
width:230px;
height:280px;
padding:5px;
position:absolute;
left: 480px;
top: 290px;
overflow:auto;
}
 
/*ONGLET STAFF PA*/
 
/* .systab .tab => les onglet */
 
.systab .tab {
padding: 2px 10px;
margin-left: 10px;
color: #000;
font-family: 'Exo', sans-serif;
cursor: pointer;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
 
.systab .contents {
width: 220px;
height: 180px;
text-align: center;
color: #000;
}
 
/*ecriture titre staff*/
 
.pseudostaff{ font-family: 'Yellowtail', cursive;
font-size: 22px; letter-spacing:-1px;
}
.dcstaff{
font-family: 'Exo', sans-serif;
font-size: 10px;
letter-spacing:0px;
}
.rangstaff{
font-family: 'Expletus Sans', cursive;
color:#F9F3F2;
font-size:16px;
letter-spacing:-1px;
}
 
/* style des onglets si ils sont à gauche ou à droite */
 
.systab.s_float .tab,.systab.s_float .tab {
display: block;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
 
.systab.s_float .tabs,.systab.s_float .contents {
float: left;
}
 
/* case du bas */
 
.lien_du_bas{
position :absolute;
left:70px;
top:538px;
}
.lien_du_bas a{
display:inline-block;
height:30px;
}
/* FIN PAGE ACCUEIL */

/*listing partenaire*/

.ville {font-family: pathway gothic one;font-size: 28px;color: #A2669D;text-align: center; text-transform: uppercase;margin-bottom: 10px;}
.quartier{font-family: 'Exo', sans-serif; color:#272727; letter-spacing:-1px; font-size: 15px;
  text-transform: uppercase; padding-top: 10px; text-align:; }
.quartier1 { position:relative; width:150px; height:150px; border:2px solid #C7B6C9;
  margin-left: 30px; margin-top: 0px;
  -moz-border-radius:200px; border-radius:200px; }

.quartier1 img { position: relative; left: 0px; word-wrap: break-word;
  -webkit-transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out; -webkit-filter: grayscale(0); }

.quartierfond { position: absolute; top: 7px; left: 7px;
  width: 135px; height: 135px; -moz-border-radius:200px; border-radius:200px;
  background: rgba(255,255,255,0.85); box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
  color: rgba(0,0,0,0.8); -webkit-transform: rotate(270deg) scale(0);
  -moz-transform: rotate(270deg) scale(0); transform: rotate(270deg) scale(0); opacity: 0;
  -webkit-transition: 0.6s all ease-in-out;
  -moz-transition: 0.6s all ease-in-out; transition: 0.6s all ease-in-out; }

.quartierinfo {position: absolute; top: 0px; left: 0px; font-family: source sans pro;
  font-size: 11px; margin-top: 25px; line-height: 100% ; text-align : center; word-wrap: break-word;
  color : black; text-transform: lowercase; letter-spacing: 0px; height:70px; width :125px; overflow:auto;}

.quartierinfo span { background: ; padding: 0px; display: inline-block; word-wrap: break-word;
  font-size: 9px; letter-spacing:0px;
  margin-bottom: 0px; box-shadow: 0px 0px 0px rgba(0,0,0,0.1); }

.quartier1:hover .quartierfond { -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; }

.quartier1:hover img { -webkit-filter: grayscale(1); -moz-filter: grayscale(1); }
.normalname, .unreg { display: none!important; }

/*présentation du staff*/

.picstaff{ width: 430px; height: 180px;
  background: white; color: #737373;
  overflow: auto; font: 11px georgia;
  text-align: justify; padding: 10px;
  opacity: 0; -webkit-transition:all 0.7s ease-in-out;
  -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
  -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
.picstaff:hover { opacity: .9; }
.picstaff::-webkit-scrollbar { width: 5px; }
.picstaff::-webkit-scrollbar-track  { background-color: #eee; }
.picstaff::-webkit-scrollbar-thumb { background-color: #2A7690; }



/* QEEL */


.montab1 .tab {
  padding: 2px 10px;
  color: #000;
  border: 1px solid #;
  cursor: pointer;
}
.montab1 .contents {
  width:  10%;
  margin-right: 30px;
  border: ;
  background: ;
}
.montab2 .contents {
  width:  40%;
  border: none;
  background: #efe;
  box-shadow:0 0 10px #aba;
  border-radius: 20px;
}
.montab2 .tab.selected {
  color: red;
  background: ;
}
.montab1 .mononglet4 {
  color: blue;
}
.montab1 .mononglet7 {
  color: orange;
}
   
        .fond {width:750px; height:373px;
  background-image:url(http://nsa37.casimages.com/img/2015/08/27//150827080233981055.png);
          margin:auto;text-align:center;
        background-repeat : no-repeat;position:relative}
   
/*groupes*/
.fond a[href^="/g"]{
  background:;
  position:absolute;
  left:302px;
  display:inline-block;
  height:20px;
  width:130px
}
.fond a[href^="/g38"]{
  top:87px;
}
.fond a[href^="/g39"]{
  top:240px;
}
.fond a[href^="/g40"]{
  top:65px;
}
.fond a[href^="/g41"]{
  top:219px;
}
.fond a[href^="/g42"]{
  top:109px;
}
.fond a[href^="/g43"]{
  top:261px;
}
.fond a[href^="/g44"]{
  top:282px;
}
.bloc-onglets{
  position:relative;
  width:px;
  top:5px;
  left:438px
}
        .boite_1_qeel {
    position: relative;
    top: 8px;
    left: 30px;
    width: 230px;
    height: 130px;
    background-color: #;
    border-bottom: 1px solid #;
    border-left: 1px solid #;
    border-right: 1px solid #;
    border-top: 1px solid #;
    color: #292929!important;
    display: block;
    font-size: 11px;
    overflow: auto;
    text-align: justify;
    transition: all .8s;
    font-size:11px;text-align:justify; overflow:auto;  display: block;
          color : #292929!important; background-color:#;
          text-transform:uppercase;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
  transition:all 0.8s; }
   
        .ilwena {height:55px;overflow:auto;}
 
        .boite_1_qeel::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
   
        .boite_1_qeel::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
   
        #kumao {inline:block;}
        #blabla {inline:block;}
        #blibli {inline:block;}
        #blublu {inline:block;}
   
        .onestla { font-size:11px;text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;
    position: relative;
    left: 30px;
    width: 230px;
    top: 8px;
    height: 130px;
}
   
        .onestla::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
   
        .onestla::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
   
        .onestla::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
   
        .boite_qeel_credit {width:200px;height:260px;padding:5px;position:absolute;top:0px;
          left:38px;top: 50px; text-align:justify; overflow:; display: block;
          color : #292929!important; background-color:#;
          text-transform:; line-height: 100%;  font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:7px;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
   
        /*posteur et voteur du mois qeel*/
        .posteur { width: 88px; height: 108px;
          background: white; color: #737373;
          overflow: auto; font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:12px;
          text-align: justify; padding: 4px;
          opacity: 0; -webkit-transition:all 0.7s ease-in-out;
          -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
          -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
        .posteur:hover { opacity: .9; }
        .posteur::-webkit-scrollbar { width: 5px; }
        .posteur::-webkit-scrollbar-track  { background-color: #eee; }
        .posteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

.voteur { width: 88px; height: 108px;
          background: white; color: #737373;
          overflow: auto; font-family:arial; margin-top: -14px;
          font-size:8px; letter-spacing:2px; line-height:12px;
          text-align: justify; padding: 4px;
          opacity: 0; -webkit-transition:all 0.7s ease-in-out;
          -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
          -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
        .voteur:hover { opacity: .9; }
        .pvoteur::-webkit-scrollbar { width: 5px; }
        .voteur::-webkit-scrollbar-track  { background-color: #eee; }
        .voteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

/**annulation row1 pour le queel**/
#lastco .row1 {
background: none;
}
#anniv .row1 {
background: none;
}
/**fin annulation**/

.passage {
    color: #F2EDE6!important;
    text-decoration: none;
    -webkit-transition: color .6s ease-in;
    -moz-transition: color .6s ease-in;
    -o-transition: color .6s ease-in;
    transition: color .6s ease-in;
}

a, a:link, a:hover {
text-decoration: none!important;
}

.conteneur_categories{
  text-align:center;
  position: relative;
}
#centrage{
text-align:center;
  position: relative;
    right: 190px;
}

.onglet {
text-align:center;
list-style-type: none;
float: right;}

.onglet li {text-align:center;float: left;}

.onglet li:hover{text-decoration:none;}

    .onglet li a {
          display:block;
          text-decoration:none;
          list-style-type: none;
          }

    .onglet li a: hover {
          text-decoration:none;
          list-style-type:none;
        }

    .onglet_actif { text-align:center;}

    .onglet_nactif {text-align:center; }


td.bas_cate{
    background-image:url('http://nsa38.casimages.com/img/2015/09/06//150906122051395858.png');
  width:800px;
  background-repeat:no-repeat;
    height:100px;  }


.boitepa {
top: 40px;
    left: 45px;
    width: 240px;
    position: absolute;
}

.itboite {
    position: relative;
    font-family: verdana;
    color: #ffffff;
    font-size: 12px;
}



Le template index_box

Code:

 <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- DEBUT MODIF ONGLETS --><div id="centrage"><ul class="onglet"><li onclick="change_cat('0-1-2-3-4-5-6');" class="onglet_actif" id="cat_0"><img src="http://i.imgur.com/ue1C64h.png"></li> <li onclick="change_cat('7-8');" class="onglet_inactif" id="cat_1"><img src="http://i.imgur.com/XF5vuQj.png"></li></ul>
  </div>
<script type="text/javascript">
<!--

var i = 0;
 
var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7','8');
 
function change_cat(num)
{
  var nums= (num+'').split('-');
  $('.cat_forum').hide();
  $('ul.onglet li').removeClass('onglet_actif').addClass('onglet_inactif');
  $('ul.onglet li#cat_'+num).removeClass('onglet_inactif').addClass('onglet_actif');
  for(i=0; i<nums.length; i++) $('#'+nom_cat[nums[i]]).show();
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat(0);
//-->
</script>   
 
  <!-- FIN MODIF ONGLETS -->

  <center>  <div id="conteneur_categories"><tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> <center><img src="http://nsa38.casimages.com/img/2015/09/06//150906122051552189.png" class="width:750px"><div class="titre_cat" style="margin-bottom:-2px;">{catrow.tablehead.L_FORUM} </div></center></th></tr>
        <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
    <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <center><h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
  </h{catrow.cathead.LEVEL}></center>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr><div class="espacetrop1"></div>
      <td class="row1_over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" style="background-color:#D7D7D7;">
       

                 
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">   
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>

                    </h{catrow.forumrow.LEVEL}>

                    <center>
                      <div class="statsyc">Les Youcanniens ont ouvert  {catrow.forumrow.TOPICS} sujets et ont postés {catrow.forumrow.POSTS} messages.</div>
                  <table cellspacing="0" cellpadding="0" >
                   
                    <tbody><tr><td>
                     

                      <div class="babyilu">                        {catrow.forumrow.LAST_POST}
                        </div>
                   
                   
                      </td><td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                      </td><td style="vertical-align: top;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="sowakemeup" />

                        </td></tr></tbody> </table></center>
          <div class="espacetrop">          <div id="liencate" style="color:#C7B6C9;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>  </div></td>
 
<!-- END forumrow -->
    <!-- BEGIN catfoot -->
  <tr>
    <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow index_cate" colspan="{catrow.catfoot.INC_SPAN}" height="0"><img src="{SPACER}" alt="" height="0" width="0" /></td>
  </tr>
          <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
   
       
    </table></div>  </center> <!-- END tablefoot --><!-- END catrow -->
    <div class="espacetrop"></div>
 <table><tbody><tr valign="center"><td class="bas_cate"> </td><td></td></tr></tbody></table>         
   


   
   

Merci par avance de votre aide !

[popoliline]

C'est parfais je te remercie le forum est sublime grâce à ton aide !!!!
Merci infiniment !

Je n'ai plus aucun beug donc je vais classer en Résolu grâce à toi !!! Merci merci merci !