Soucis d'apparition d'onglet
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Soucis d'apparition d'onglet
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.
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:
Voici mon css:
Et mon template:
Merci d'avance pour l'aide ^^
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 - 23:13, édité 1 fois
Re: Soucis d'apparition d'onglet
Un petit up...
Re: Soucis d'apparition d'onglet
Up...
J'ai réussi à plus ou moins mettre un écart entre chacune des sections mais toujours pas de Background pour les faire ressortir...
J'ai réussi à plus ou moins mettre un écart entre chacune des sections mais toujours pas de Background pour les faire ressortir...
Re: Soucis d'apparition d'onglet
Bonjour.
Je peux avoir votre nouveau code actuel, modifié ?
C'est à dire template index_box et css.
Cordialement,
Lixyr.
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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Soucis d'apparition d'onglet
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:
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
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
Re: Soucis d'apparition d'onglet
Alors j'ai réussi à trouver ça :
Voici votre css :
et votre template index_box :
Voici ce que j'ai modifié :
* dans le css :
* j'ai rajouté la classe :
* dans la classe onglet :
j'ai rajouté ceci :
=> 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. ^^
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;
}
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 -->
Voici ce que j'ai modifié :
* dans le css :
* j'ai rajouté la classe :
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..actif { background-color:red !important;}
* 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. ^^
Re: Soucis d'apparition d'onglet
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 ^^
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 ^^
Re: Soucis d'apparition d'onglet
Ah ^^ ! J'en suis contente.
Bonne continuation à vous.
Bonne continuation à vous.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Sujets similaires
» Soucis avec Barre de navigation + Soucis de profil (infobulle & Onglet 'en ligne')
» Soucis PA
» Soucis de pop up
» soucis de PA.
» Soucis CB
» Soucis PA
» Soucis de pop up
» soucis de PA.
» Soucis CB
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum