Problème avec des onglets.

[Framboise']

Bonjour (:.

Alors voilà, j'ai un problème avec un code pour des onglets, je n'obtiens pas l'effet voulu. Voilà ma template ;

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

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

{CURRENT_TIME}

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

<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>


<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">
<li onClick="change_cat(1)" class="onglet actif" id="onglet_1">GRAPHICLAND ♦</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">WONDERLAND ♦</li>
</ul></div>');

var compteur_cat = 1;

function change_cat(numero)
{
   if(document.getElementById('categorie_'+numero))
   {
      /* affichage de la bonne categorie */
      $('table[id^=categorie_]').css('display','none');
      $('table[id=categorie_'+numero+']').fadeIn();
      
      /* affichage du bon onglet */
      $('.actif').removeClass("actif");
      $('.onglet[id=onglet_'+numero+']').addClass("actif");
   }
}

function capture_cat()
{
   if(compteur_cat == 1)
   {
      document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
   }
   
   compteur_cat++;
}

//-->
</script>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
   capture_cat();
//-->
</script>

<!-- FIN MODIF ONGLETS -->


<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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%">
<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}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<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}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Voilà ce que ça me donne ;

Spoiler:

J'aurais voulu retrouver cet effet-ci,

Spoiler:

que j'avais avant, tout en ayant des onglets ^^. C'est compliqué je sais.


Et l'effet que je veux marche sur mon forum de test.

Spoiler:

Il y a sans doute un code qui gêne non ? Voilà, si vous pouvez me renseigner... Et si cela n'est pas possible eh bien, tant pis x).

Merci!

