Positionnement des onglets des catégories

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

Résolu Positionnement des onglets des catégories

Message par piman le Mer 31 Aoû 2011 - 18:13

Bonjour !!

J'ai un petit problème de code au niveau de mon template index_box pour mes catégories.
Enfin j'ai suivi ce tutoriel pour réussir à faire mes propres catégories à onglet. Sauf que j'aimerais changer quelques trucs parce que ça me plait pas tout à fait ^^'

J'aimerais que les onglets soit centrer, sur une ligne et qu'il y est un contour rond si possible Smile

voilà ce que ça donne
Spoiler:

Voilà mon template index_box :
Spoiler:
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>

<div id="conteneur_onglets">
      <div OnClick="change_categorie(1)">Premier Onglet</div>
      <div OnClick="change_categorie(2)">Deuxième Onglet</div>
      <div OnClick="change_categorie(3)">Troisième Onglet</div>
      <div OnClick="change_categorie(4)">Quatrième Onglet</div>
      <div OnClick="change_categorie(5)">Cinquième Onglet</div>
<!--  <div OnClick="change_categorie(6)">Sixième Onglet</div>  -->
</div>

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


<!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <th nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
  </tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- 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="row1" width="100%"><table class="catcadre"><tr><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></tr></table></td>
      <td class="row3 over" align="center" valign="middle" height="50">
            <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;" class="dersuj">
                <span class="gensmall">{catrow.forumrow.LAST_POST}
{catrow.forumrow.POSTS} Message | {catrow.forumrow.TOPICS} Sujets</span></div>
          </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" /></div><!-- END tablefoot --><!-- END catrow -->

Et voilà mon CSS (et oui que de choses !!) :
Spoiler:
Code:
body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}
table.forumline {border:1px dotted;}a:hover{text-transform:uppercase;}

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

.quote, .code, .hide
{border: 1px dotted #95a1b3;
background-color:#6a82a6;
-moz-border-radius: 12px;
padding: 4px;}

a
{font-family: calibri;
text-shadow: 1px 1px 1px #000000;}

input.mainoption , input.liteoption
{background-color: #5b607e;
-moz-border-radius: 10px;}

.forumline
{-moz-border-radius: 6px;
border: 3px solid;}

body
{margin-top: -9px;
margin-bottom: -9px;}


/* Catégorie en Onglet*\

#conteneur_onglets
{
  width: 100%;
  display: none;
  margin-top: 20px;
  text-align: center;
  border-collapse: collapse;
}


#conteneur_onglets td
{
  cursor: pointer;
}

.actif
{
  background: red;
}

En tout cas, merci beaucoup d'avance !! C'est mon tout premier forum et j'aimerais vraiment qu'il soit parfait, alors pour tous ceux qui m'aideront, merci beaucoup beaucoup !


Dernière édition par piman le Dim 11 Sep 2011 - 19:35, édité 2 fois

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par piman le Jeu 1 Sep 2011 - 15:19

Petit Up ^^'

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par shirabi le Jeu 1 Sep 2011 - 22:46

Je ne peux pas vous dire si je vais ou pas vous aider car je ne suis pas fort en Template, toutes fois si vous n'aviez pas modifier votre template index_box avant cette manipulation pour vos onglet, je pourrais vous aidez.

En gros: Avez vous fait autre chose sur votre template Index_Box appart vos onglet?

Cordialement.

shirabi
****

Masculin
Messages : 304
Inscrit(e) le : 26/06/2011

http://yob-rpg.kanak.fr/
shirabi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par piman le Ven 2 Sep 2011 - 0:57

Oula... oui j'ai fait beaucoup de choses dessus et il y a un peu près tout de changer malheureusement ^^'

Enfin si tu ne sais pas comment faire, tant pis, quelqu'un d'autre trouvera, merci quand même Smile

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par shirabi le Ven 2 Sep 2011 - 1:11

ok ^^ au cas ou vas voir ces deux autre sujets si tu c'est retoucher les Templates :
http://forum.forumactif.com/t311835-page-d-accueil-a-plusieurs-onglets

http://forum.forumactif.com/t312225-affichage-des-sous-forum-disparue?highlight=sous+forum+disparu

Utilise le Index_Box du 2e que j'ai mis.

shirabi
****

Masculin
Messages : 304
Inscrit(e) le : 26/06/2011

http://yob-rpg.kanak.fr/
shirabi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par piman le Ven 2 Sep 2011 - 2:58

Merci ^^ Je vais chercher un peu là dedans mais je serais pas contre une petite aide en plus :d

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par piman le Sam 3 Sep 2011 - 17:43

Petit Up ! Smile

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par piman le Lun 5 Sep 2011 - 21:54

Personne pour m'aider ? Sad

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par Invité le Ven 9 Sep 2011 - 18:28

Bonjour,

Lorsqu'on étudie votre template, on se rend compte que les onglets sont des div contenues dans une div qui a un id. Donc il faut reprendre cet id et ajouter div derrière pour en faire l'identifiant CSS dont on a besoin.
Ajoutez ceci à la fin de votre CSS, pour que les onglets soient alignés:
Code:
#conteneur_onglets div{
   display: inline-block;
   border: 1px solid black;
   margin-left: 2px;
   margin-right: 2px;
   padding: 2px;}
J'ai ajouté un contour (border), une marge extérieur à droite et à gauche pour décoller les onglets (margin) et une marge intérieure autour du texte (padding), tout ceci est à personnaliser à votre convenance.
Si vous souhaitez arrondir les angles, vous pouvez le faire en ajoutant les propriétés ci dessous avant l'accolade de fermeture } :
Code:
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par piman le Dim 11 Sep 2011 - 15:56

Ah !! Merci pour cette réponse ^^
Malheureusement j'ai essayé et ça n'a rien changé du tout... une autre idée ? ^^'

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par Invité le Dim 11 Sep 2011 - 16:05

Bonjour,

Et pourtant sur mon forum test, ça fonctionne, click! .

Il y a une faute dans vos commentaires, vous avez mis /* Catégorie en Onglet*\ alors qu'il faut mettre /* Catégorie en Onglet*/ .

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement des onglets des catégories

Message par piman le Dim 11 Sep 2011 - 19:25

Ah oui zut ! Quelle idiote ><"
En tout cas après correction... ça marche !! Merci beaucoup !!
Franchement là si je pouvais je t'embrasserais x)

Le problème est résolu alors ! Encore merci beaucoup !

piman
**

Féminin
Messages : 98
Inscrit(e) le : 27/04/2011

http://shadowofdeath.forumactif.com
piman 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