Positionnement des onglets des catégories
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Positionnement des onglets des catégories
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
voilà ce que ça donne
Voilà mon template index_box :
Et voilà mon CSS (et oui que de choses !!) :
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 !
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
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
Re: Positionnement des onglets des catégories
Petit Up ^^'
Re: Positionnement des onglets des catégories
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.
En gros: Avez vous fait autre chose sur votre template Index_Box appart vos onglet?
Cordialement.
Re: Positionnement des onglets des catégories
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
Enfin si tu ne sais pas comment faire, tant pis, quelqu'un d'autre trouvera, merci quand même
Re: Positionnement des onglets des catégories
ok ^^ au cas ou vas voir ces deux autre sujets si tu c'est retoucher les Templates :
https://forum.forumactif.com/t311835-page-d-accueil-a-plusieurs-onglets
https://forum.forumactif.com/t312225-affichage-des-sous-forum-disparue?highlight=sous+forum+disparu
Utilise le Index_Box du 2e que j'ai mis.
https://forum.forumactif.com/t311835-page-d-accueil-a-plusieurs-onglets
https://forum.forumactif.com/t312225-affichage-des-sous-forum-disparue?highlight=sous+forum+disparu
Utilise le Index_Box du 2e que j'ai mis.
Re: Positionnement des onglets des catégories
Merci ^^ Je vais chercher un peu là dedans mais je serais pas contre une petite aide en plus :d
Re: Positionnement des onglets des catégories
Personne pour m'aider ?
Re: Positionnement des onglets des catégories
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:
Si vous souhaitez arrondir les angles, vous pouvez le faire en ajoutant les propriétés ci dessous avant l'accolade de fermeture } :
Cordialement.
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;}
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é
Re: Positionnement des onglets des catégories
Ah !! Merci pour cette réponse ^^
Malheureusement j'ai essayé et ça n'a rien changé du tout... une autre idée ? ^^'
Malheureusement j'ai essayé et ça n'a rien changé du tout... une autre idée ? ^^'
Re: Positionnement des onglets des catégories
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.
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é
Re: Positionnement des onglets des catégories
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 !
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 !
Sujets similaires
» Catégories en Onglets.
» (Categories par onglet) .. Placement des onglets de catégories.
» (Catégories par onglets) Titres de catégories en image.
» Catégories par onglets et catégories comprimées
» Catégories par onglets!
» (Categories par onglet) .. Placement des onglets de catégories.
» (Catégories par onglets) Titres de catégories en image.
» Catégories par onglets et catégories comprimées
» Catégories par onglets!
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum