Problème le jeu d'onglet pour catégorie

Bonjour tout le monde =)

Je suis en train de travailler sur un nouveau design pour un de mes forums, et je rencontre pour la première un problème avec le code qui sert à mettre les catégorie en onglet.

En effet, j'utilise le générateur donné ici depuis toujours, mais voilà, le lien est mort =/ à moins que ce soit qu'une maintenance ?

Du coup, j'ai suivit les instruction pour l'ajout manuelle mais ça bug. J'ai déjà fait le codage de mes catégories en prenant ce code de Halloween pour base. Au cas où voici mon template index_box :

Code:

<table width="100%" border="0" cellspacing="1" 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>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<center><div style="background: url(http://image.noelshack.com/fichiers/2015/08/1424444261-tumblr-lvuln9wykz1r1m.png) center center repeat #F7DBB6; padding: 15px; width: 780px;"><div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
 
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
 
 
  <div class="categorie">
    <table><br /><br /><tr>
  <td><div class="titrefofo"><center><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></center></div>
    <div class="bloc1">{catrow.forumrow.FORUM_DESC}
      <div class="lienssf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></td>
  <td><div class="last_mess"><center><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    <br /><span class="gensmall" style="color: #7D2626; font-size: 10px;">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span><br /><br />{catrow.forumrow.LAST_POST}</center></div></td>
  </tr></table>
   
 </div>

  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
 
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
 
 </div>  </center>
 
<!-- END tablefoot --><!-- END catrow -->
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel='stylesheet' type='text/css'>

Le css correspondant (que j'ai repris sur l'ancienne version de mon forum comme je voudrais rester dans les mêmes tons)

Code:

/* CSS pour le conteneur des onglets */
  #conteneur_onglets
  {
 
    background: url(http://image.noelshack.com/fichiers/2014/12/1395578308-fdonglets.png) repeat;
  }

/* CSS pour les onglets */
  .onglet
  {
  margin: auto;
  width: 800px;
  font-family: 'Herr Von Muellerhoff', Brush Script MT;
  font-size: 35px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 5px #61402E;
  text-position: center;
  letter-spacing: 0px;
  cursor: pointer;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  }

.onglet:hover
  {
  width: 800px;
  font-family: 'Herr Von Muellerhoff', Brush Script MT;
  font-size: 38px;
  color: #D15F6E;
  text-shadow: 4px 1px 1px white;
  text-position: center;
  text-align: center;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  }

Je java scripte est bien installé.

Est-ce que quelqu'un pourrait m'aider à installer ces onglets s'il-vous-plait ? Ou auriez-vous l'adresse d'un autre générateur pour faire cela ?

Merci beaucoup de votre sollicitude ♥

Coucou Dark6nika :)

Ton problème me fait un peu penser à celui ci (^-^) Problème au niveau des catégories. Il y avait notamment un conflit car dans le code de base du libre service, il y a avait une classe ".categorie", qui entrait du coup en conflit avec le javascript des onglets. :)
Je pense que tu rencontres le même genre de problème car dans ton template actuel il y a déjà à un endroit la classe "categorie".

Pourrais tu nous montrer aussi le code de ton template quand tu fais les modifications proposées par le tuto des onglets s'il te plait ? :)

Bonjour Nihil *-* Merci beaucoup de ta réponse !

Ah je vois y aurais ça qui poserait problème ! Je vois en effet que dans mon css il y a deux fois cette classe (une fois avec le code de mon corps catégorie et l'autre avec le tuto des caté en onglets, ce dernier est vierge cela dit) par contre, je ne l'ai pas trouvé dans le template, donc le voici :

Code:

<table width="100%" border="0" cellspacing="1" 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>

  <div id="conteneur_onglets">
      <table><tr>
        <td class="onglet"><div>Généralités</div></td>
        <td class="onglet"><div>Sylvarant</div></td>
        <td class="onglet"><div>Tour du Salut</div></td>
        <td class="onglet"><div>Tesseha'lla</div></td>
        <td class="onglet"><div>Espace détente</div></td>
      </tr></table>
  </div>

  <div id="conteneur_categories"><!-- BEGIN catrow -->
  <!-- BEGIN tablehead --><div class="categorie">
<center><div style="background: url(http://image.noelshack.com/fichiers/2015/08/1424444261-tumblr-lvuln9wykz1r1m.png) center center repeat #F7DBB6; padding: 15px; width: 780px;"><div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
 
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
 
 
  <div class="categorie">
    <table><br /><br /><tr>
  <td><div class="titrefofo"><center><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></center></div>
    <div class="bloc1">{catrow.forumrow.FORUM_DESC}
      <div class="lienssf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></td>
  <td><div class="last_mess"><center><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    <br /><span class="gensmall" style="color: #7D2626; font-size: 10px;">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span><br /><br />{catrow.forumrow.LAST_POST}</center></div></td>
  </tr></table>
   
 </div>

  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
 
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
 
 </div>  </center>
 
<!-- END tablefoot --></div> </div><!-- END catrow -->
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel='stylesheet' type='text/css'>

Merci beaucoup de ton aide ^-^

Salut!

Dans le dernier code de template que tu as donné, tu dois repérer ceci (qui est genre à la ligne 30) :

Code:

<div class="categorie">
    <table><br /><br /><tr>

Rajoutes un "s" à la fin de "categorie". Fais de même dans ton CSS à cet endroit :

Code:

/* Contenu de l'ensembre des forum */
.categorie {
  width: 550px;
  height: 190px;
  padding: 10px;
}

Comme ça, le nom de la classe des catégories d'Halloween sera différente, alors il n'y aura plus de conflit avec le code des onglets ^^

Une fois que c'est fait, essaie de faire la modification de ton template avec le jeu des onglets et on va voir s'il y a autre chose qui bloque

Bonjouuue Onyx !

Merci de ta réponse et de ton aide =)

Je viens de faire ce que tu m'as conseillé, ça a effectivement changé quelque chose mais ... le bug à muté en un autre bug XD

Avant, mes catégories n'apparaissaient carrément pas, et cette fois ça fait ça :

Sur le premier onglet ''généralité'' : https://2img.net/image.noelshack.com/fichiers/2015/09/1424768643-previewbug-2.jpg

Quand on clique sur n'importe quel autre onglet : https://2img.net/image.noelshack.com/fichiers/2015/09/1424768643-previewbug2.jpg

Je vous redonne mon template et mon css modifié pour être sûr de pas avoir fait de bêtise (j'ai du en fait du coup XD)

Code:

<table width="100%" border="0" cellspacing="1" 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>

  <div id="conteneur_onglets">
      <table><tr>
        <td class="onglet"><div>Généralités</div></td>
        <td class="onglet"><div>Sylvarant</div></td>
        <td class="onglet"><div>Tour du Salut</div></td>
        <td class="onglet"><div>Tesseha'lla</div></td>
        <td class="onglet"><div>Espace détente</div></td>
      </tr></table>
  </div>

  <div id="conteneur_categories"><!-- BEGIN catrow -->
  <!-- BEGIN tablehead --><div class="categorie">
<center><div style="background: url(http://image.noelshack.com/fichiers/2015/08/1424444261-tumblr-lvuln9wykz1r1m.png) center center repeat #F7DBB6; padding: 15px; width: 780px;"><div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
 
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
 
 
  <div class="categories">
    <table><br /><br /><tr>
  <td><div class="titrefofo"><center><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></center></div>
    <div class="bloc1">{catrow.forumrow.FORUM_DESC}
      <div class="lienssf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></td>
  <td><div class="last_mess"><center><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    <br /><span class="gensmall" style="color: #7D2626; font-size: 10px;">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span><br /><br />{catrow.forumrow.LAST_POST}</center></div></td>
  </tr></table>
   
 </div>

  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
 
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
 
 </div>  </center>
 
<!-- END tablefoot --></div> </div><!-- END catrow -->
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel='stylesheet' type='text/css'>

Code:

/* --------------------------------- CATEGORIES --------------------------------- */

.bloc1 {
  background: url(http://image.noelshack.com/fichiers/2015/08/1424437909-tumblr-lvuln9wykz1r1ne7to1-250.png) center center repeat #F0E9DB;
  width: 650px;
  height: 150px;
  position: relative;
  top: -3em;
  left: -5em;
  box-shadow: 2px 2px 15px #D59288;
 -moz-box-shadow: 2px 2px 15px #D59288;
  -webkit-box-shadow: 2px 2px 15px #D59288;
}

.bloc1:hover {
  border-left: 4px solid #D16969;
  border-right: 4px solid #D16969;
}

.imgillustration {
  position: relative;
  left: 2.5em;
  top: 1em;
}

/*** FONDS GENERAUX ***/

/* Contenu de l'ensembre des forum */
.categories {
  width: 650px;
  height: 190px;
  padding: 10px;
}

/* Fond des forum */
.sous-forum {
  width: 500px;
  height: 50px;
  overflow: auto;
  top: -10em;
}

/* Fond titre catégorie */
.cate_titre {
  width: 880px;
  height: 300px;
  margin-top: -55px;
  margin-bottom: -35px;
  background: url(http://image.noelshack.com/fichiers/2015/08/1424630790-header-cat3.png) center center no-repeat;
}

/* Mise en forme nom de catégorie */
h2 {
  font-size: 50px;
  font-family: 'Monsieur La Doulaise', cursive;
  color: #6F2222;
  text-align: center;
  font-weight: normal;
}


/*** MISE EN FORME DES FORUM ***/

/* Mise en forme du texte des titres de forum */
.forumlink {
  color: #C8495A !important;
  font-family: 'Kite One', sans-serif;
  font-size: 25px !important;
  font-weight: none !important;
  position: relative;
  top: -1.4em;
  left: -4em;
  z-index: 1;
}

.forumlink:hover {
  color: #F6866F !important;
  text-decoration: none !important;
}

.forumlink a {
  font-size: 16px;
  width: 600px;
}

/* Mise en forme de la description */
.description {
  width: 450px;
  height: 90px;
  font-size: 11px;
  text-align: justify;
  color: #7D2626;
  background-color: #FCFAF5;
  border-radius: 5px;
  position: relative;
  top: 1em;
  left: 3em;
  padding: 15px;
}

.imagedesc {
  position: relative;
  right: -6em;
  top: -2em;
 -moz-transform:rotate(8deg);
  -webkit-transform:rotate(8deg);
  transform:rotate(8deg);
}

/*** SOUS-FORUM ***/

.lienssf {
  width: 420px;
  max-height: 30px;
  overflow: auto;
  padding: 15px;
  position: relative;
  top: -30px;
  font-size: 10px
}

.lienssf a {
  color: #A47B8E !important;
  text-decoration: none !important;
}

.lienssf a:hover {
  color: #F6866F !important;
 text-decoration : none !important;
}

/*** DERNIERS MESSAGES ***/

.last_mess {
  width: 120px;
  height: 120px;
  position: relative;
  top: -3em;
  left: -4em;
  background: url(http://image.noelshack.com/fichiers/2015/08/1424437909-tumblr-lvuln9wykz1r1ne7to1-250.png) center center repeat #F0E9DB;
  color: #7D2626;
  padding: 10px;
  font-size: 10px;
  border-radius: 5px;
  opacity: 0.9;-moz-opacity: 0.9;-khtml-opacity: 0.9;filter: alpha(opacity=90);
}

.last_mess a {
  color: black !important;
  text-decoration: none !important;
}

.last_mess a:hover {
  color: #CAC9C7 !important;
 text-decoration : none !important;
}

.last_mess:hover {
  border-left: 4px solid #D16969;
  border-right: 4px solid #D16969;
  opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;filter: alpha(opacity=100);
}

 
  /* CSS pour le conteneur des catégories */
  #conteneur_categories
  {
     
  }

  /* CSS pour les catégories */ 
  .categorie
  {
 
  }
 
  /* CSS pour le conteneur des onglets */
  #conteneur_onglets
  {
      display: none;
  }
 
  /* CSS pour les onglets */
  .onglet
  {
      cursor: pointer;
  }
 
/*--------------------------------- FIN CATEGORIES --------------------------------- */

Merci encore de votre aide *-*

Petit up ? éwè

Il me semble qu'il y a un souci dans l'ordre de fermeture ><

Si dans ton template tu remplaces :

Code:

<!-- END tablefoot --></div> </div><!-- END catrow -->

Par ceci, est ce que c'est mieux ? :

Code:

</div> <!-- END tablefoot --><!-- END catrow --></div>

Wah super ! C'était bien ça le problème, c'est enfin réglé ! Merci beaucoup de votre aide, ça marche très bien maintenant ;3 Dans le tuto manuel, il me semble pourtant que l'ordre de fermeture est bien celui là (ou alors j'ai mal reproduit la chose °3°)

Je suis soulagée *-* Merci beaucoup Nihil et Onyx ♥

En fait, tu peux même remplacer par ça si tu veux :

Code:

        </div> <!-- fermeture de .categorie -->
    <!-- END tablefoot -->
    <!-- END catrow -->
</div> <!-- fermeture de .conteneur_categories -->

C'est exactement la même chose, j'ai juste ajouté en commentaire quelle est la div qui est fermée :)

Pour le tuto, il y a peut-être une erreur dedans, je viens de le signaler ici :)

D'accord, merci beaucoup ! ^o^