Catégories en onglets

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

Résolu Catégories en onglets

Message par Luna-C le Dim 28 Aoû 2011 - 16:10

Bonsoir =)

Alors voila mon soucis j'aimerais que les catégories de mon forum (cf exemple bienvenue organisation ... ) se présente comme sur le forum donner en exemple, cad en onglet survolé.
http://www.berkeley-u.com/

J'ai lu les sujets posté sur le forum je n'ai pas trouvé le code, j'ai essayé avec le générateur :
http://shared-development.clanteam.com/onglets.php

Voila le résultat obtenu :
http://i51.tinypic.com/71sk8z.png

Il faut dire que j'ai touché aux templates suivantes auparavant :

index_body
index_box
overall_footer
overall_header
viewtopic_body

Voila mon css
Code:
.navtop {
top : 0px;
width : 100% ;
background-color : # ;
border-bottom : 0px STYLE #FFA34F
}

.mainmenu img { display: none; }


/* BORDURE FORUM */
.forumline{
    background-color: #4B1414;
        -moz-border-radius:1px;
        border-bottom: 1px #4B1414 solid;
    }


input,textarea, select {
border-radius: 9px 9px;
-moz-border-radius: 9px;}

.postbody {
    display: block;
    text-align:justify;
}

.postbody {
display: block;
padding-left: 15px;
padding-right: 15px;
text-align:justify;
}

.quote{
font-family: Arial;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
border: #AD8E88;
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}

.code{
font-family: Arial;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
border: #AD8E88;
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}


.spoiler{
font-family: Arial;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
border: #AD8E88;
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}

i {color :#D49161;}
b {color :#B39DA4;}
u {color: #651111;border-bottom: 1px dashed #651111;}
u {text-decoration: none;}



.quote, .code, .spoiler {
-moz-border-radius: 9px;}

tr.post span.gensmall { display: none; }
body { background-repeat: no-repeat; background-position: top center; background-attachment: scroll }

a:hover {cursor:se-resize;}
a {font-variant: small-caps;}

tr.post span.gensmall { display: none; }


    .postprofile dd, .postprofile dt {text-align: center;}

body{
  cursor:crosshair;
}

a
{
text-decoration: none;
}
.bodylinewidth{
margin-left:18%;}



 
 


.quote { -moz-border-radius: 10px;}
.code { -moz-border-radius: 10px;}


a {
text-transform: lowercase ;
letter-spacing: 2px;}




.bodyline {-moz-border-radius:20px;}




.profilentour {
text-align:center;
padding:5px;
background-color:#913631;
-moz-border-radius:05px;
}


.postdetails.poster-profile a img {
margin: auto;
display: block;
margin-bottom: -10px;
}


.cate {
            border-bottom: 5px solid #DFC4C0 ;
}

/* BORDURE TEXTE Dans cette section se trouve ... */
.def {
background-color: #793937;
border-bottom: 2px solid #793937;
border-left: 2px solid #793937;
border-top: 2px solid #793937;
border-right: 2px solid #793937;
-moz-border-radius : 10px ;
}

a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid; /
}

a.imginfo span {
  display: none;
}
a.imginfo:hover {
  background: none;
  z-index: 999;
  cursor: help;
}

textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}

.vignettes
{-moz-border-radius:5px;
background-color: ivory;
padding-right:05px;
padding-left:05px;
padding-bottom: 2px;
padding-top:2px;
font-size: 09px;}

.vignettes
{-moz-border-radius:5px;
background-color: ivory;
padding-right:05px;
padding-left:05px;
padding-bottom: 2px;
padding-top:2px;
font-size: 09px;}


.barre
{border-bottom: 5px solid ivory;}


a.forumlink {
display:block;
text-align: center;
border-bottom: 4px double #FFFFFF;
}





.forumline {
width:97%;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
padding:3px;
}






input.post, select { background-color : #F5F5BF; }
input.mainoption {background-color : #F5F5BF; font-weight : normal;}
input.liteoption {background-color : #F5F5BF;font-weight : normal;}

.vava:hover{ background-color: #F5F5BF;}
.profil_vava { background-color : #F5F5BF; }


.namecat {
background-image: url("http://img801.imageshack.us/img801/9338/barrecouleur.png");
padding-bottom:0px;
padding-top:5px;
padding-bottom:5px;
letter-spacing: 2px;
border-left : 1px solid #4B1414;
border-right : 1px solid #4B1414;
border-bottom : 0px solid #4B1414;
font-family: Georgia;
margin-left:60px;
margin-right:200px;
margin-top:-10px;
color: #B39A88;
margin-bottom:-20px;
border-top: 1px solid #4B1414;
border-radius: 60px 60px 0px 0px;;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:60px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topright:60px;
}

.linf {
background-color:#913631;
display:block;
text-align:center;
margin-top:-13px;
border:2px solid #881F30;
border-top:0px solid #881F30;
margin-left:20px;
margin-right:100px;
font-family:georgia;
font-size:11px;
-moz-border-radius: 0px 0px 40px 40px;
border-radius: 0px 0px 40px 40px;
padding:5px;
}


.cata {
background-image: url("http://i52.tinypic.com/24me4v6.png");
border:1px solid #913631;
border-bottom:0px solid white;
margin-bottom:5px;
-moz-border-radius:20px 20px 3px 3px;
border-radius:20px 20px 3px 3px;
padding:3px;
width:160px;}

.catb {
background-image: url("http://i52.tinypic.com/24me4v6.png");
-moz-border-radius:3px 3px 20px 20px;
border-radius:3px 3px 20px 20px;
border:1px solid #913631;
border-top:0px solid white;
padding:3px;
width:160px;}

.categ {
background-color:#913631;
padding:10px;
-moz-border-radius:60px 0px 60px 0px;
border-radius:60px 0px 60px 0px;
margin:10px;
border:2px solid #881F30;}

.postbody {display: block; padding-left: 15px; padding-right: 15px; line-height:16px; text-align:justify; font-size:12px;}
tr.post span.gensmall {display : none;}

a.forumlink {
color:#A85F5C;
font-family:georgia;
font-size:18px;
font-weight: normal;
letter-spacing:-1px;
text-align:center;
font-family:18px;
display:block;
}

.forum-sousforum {
      color: #A85F5C;
      border: 3px solid #A85F5C;
      border-top: 0px !important;
      -moz-border-radius-bottomleft: 14px;
      -moz-border-radius-bottomright: 14px;
      -webkit-border-bottom-right-radius: 14px;
      -webkit-border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      border-bottom-left-radius: 14px;
      margin: auto;
      padding: 4px;
      color: #A85F5C;
      width: 50%;
      text-align: center;
      height: 14px;
      font-size: 11px;
}



/* QEEL */

.onglet { background-color:#913631 ;
padding-right:4px;
text-transform:lowercase;
background-color: #913631;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
 font-family: georgia;
font-weight: bold; text-align: center;
color: #d49161;}
 


.message { background-color:#913631;
width: 450px !important;
 padding-top: 5px;
 padding-bottom: 5px;
padding-left: 10px;
 padding-right: 10px;
font-family: georgia;
text-align: center;
color: #913631;}


.message { background-color: #913631;
background-image : url('http://i51.tinypic.com/25ahifq.jpg') ;
background-repeat : repeat ;
 padding-top: 5px;
 padding-bottom: 5px;
padding-left: 10px;
 padding-right: 10px;
font-family: georgia;
text-align: center;
color: #913631;}

/* CSS INFOBULLE */

a.imginfo {
  position: relative;
  color: #B8A8A5;
  text-decoration: none;
  border-bottom: 1px #B8A8A5 solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: -100px; /* on positionne notre infobulle */
  left: 100px;
  width:450px; /*largeur de l'infobulle*/
  background: white;
  color: #B8A8A5;
  padding: 1px;
  border: 0px solid grey;
  border-left: 2px solid #CCBB9D;
  border-right: 3px solid #FFFFFF;
  border-top: 3px solid #FFFFFF;
  border-bottom: 2px solid #CCBB9D;
}


/* FICHES */

.fiche2 { font-style:normal ;color:#bd163b;letter-spacing:1px; text-shadow: #000000 1px 1px 2px;font-family: georgia; font-size: 32px; } /* TITRE DES FICHES */

.imghab {
opacity : 0.5 }

.imghab:hover{
opacity : 1 }

.pres1 {border: solid #592E28 05px; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px;width :435px;height:50px ;} /* NOM ET PRENOM CONTOUR */

et mon index box :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

        <!-- END switch_user_logged_in -->
       
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN cathead -->
<table width="100%">
    <tr>
      <th colspan="2" nowrap="nowrap" width="100%" class="secondarytitle">
          <div class="namecat"><h{catrow.cathead.LEVEL} class="hierarchy">{catrow.cathead.CAT_TITLE}</h{catrow.cathead.LEVEL}></div>
      </th>
  </tr>
</table><!-- END cathead -->
       
  <table class="forumline" width="100%" style="position: relative;" border="0" cellspacing="0" cellpadding="0">     
  <!-- BEGIN forumrow -->
  <tr>
  <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="15"><img src="{SPACER}" height="0" width="15" 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="1" valign="top" width="100%" height="05"><div class="categ"><table width="100%"><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></table><table><tr><td width="100%">
        <span class="genmed"><div style="text-align:justify;">{catrow.forumrow.FORUM_DESC}</span>
      <!-- BEGIN switch_moderators_links --><!-- END switch_moderators_links --></td>
      <td><!-- BEGIN forum_link_no --><td align="center" valign="middle" height="05"><div class="cata"><span class="gensmall">{catrow.forumrow.TOPICS} sujets || {catrow.forumrow.POSTS} messages</span></div><div class="catb"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td><!-- END forum_link_no -->
      </tr></table></div><table width="100%"><tr><td><div class="linf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div></td></tr></table></td></tr>
<!-- BEGIN forum_link -->
<!-- END forum_link --><!-- END forumrow -->

<!-- BEGIN catfoot -->
  <tr>
<!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="15"><img src="{SPACER}" height="0" width="30" /></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 --></table>

  <!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="3" width="1" /><!-- END tablefoot --><!-- END catrow -->

L'adresse de mon forum pour voir comment j'avais déjà touché au catégorie, mais j'aimerais pouvoir garder a l'intérieur des onglets les forums présentés tels quels
http://new-york-i-loveyou.forumactif.org/

Merci d'avance et si je ne suis pas claire je me ré expliquerais sans problèmes !


Dernière édition par Luna-C le Dim 28 Aoû 2011 - 16:29, édité 1 fois

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Dim 28 Aoû 2011 - 16:13

Bonjour

aller dans PA > Affichage > Structure & Hiérarchie et mettez sur Moyen séparer les catégories de l'index.

Est-ce mieux ?

Cordialement.

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

Message par Luna-C le Dim 28 Aoû 2011 - 21:08

c'est mieux merci, mais la présentation est spéciale :s

http://nyily-test.forumactif.org/forum

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Dim 28 Aoû 2011 - 21:44

Alors déjà il faut qu'une partie soit visible (mais pas forcément accessible ) aux invités dans chaque catégorie.

Ensuite vous pouvez personnaliser en adaptant dans la css le .actif pour l'onglet actif et le .onglet pour les autres à votre gout ^^

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

Message par Luna-C le Dim 28 Aoû 2011 - 21:52

Alors j'ai modifié mon template :

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/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>

<table id="conteneur_onglets">
  <tr>
      <td OnMouseOver="change_categorie(1)">nom onglet 1</td>
      <td OnMouseOver="change_categorie(2)">nom onglet 2</td>
      <td OnMouseOver="change_categorie(3)">nom onglet 3</td>
      <td OnMouseOver="change_categorie(4)">nom onglet 4</td>
      <td OnMouseOver="change_categorie(5)">nom onglet 5</td>
<!--  <td OnMouseOver="change_categorie(Y)">nom onglet Y</td>  -->
  </tr>
</table>

<script type="text/javascript">

  function change_categorie(numero)
  {
      if($('.categorie:eq('+(numero-1)+')').size() != 0)
      {
        $('.categorie').css("display","none");
        $('#conteneur_onglets .actif').removeClass("actif");
       
        $('#conteneur_onglets td:eq('+(numero-1)+')').addClass("actif");
        $('.categorie:eq('+(numero-1)+')').fadeIn();
      }
      else
      {
        alert("Vous n'avez pas accès à cette catégorie")
      }
  } 

  $("document").ready(function()
  {
      if($(".categorie").size() > 1)
      {
        if($("#conteneur_onglets").is("table"))
        {
            $("#conteneur_onglets").css("display","table");
        }
        else
        {
            $("#conteneur_onglets").css("display","block");
        }
      }

      change_categorie(1);
  })
 
</script>

</div><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<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="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>
      <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>
   </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 -->

Mais du coup je n'arrive pas a euh comment m'expliquer faire correspondre les catégories justement je pense que c'est peut être ce que vous voulez dire par " Alors déjà il faut qu'une partie soit visible (mais pas forcément accessible ) aux invités dans chaque catégorie. "

je suis déolé j'ai un peu de mal avec ce tuto/code

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Dim 28 Aoû 2011 - 22:06

Et en remplaçant le code de votre template :
Code:
<table id="conteneur_onglets">
  <tr>
      <td OnMouseOver="change_categorie(1)">nom onglet 1</td>
      <td OnMouseOver="change_categorie(2)">nom onglet 2</td>
      <td OnMouseOver="change_categorie(3)">nom onglet 3</td>
      <td OnMouseOver="change_categorie(4)">nom onglet 4</td>
      <td OnMouseOver="change_categorie(5)">nom onglet 5</td>
<!--  <td OnMouseOver="change_categorie(Y)">nom onglet Y</td>  -->
  </tr>
</table>
 
<script type="text/javascript">
 
  function change_categorie(numero)
  {
      if($('.categorie:eq('+(numero-1)+')').size() != 0)
      {
        $('.categorie').css("display","none");
        $('#conteneur_onglets .actif').removeClass("actif");
     
        $('#conteneur_onglets td:eq('+(numero-1)+')').addClass("actif");
        $('.categorie:eq('+(numero-1)+')').fadeIn();
      }
      else
      {
        alert("Vous n'avez pas accès à cette catégorie")
      }
  }
 
  $("document").ready(function()
  {
      if($(".categorie").size() > 1)
      {
        if($("#conteneur_onglets").is("table"))
        {
            $("#conteneur_onglets").css("display","table");
        }
        else
        {
            $("#conteneur_onglets").css("display","block");
        }
      }
 
      change_categorie(1);
  })
 
</script>
par celui d'origine du générateur ?
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 onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">onglet 1</li>
<li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">onglet 2</li>
<li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">onglet 3</li>
<li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">onglet 4</li>
<li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">onglet 5</li>
<li onMouseOver="change_cat(6)" class="onglet " id="onglet_6">onglet 6</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 -->

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

Message par Luna-C le Dim 28 Aoû 2011 - 22:13

cela m'indique " La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte. "

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Dim 28 Aoû 2011 - 22:14

Vous avez du faire une erreur en copiant collant. Rendez-moi votre template que je vérifie ^^

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

Message par Luna-C le Dim 28 Aoû 2011 - 22:17

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/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 onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">onglet 1</li>
<li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">onglet 2</li>
<li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">onglet 3</li>
<li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">onglet 4</li>
<li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">onglet 5</li>
<li onMouseOver="change_cat(6)" class="onglet " id="onglet_6">onglet 6</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 -->
 
</div><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<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="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>
      <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>
  </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 -->

voila merci de votre patience Very Happy

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Dim 28 Aoû 2011 - 22:27

Code:
   
        </div><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

supprimez cette partie de votre template ^^

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

Message par Luna-C le Dim 28 Aoû 2011 - 22:36

C'est mieux merci Very Happy
Mais avec ce code je n'arrive pas a présenter mes onglets les uns a coté des autres comme dans le modéle forum berkley

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Dim 28 Aoû 2011 - 22:39

Il vous suffit de personnaliser la css : dans
Code:
.onglet { background-color:#913631 ;
padding-right:4px;
text-transform:lowercase;
background-color: #913631;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
 font-family: georgia;
font-weight: bold; text-align: center;
color: #d49161;}

ajoutez: display:inline-block; avant }

et personnaliser l'onglet actif avec
.actif {
vos propriétés
}

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

Message par Luna-C le Dim 28 Aoû 2011 - 23:06

je suis vraiment nulle mais je ne sais pas du tout personnaliser

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Dim 28 Aoû 2011 - 23:09

Je vous invite à parcourir ceci : CSS et propriétés

Wink vous y trouverez comment faire vos personnalisation à l'intérieur des codes que je vous ai donné.

Cordialement.

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

Message par Luna-C le Dim 28 Aoû 2011 - 23:13

Merci beaucoup pour votre aide =D

Luna-C
**

Messages : 54
Inscrit(e) le : 05/06/2009

http://new-york-i-loveyou.forumactif.org/forum.htm
Luna-C a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets

Message par SoraNoHime le Lun 29 Aoû 2011 - 2:32

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

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.

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