[Framboise']

Up

[SoraNoHime]

Bonsoir

vous avez remplacer votre template d'avant par celui des onglets en entier non ? D'ou le problème de disparition de la structure précédente, celle-ci étant remplacer par celle par défaut. Si vous avez encore une sauvegarde de votre template précédent, merci de me le fournir également.

Cordialement.

[Framboise']

Bonjour!

Tout d'abord, merci pour votre aide. Ensuite, c'est bien ce que je me disais, mais je ne préfère pas y toucher, de peur de faire une bêtise.
Voilà mon ancienne template :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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%">
         <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}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <div class="statsforums">Contient {catrow.forumrow.POSTS} mots dorés dans {catrow.forumrow.TOPICS} petits cœurs</div>
<h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Merci d'avance!

[SoraNoHime]

Mettez en place votre ancien template.

Puis repérez ceci :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>

et remplacez le par :

Code:

<!-- DEBUT MODIF ONGLETS -->
 
<script type="text/javascript">
<!--
 
document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">
<li onClick="change_cat(1)" class="onglet actif" id="onglet_1">GRAPHICLAND ♦</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">WONDERLAND ♦</li>
</ul></div>');
 
var compteur_cat = 1;
 
function change_cat(numero)
{
  if(document.getElementById('categorie_'+numero))
  {
      /* affichage de la bonne categorie */
      $('table[id^=categorie_]').css('display','none');
      $('table[id=categorie_'+numero+']').fadeIn();
     
      /* affichage du bon onglet */
      $('.actif').removeClass("actif");
      $('.onglet[id=onglet_'+numero+']').addClass("actif");
  }
}
 
function capture_cat()
{
  if(compteur_cat == 1)
  {
      document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
  }
  else
  {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('<table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
  }
 
  compteur_cat++;
}
 
//-->
</script>
 
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
 
<script type="text/javascript">
<!--
  capture_cat();
//-->
</script>
 
<!-- FIN MODIF ONGLETS -->
 
 
<tr>

Cordialement.

[Framboise']

J'ai tout mis en place et pourtant les onglets ne s'affichent pas :/.

[SoraNoHime]

j'ai oublié une ligne

placez ceci

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

au tout début de votre template.

[Framboise']

Ne vous inquiétez pas, je l'ai rajouté avant mais ça ne marche toujours pas :/.

[SoraNoHime]

Cela s'affiche pourtant bien sur mon forum test

puis-je avoir votre template désormais modifié pour voir si vous n'avez pas fait d'erreur ?

[Framboise']

Il y a surement un code qui gêne. Et pour les onglets, j'aimerais bien qu'ils soient à côté & que je puisse les remplacer par une image si possible :/.

La template ;

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
     
  </tr>
</table>
<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

document.write('<div align=&quot;center&quot; style=&quot;display:none;&quot; id=&quot;conteneur_barre_onglet&quot;>
<ul class=&quot;conteneur_onglets&quot;>
<li onClick=&quot;change_cat(1)&quot; class=&quot;onglet actif&quot; id=&quot;onglet_1&quot;>GRAPHICLAND ♦</li>
<li onClick=&quot;change_cat(2)&quot; class=&quot;onglet &quot; id=&quot;onglet_2&quot;>WONDERLAND ♦</li>
</ul></div>');

var compteur_cat = 1;

function change_cat(numero)
{
   if(document.getElementById('categorie_'+numero))
   {
      /* affichage de la bonne categorie */
      $('table[id^=categorie_]').css('display','none');
      $('table[id=categorie_'+numero+']').fadeIn();
      
      /* affichage du bon onglet */
      $('.actif').removeClass(&quot;actif&quot;);
      $('.onglet[id=onglet_'+numero+']').addClass(&quot;actif&quot;);
   }
}

function capture_cat()
{
   if(compteur_cat == 1)
   {
      document.write('<table class=&quot;forumline&quot; id=&quot;categorie_' + compteur_cat + '&quot; >');
   }
   else
   {
      $('#conteneur_barre_onglet').css(&quot;display&quot;,&quot;block&quot;);
      document.write('</table><table class=&quot;forumline&quot; id=&quot;categorie_' + compteur_cat + '&quot; style=&quot;display:none;&quot;>');
   }
   
   compteur_cat++;
}

//-->
</script>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
   capture_cat();
//-->
</script>

<!-- FIN MODIF ONGLETS -->
 
 
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
     
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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%">
        <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}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <div class="statsforums">Contient {catrow.forumrow.POSTS} mots dorés dans {catrow.forumrow.TOPICS} petits cœurs</div>
<h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
     
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[SoraNoHime]

Avez-vous publié votre template, car je ne vois pas d'erreur dans le code.

pour mettre une image à la place du texte, vous pouvez l'insérez betement dans le code ^^ à la place

GRAPHICLAND ♦

mettez votre image sous cette forme de code :

Code:

<img src="[color=red]adresse de votre image[/color]" />

ensuite pour personnaliser et mettre en ligne les onglets, il suffit d'un peu de css :

Code:


/*ONGLET DESACTIVE*/
.onglet{
display:inline-block;
height : 36px;
width :125px;
margin-left : 5px;
margin-right : 5px;
TEXT-ALIGN: middle center;
COLOR: #E7D9A7;
FONT-SIZE: 13px;
BACKGROUND-COLOR: #593826;
border:1px dotted #E7D9A7;
}
/*ONGLET ACTIF*/
.actif {
height : 36px;
width :125px;
TEXT-ALIGN: middle center;
COLOR: #593826;
FONT-SIZE: 13px;
BACKGROUND-COLOR: #E7D9A7;
border:1px dotted #593826;
}

à personnaliser bien sur. N'enlevez pas le display:inline-block; c'est ce qui permet de les laisser cote à cote.

[Framboise']

Oui, j'ai bien publié ma template. Mais je pense que c'est d'autres codes qui gênent, j'ai modifié plusieurs templates alors..
Et j'ai bien mis le CSS, ça ne marche pas :/

[SoraNoHime]

Puis-je avoir un lien vers le problème ?

[Framboise']

Voilà.

http://endless-destiny.graphforum.com/

[SoraNoHime]

Avez-vous d'autres scripts installés ?

[Framboise']

Hm, non je ne crois pas.

[SoraNoHime]

Mettez votre forum sur PA > Affichage > Structures et hiérarchie > Moyen : sérparer les catégories de l'index. et enregistrez.

[Framboise']

Merci beaucoup, ça marche enfin !
Et, puis-je vous demander comment faire pour que la moitié de mes catégories ne disparaissent pas ? Enfin, il y a plusieurs catégories, & dans un onglet, il y en a une chacune, j'aimerais que mes autres catégories apparaissent aussi ^^. Je ne sais pas comment mieux expliquer, désolée :/.

[SoraNoHime]

Pouvez vous me faire un scan de vos catégories ? PA > Général > Catégorie & Forum.

Que je voie comment vous les avez structuré.

[Framboise']

Voilà.

Spoiler:

[SoraNoHime]

D'après ce que je vois, il vous faudrait 5 onglets

Il faut savoir que les onglets prennent les premières catégories à partir de l'index donc : Welcome in wonderland, Artfolio, Boutiques des lapins, caverne des lapins, solidary & support. Si vous voulez les voir apparaitre dans deux catégories d'onglets il va falloir créer deux catégories où vous remettrez les autres à l'intérieur.

Cordialement.

[Framboise']

Voilà c'est fait, mais j'ai un autre problème maintenant ^^. Les catégories que j'ai mise dans la "grande" catégorie, apparaissent sous forme de forums. Si vous ne comprenez pas, voilà un screen :

Spoiler:

Et voilà comment sont structurées mes catégories, si ça peut servir :

Spoiler:

[SoraNoHime]

C'est malheureusement le seul moyen à savoir faire soit 5 onglets avec les premiers mis comme avant, soit avoir cette configuration pour deux onglets uniquement donc comme vous avez actuellement.

Cordialement.

[Invité]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif