Soucis d'apparition d'onglet

2 participants

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

Résolu Soucis d'apparition d'onglet

Message par Amallia Jeu 14 Juil 2011, 12:35

Bonjour à tous,

Alors voilà, j'essayais de mettre mes catégories de forum sous forme d'onglet...J'y suis presque arrivé mais là je ne trouve absolument pas comment régler mon problème.

Spoiler:

Comme vous pouvez remarquer, les onglets sont juste le nom de mes catégories collé les uns aux autres...Alors que j'aimerais plutôt qu'ils aient cette forme:

Spoiler:

Voici mon css:

Code:


/* Catégorie par onglet */

.text {
color:#FFFFFF; /*Couleur du texte de vos onglets*/
cursor:pointer;
}

#cat_onglet_1,#cat_onglet_2,#cat_onglet_3,#cat_onglet_4,#cat_onglet_5 /*nomonglet... à remplacer par le nom des onglets*/ {
padding-top:4px;
padding-left:4px;
padding-right:4px;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #000000;
margin: auto;
margin-bottom:30px;
width:800px;
}

.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

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

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

.onglet_actif {
background: url('http://static.skynetblogs.be/media/107260/1203220225.jpg') no-repeat; /*URL de l'onglet étant actif*/
width:150px; /*Largeur de l'onglet étant actif*/
height:100px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background: url('http://static.skynetblogs.be/media/107260/1203220225.jpg') no-repeat; /*URL de l'onglet étant actif*/
width:100px; /*Largeur de l'onglet étant inactif*/
height:50px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
}

Et mon 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">Avant de jouer</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">Le monde des Sorciers </li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">Poudlard</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Exterieur de Poudlard</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">Hors-Jeu</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 -->


Merci d'avance pour l'aide ^^



Dernière édition par Amallia le Mar 19 Juil 2011, 17:13, édité 1 fois
avatar

Amallia
**

Féminin
Messages : 71
Inscrit(e) le : 14/01/2011

http://game-of-thrones.1fr1.net/
Amallia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Amallia Ven 15 Juil 2011, 09:19

Un petit up...
avatar

Amallia
**

Féminin
Messages : 71
Inscrit(e) le : 14/01/2011

http://game-of-thrones.1fr1.net/
Amallia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Amallia Dim 17 Juil 2011, 09:49

Up...

J'ai réussi à plus ou moins mettre un écart entre chacune des sections mais toujours pas de Background pour les faire ressortir...
avatar

Amallia
**

Féminin
Messages : 71
Inscrit(e) le : 14/01/2011

http://game-of-thrones.1fr1.net/
Amallia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Amallia Lun 18 Juil 2011, 04:45

Up
avatar

Amallia
**

Féminin
Messages : 71
Inscrit(e) le : 14/01/2011

http://game-of-thrones.1fr1.net/
Amallia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Lixyr Lun 18 Juil 2011, 04:47

Bonjour.

Je peux avoir votre nouveau code actuel, modifié ?
C'est à dire template index_box et css.

Cordialement,
Lixyr.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Soucis d'apparition d'onglet 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Soucis d'apparition d'onglet 3592387030 pour prévenir la modération.

Soucis d'apparition d'onglet Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Amallia Lun 18 Juil 2011, 04:51

Bonjour ^^

Le Css n'a pas changer du tout donc c'est le même code que dans mon premier post ^^

voici le nouveau code 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}<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"><div style="font-size: 12pt ; background-color: #DCBB81 ; width: 150px ; border-radius: 10px; color: #000000;">Avant de jouer</div>          </li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2"><div style="font-size: 12pt ; background-color: #DCBB81 ; width: 200px ; border-radius: 10px; color: #000000;">Le monde des Sorciers</div>     </li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3"><div style="font-size: 12pt ; background-color: #DCBB81 ; width: 100px ; border-radius: 10px; color: #000000;">Poudlard</div>          </li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4"><div style="font-size: 12pt ; background-color: #DCBB81 ; width: 200px ; border-radius: 10px; color: #000000;">Exterieur de Poudlard</div>          </li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5"><div style="font-size: 12pt ; background-color: #DCBB81 ; width: 100px ; border-radius: 10px; color: #000000;">Hors-Jeu</div></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><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>
<!-- 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 -->


Mais je sais que ce que j'ai fais n'est pas la meilleure des manières, même si ça me donne une visibilité certaine par rapport au début.

Ce que j'aimerais c'est qu'on puisse faire la différence entre l'onglet actif et l'onglet inactif...( la couleur du background serait différente ^^ )

Merci beaucoup pour ton aide éventuelle =D
avatar

Amallia
**

Féminin
Messages : 71
Inscrit(e) le : 14/01/2011

http://game-of-thrones.1fr1.net/
Amallia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Lixyr Lun 18 Juil 2011, 17:58

Alors j'ai réussi à trouver ça :

Like a Star @ heaven Voici votre css :

