Catégories à onglets avec Sidebars

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

Résolu Catégories à onglets avec Sidebars

Message par AlyssonB le Dim 9 Oct 2011 - 19:20

Bonjour à tous,

Tout d'abord merci de vous intéresser à ma demande. Ensuite, voilà ce que je voudrai :

J'ai réalisé un code avec des catégories en onglets. or je voudrai en plus avoir une sidebar mais je n'arrive pas à faire les deux Sad. Pourriez vous m'aider ? Voici mon template Index_box :

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">New OhCream</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">OhCream</li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">Discussions</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Artists Place</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">Commandes</li>
<li onClick="change_cat(6)" class="onglet " id="onglet_6">Coffre fort</li>
<li onClick="change_cat(7)" class="onglet " id="onglet_7">Formules</li>
<li onClick="change_cat(8)" class="onglet " id="onglet_8">Arênes</li>
<li onClick="change_cat(9)" class="onglet " id="onglet_9">Communauté</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>
<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.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="{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">
        <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>
         <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"><div class="arrondi">{catrow.forumrow.LAST_POST}</div></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


Dernière édition par AlyssonB le Lun 17 Oct 2011 - 19:30, édité 1 fois
avatar

AlyssonB
***

Féminin
Messages : 185
Inscrit(e) le : 13/02/2010

http://eclipserpg.forumactif.org
AlyssonB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par SoraNoHime le Lun 10 Oct 2011 - 1:06

Bonsoir

Avez-vous déjà le code css pour placer votre sidebarre ?

pour la css repérez ceci :
Code:
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>
<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 -->

et changez le ainsi :
Code:
      document.write('<table width="100%" cellspacing="0" cellpadding="0" id="categorie_' + compteur_cat + '" >');
  }
  else
  {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('<table width="100%" cellspacing="0" cellpadding="0" 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>
   </tr>
  <tr><td><table width=100%" cellspacing="0" cellpadding="0">
  <!-- END tablehead -->
  <!-- BEGIN cathead -->

puis ici :
Code:
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

à changer ainsi :
Code:

   <!-- END catfoot -->
  <!-- BEGIN tablefoot --></table></td></tr>
</table><img src="{SPACER}" alt="" height="0" width="1" /><!-- END tablefoot --><!-- END catrow -->
avatar

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par AlyssonB le Lun 10 Oct 2011 - 18:05

Bonjour et merci de votre réponse,

J'ai un code CSS pour les onglets mais pas pour les sidebars.

J'ai fais les changement et ça me mets : "Balise non fermé..." voici le code que j'ai mis :

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

<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">New OhCream</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">OhCream</li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">Discussions</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Artists Place</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">Commandes</li>
<li onClick="change_cat(6)" class="onglet " id="onglet_6">Coffre fort</li>
<li onClick="change_cat(7)" class="onglet " id="onglet_7">Formules</li>
<li onClick="change_cat(8)" class="onglet " id="onglet_8">Arênes</li>
<li onClick="change_cat(9)" class="onglet " id="onglet_9">Communauté</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 width="100%" cellspacing="0" cellpadding="0" id="categorie_' + compteur_cat + '" >');
          }
          else
          {
              $('#conteneur_barre_onglet').css("display","block");
              document.write('<table width="100%" cellspacing="0" cellpadding="0" 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>
          </tr>
          <tr><td><table width=100%" cellspacing="0" cellpadding="0">
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
      <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="{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">
        <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>
         <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"><div class="arrondi">{catrow.forumrow.LAST_POST}</div></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></td></tr>
        </table><img src="{SPACER}" alt="" height="0" width="1" /><!-- END tablefoot --><!-- END catrow -->
avatar

AlyssonB
***

Féminin
Messages : 185
Inscrit(e) le : 13/02/2010

http://eclipserpg.forumactif.org
AlyssonB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par SoraNoHime le Mer 12 Oct 2011 - 4:22

Voici votre index_box réparé :

Vous aviez mal recopié un code ^^

pour votre sidebarre avez-vous prévu une image ou un fond ? Vous désirez le placez en fond du titre de la catégorie ou au dessus ?


Dernière édition par Macema le Sam 15 Oct 2011 - 19:10, édité 1 fois
avatar

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par AlyssonB le Mer 12 Oct 2011 - 19:54

Oh merci beaucoup !!!!

Pour la sidebarre ce sera une image de fond et au dessus pour chaque catégorie leur nom. si vous voulez des exemple je peux vous montrer.
avatar

AlyssonB
***

Féminin
Messages : 185
Inscrit(e) le : 13/02/2010

http://eclipserpg.forumactif.org
AlyssonB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par SoraNoHime le Mer 12 Oct 2011 - 20:12

^^ oui s'il vous plait ce sera plus simple de visualiser.
avatar

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par AlyssonB le Mer 12 Oct 2011 - 21:28

Encore merci merci merci !!! et voilà :

http://www.goldheartofficiel.com/forum
http://fairytales.1fr1.net/
http://douceolympe.1fr1.net/
avatar

AlyssonB
***

Féminin
Messages : 185
Inscrit(e) le : 13/02/2010

http://eclipserpg.forumactif.org
AlyssonB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par SoraNoHime le Mer 12 Oct 2011 - 21:44

ok ^^ je pensais plus à un schéma. Inutile pour moi de voir les forums je les connais. je vois ce dont vous parlez.

Avez-vous déjà l'image de votre side-barre ? que je puisse tester et adapter le tout ?
avatar

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par AlyssonB le Mer 12 Oct 2011 - 23:11

Euh non pas encore, on attends le design pour ça :s Peut on s'entretenir par MP lorsque je l'aurai ?
avatar

AlyssonB
***

Féminin
Messages : 185
Inscrit(e) le : 13/02/2010

http://eclipserpg.forumactif.org
AlyssonB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par SoraNoHime le Mer 12 Oct 2011 - 23:51

Donnez moi simplement les dimensions ^^ cela me suffira.
avatar

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par AlyssonB le Jeu 13 Oct 2011 - 19:29

912px de largeur Wink
avatar

AlyssonB
***

Féminin
Messages : 185
Inscrit(e) le : 13/02/2010

http://eclipserpg.forumactif.org
AlyssonB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par SoraNoHime le Lun 17 Oct 2011 - 1:47

dans votre css mettez :
.secondarytitle {
background-image : url("lien de votre image");
background-repeat : no repeat;
width :912px;
height : hauteur de l'imagepx;
}

.secondarytitle h2 {
text-align :center;
width :912px;
height : hauteur de l'imagepx;
}
avatar

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories à onglets avec Sidebars

Message par AlyssonB le Lun 17 Oct 2011 - 19:29

Merciiii beaucoup pour tout le temps que tu as pris pour moi et la réponse Wink
avatar

AlyssonB
***

Féminin
Messages : 185
Inscrit(e) le : 13/02/2010

http://eclipserpg.forumactif.org
AlyssonB 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