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

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

SoraNoHime
+ Hyperactif +

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

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

SoraNoHime
+ Hyperactif +

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.

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.

SoraNoHime
+ Hyperactif +

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/

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 ?

SoraNoHime
+ Hyperactif +

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 ?

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.

SoraNoHime
+ Hyperactif +

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

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

SoraNoHime
+ Hyperactif +

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

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