Code:
    /* Catégorie par onglet */

    .text {
    color:#FFFFFF; /*Couleur du texte de vos onglets*/
    cursor:pointer;
    }

    #cat_onglet_1,#cat_onglet_2,#cat_onglet_3,#cat_onglet_4,#cat_onglet_5 /*nomonglet... à remplacer par le nom des onglets*/ {
    padding-top:4px;
    padding-left:4px;
    padding-right:4px;
    }

    .spoiler_content { display: block; }
    .hidden .spoiler_content { display: none; }

    .cat_forum {
    background-color: #000000;
    margin: auto;
    margin-bottom:30px;
    width:800px;
    }

    .onglet {
    display:inline-block;
    margin-top:30px;
    text-decoration:none; !important
    cursor:pointer;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:-20px;
    background-color: #DCBB81 ;
    -moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-radius-topright: 10px;
    }

    .onglet li {
    float:left;
    list-style-type:none;
    margin-bottom:-22px;
    text-decoration:none; !important
    cursor:pointer;
    }

    .onglet li:hover {
    text-decoration:none; !important
    cursor:pointer;
    }

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

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

    .onglet_actif {
    background: url('http://static.skynetblogs.be/media/107260/1203220225.jpg') no-repeat; /*URL de l'onglet étant actif*/
    width:150px; /*Largeur de l'onglet étant actif*/
    height:100px; /*Hauteur de l'onglet étant actif*/
    cursor:pointer;
    }

    .actif {    background-color:red !important;}

    .onglet_nactif {
    background: url('http://static.skynetblogs.be/media/107260/1203220225.jpg') no-repeat; /*URL de l'onglet étant actif*/
    width:100px; /*Largeur de l'onglet étant inactif*/
    height:50px; /*Hauteur de l'onglet étant inactif*/
    cursor:pointer;
    }


Like a Star @ heaven et votre 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"><div style="font-size: 12pt ; width: 150px ; color: #000000;">Avant de jouer</div>          </li>
    <li onClick="change_cat(2)" class="onglet" id="onglet_2"><div style="font-size: 12pt ; width: 200px ; color: #000000;">Le monde des Sorciers</div>    </li>
    <li onClick="change_cat(3)" class="onglet" id="onglet_3"><div style="font-size: 12pt ; width: 100px ; color: #000000;">Poudlard</div>          </li>
    <li onClick="change_cat(4)" class="onglet" id="onglet_4"><div style="font-size: 12pt ; width: 200px ; color: #000000;">Exterieur de Poudlard</div>          </li>
    <li onClick="change_cat(5)" class="onglet" id="onglet_5"><div style="font-size: 12pt ; width: 100px ; color: #000000;">Hors-Jeu</div></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 -->




Like a Star @ heaven Voici ce que j'ai modifié :


* dans le css :

* j'ai rajouté la classe :
.actif { background-color:red !important;}
qui permet de modifier l'apparence de l'onglet qui est actif. Pour modifier la valeur de la couleur de fond, vous n'avez donc qu'à modifier la valeur : red.

* dans la classe onglet :
j'ai rajouté ceci :
margin-left:5px;
margin-right:5px;
margin-bottom:-20px;
background-color: #DCBB81 ;
-moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; border-radius-topleft: 10px;
-moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-radius-topright: 10px;

=> margin left et right permette l'espace entre les onglets.
=> margin-bottom permet de coller les onglets à la bordure du tableau des catégories. C'était pour faire comme sur votre dessin.
=> j'ai remis la couleur du background, puisqu'aillant modifié le template, il ne servait à rien de garder le codage dans la liste des onglets.
=> pareil, pour les arrondis, j'ai arrangé ça de manière à ce que ça s'affiche correctement sur les navigateur, en ne mettant les arrondis que sur les bords supérieurs gauches et droites comme le montrait votre dessin.



dans le template :

j'ai uniquement retiré la partie du codage pour les arrondis et la couleur de fond. Sinon, la couleur de fond de l'onglet actif ne fonctionnait pas.


Voilà. Si vous avez des questions, n'hésitez pas. Je ne connaissais pas encore ce code, mais je m'y suis retrouvée, je peux répondre aux questions. ^^


Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Amallia Mar 19 Juil 2011, 17:12

HAN !

GRAND GRAND Merci !!!

En plus avec les explication en plus c'est vraiment du bonheur !
Ca fonctionne parfaitement maintenant, comme je le voulais, Merci beaucoup ^^
avatar

Amallia
**

Féminin
Messages : 71
Inscrit(e) le : 14/01/2011

http://game-of-thrones.1fr1.net/
Amallia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis d'apparition d'onglet

Message par Lixyr Mar 19 Juil 2011, 17:40

Ah ^^ ! J'en suis contente.
Bonne continuation à vous. ::fleur::


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Soucis d'apparition d'onglet 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Soucis d'apparition d'onglet 3592387030 pour prévenir la modération.

Soucis d'apparition d'onglet Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum