Code/script onglets catégories

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

Résolu Code/script onglets catégories

Message par Pomme Golden le Sam 18 Déc 2010 - 21:56

Bonsoir à tous !

Bon je viens vers vous pour un petit soucis de script onglets catégorie.
Nous avons créés un forum bêta pour éviter de bidouiller sur le notre et que cela soit la pagaille.

je viens vous demander votre aide car je ne sais absolument pas comment me dépatouiller pour obtenir les onglets souhaités T_T

Voici le CSS entier car on va prendre ce design dès le 31 décembre ^^ :

Spoiler:
Code:
/* General */

body
{
  margin: 0px;
}

.bodyline
{
  border: 0px;
  background: transparent;
}

.forumline
{
  border: 0px;
}

a:link, a:visited
{
  text-decoration: none;
}

a:hover
{
  text-shadow: #4A4A4A 0px 0px 2px;
  text-decoration: none !important;
}

/* Menue */

a.mainmenu:link, a.mainmenu:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  border: 1px solid #444444;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}

a.mainmenu:hover
{
  border: 1px dotted black;
}


/* Page accueil */

#page_accueil  /* Toute la page accueil */
{
  margin: auto; /* Centre le tableau */
  text-align: center;
  background: url("http://nsa20.casimages.com/img/2010/09/11/10091102410440915.png") repeat;
  padding: 15px;
  border: 1px;
}

.case
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png") repeat;
  padding: 5px;
  border: 0px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.navigation
{
  background: url("http://nsa15.casimages.com/img/2010/07/15/100715101126275775.png");
  color: #666666;
  text-align: center;
  display: block;
  border-left: 3px solid #444444;
  border-right: 3px solid #444444;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.navigation:hover, a.navigation:hover:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #eeeeee;
  display: block;
}
.defilement
{
  overflow: auto;
  width: 360px;
  height: 380px;
}

/* Onglets */
.onglet
{
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    padding: 3px;
    border: 1px solid black;
    border-radius-topright: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-radius-topleft: 10px;
    cursor:pointer;
}

.onglet_0
{
  background: url("http://nsa20.casimages.com/img/2010/09/11/10091102410440915.png") repeat;
  border-bottom: 1px solid black;
}

.onglet_1
{
  background: url("http://nsa14.casimages.com/img/2010/04/19/100419054823223389.png") repeat;
  border-bottom: 0px;
  padding-bottom: 4px;
  text-shadow: #4A4A4A 0px 0px 3px;
}

.contenu_onglet
{
  background: url("http://nsa14.casimages.com/img/2010/04/19/100419054823223389.png") repeat;
  border: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top: -1px;
  padding: 5px;
  display: none;
}

/* Infobulle */
a.infobulle
{
  position: relative;
}

a.infobulle span
{
  display: none; /* ceci masque l'infobulle */
}

a.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}

a.infobulle:hover span
{
  display: inline; /* ceci 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: -150px; /* on positionne notre infobulle */
  left: -50px;
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png") repeat; /* arrière-plan de l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 1px solid black;
  border-left: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Forum */

/* Liens des catégories*/
a.forumlink:link, a.forumlink:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #eeeeee;
  text-align: center;
  display: block;
  border: 1px solid #444444;
  border-left: 5px solid #444444;
  border-right: 5px solid #444444;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.forumlink:hover, a.forumlink:hover:visited
{
  background: url("http://nsa15.casimages.com/img/2010/07/15/100715101126275775.png");
  color: #666666;
  display: block;
}

/* Description du forum */
.forum-description
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  margin: auto;
  padding: 10px;
  color: #000000;
  width: 80%;
  border: 1px solid #444444;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  font-size: 12px;
}

/* Nombres messages et sujets */
.forum-stats
{
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  border-bottom: 0 none !important;
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  border-top: 1px solid #444444;
  color: #000000;
  font-size: 11px;
  font-style: italic;
  height: 14px;
  left: 280px;
  padding: 3px;
  position: relative;
  text-align: center;
  width: 200px;
}

/* Sous-forums */
.forum-sousforum
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #000000;
  border: 1px solid #444444;
  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: #000000;
  width: 50%;
  text-align: center;
  height: auto;
  font-size: 11px;
}


/* QEEL */

#qeel
{
  text-align: center;
  background: url("http://nsa14.casimages.com/img/2010/04/19/100419054823223389.png") repeat;
  border: 1px solid #4b4b4b;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.text {
color#046380;
cursor:pointer;
}

#cat_Forum et Blog,#cat_Membre et Flood,#cat_Mangas et ScanTrad,#cat_Animés et Dramas {
padding-top:4px;
}

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

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

.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://www.backgroundlabs.com/backgrounds/42.jpg') no-repeat;
width:140px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('http://www.backgroundlabs.com/backgrounds/45.jpg') no-repeat; /*URL de l'onglet étant inactif*/
width:100px; /*Largeur de l'onglet étant inactif*/
height:40px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
}

Le script des onglets uniquement :

Spoiler:
Code:
.text {
color#046380;
cursor:pointer;
}

#cat_Forum et Blog,#cat_Membre et Flood,#cat_Mangas et ScanTrad,#cat_Animés et Dramas {
padding-top:4px;
}

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

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

.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://www.backgroundlabs.com/backgrounds/42.jpg') no-repeat;
width:140px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('http://www.backgroundlabs.com/backgrounds/45.jpg') no-repeat; /*URL de l'onglet étant inactif*/
width:100px; /*Largeur de l'onglet étant inactif*/
height:40px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
}

le template index_box :

Spoiler:
Code:
<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">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">

 
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Forum et Blog</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Membre et Flood</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Mangas et ScanTrad</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Animés et Dramas</li>



</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="forumline" id="' + nom_cat[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 -->

le forum bêta utilisé :

se trouve ici

Notre forum :

lui est ici

je suis co-admin
je navigue sous google chrome.

Donc les petits problèmes sont :

1 je voudrais que les onglets soient cliquables pour passer de l'un à l'autre ( et non au passage de la souris )
2 qu'il soient de ce genre : (plus arrondis )
Spoiler:
3 ceci :
Spoiler:
4 Que les onglets soient accolés à la première catégorie - sans espaces -

je vous remercie infiniment de votre aide <3


Dernière édition par Pomme Golden le Jeu 6 Jan 2011 - 8:52, édité 1 fois

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Lun 20 Déc 2010 - 9:34

Up !

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Anzu le Lun 20 Déc 2010 - 12:22

Coucou ^^

Dans l'index box, il faut changer les

Code:
onMouseOver par onClick

Pour l'arrondi, il faut rajouter dans le css onglet actif et inactif ceci:
Code:
-moz-border-radius: 10px 10px 10px 10px;
A vous de modifier la valeur des px.

Cordialement.


Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

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

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Lun 20 Déc 2010 - 12:48

Merci Anzu !!

Alors pour le clic : nickel !

par contre pour le style de l'onglet : ça marche pô ( ai-je fais un truc de travers ? )

Spoiler:
Code:
.onglet_actif {
background: url('http://hitskin.com/themes/16/19/06/i_back_title.png') no-repeat;
width:140px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
moz-border-radius: 10px 10px 10px 10px;
}

.onglet_nactif {
background:url('http://hitskin.com/themes/16/19/06/i_back_title.png') no-repeat; /*URL de l'onglet étant inactif*/
width:100px; /*Largeur de l'onglet étant inactif*/
height:40px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
moz-border-radius: 10px 10px 10px 10px;
}

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Anzu le Lun 20 Déc 2010 - 12:56

Si je vous ai donné ceci:
Code:
-moz-border-radius: 10px 10px 10px 10px;

Ce n'est pas pour rien, ce n'est pas pareil que:

Code:
moz-border-radius: 10px 10px 10px 10px;

il manque le tiret Razz

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

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

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Lun 20 Déc 2010 - 13:15

Ah parce que j'ai essayé avec le tiret : ça ne marchait pas, du coup je l'ai enlevé, ça ne marchait pas non plus lol!

vais réessayer ^^

* Donc j'ai changé..boah ça marche toujours pas lol!

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Anzu le Lun 20 Déc 2010 - 13:20


Si si ca marche Razz
Mais vous devez utiliser IE c'est pour ca, et IE n'aime pas les arrondis Mr. Green

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

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

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Lun 20 Déc 2010 - 13:22

J'utilise google chrome Laughing ( lui auchi il aime pô ça ? )

édit avec :

Code:
-webkit-border-radius:

ça marche sous google chrome

Par contre ça fait pas très onglet toussa, mais boutons >_<'

edit 02 :

avec les valeurs :

Code:
10px 10px 0 0

ça fait plus "onglet"

Edit 03 (lol) Alors il ne me reste que ceci :

- qui n'apparaît que sous google chrome -
Spoiler:

supprimer l'encadrement autour des onglets c'est trouvé

j'ai essayé de changer la couleur du texte des onglets sans succès ^^

Et j'aimera savoir où modifier pour que les onglets se trouvent complètement à droite au lieu d'être centré ^^

merkiii <3

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Mar 21 Déc 2010 - 12:23

Up

Aidez-moi pour mon soucis de cadre gris qui apparaît que sous google chrome ^^ et quant on clique sur les onglets (voir spoil ci-dessus )

template index box :

Spoiler:
Code:
<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">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">

 
<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">Forum et Blog</li>
<li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Membre et Flood</li>
<li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Mangas et ScanTrad</li>
<li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">Animés et Dramas</li>



</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="forumline" id="' + nom_cat[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="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">
<table width="100%"><tbody><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><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
<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 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 -->

Css :

Spoiler:
Code:
/* General */

body
{
  margin: 0px;
}

.bodyline
{
  border: 0px;
  background: transparent;
}

.forumline
{
  border: 0px;
}

a:link, a:visited
{
  text-decoration: none;
}

a:hover
{
  text-shadow: #4A4A4A 0px 0px 2px;
  text-decoration: none !important;
}

/* Menue */

a.mainmenu:link, a.mainmenu:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  border: 1px solid #444444;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}

a.mainmenu:hover
{
  border: 1px dotted black;
}


/* Page accueil */

#page_accueil  /* Toute la page accueil */
{
  margin: auto; /* Centre le tableau */
  text-align: center;
  background: url("http://nsa20.casimages.com/img/2010/09/11/10091102410440915.png") repeat;
  padding: 15px;
  border: 1px;
}

.case
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png") repeat;
  padding: 5px;
  border: 0px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.navigation
{
  background: url("http://nsa15.casimages.com/img/2010/07/15/100715101126275775.png");
  color: #666666;
  text-align: center;
  display: block;
  border-left: 3px solid #444444;
  border-right: 3px solid #444444;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.navigation:hover, a.navigation:hover:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #eeeeee;
  display: block;
}
.defilement
{
  overflow: auto;
  width: 360px;
  height: 380px;
}

/* Onglets */
.onglet
{
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    padding: 3px;
    border: 1px solid black;
    border-radius-topright: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-radius-topleft: 10px;
    cursor:pointer;
}

.onglet_0
{
  background: url("http://nsa20.casimages.com/img/2010/09/11/10091102410440915.png") repeat;
  border-bottom: 1px solid black;
}

.onglet_1
{
  background: url("http://nsa14.casimages.com/img/2010/04/19/100419054823223389.png") repeat;
  border-bottom: 0px;
  padding-bottom: 4px;
  text-shadow: #4A4A4A 0px 0px 3px;
}

.contenu_onglet
{
  background: url("http://nsa14.casimages.com/img/2010/04/19/100419054823223389.png") repeat;
  border: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top: -1px;
  padding: 5px;
  display: none;
}

/* Infobulle */
a.infobulle
{
  position: relative;
}

a.infobulle span
{
  display: none; /* ceci masque l'infobulle */
}

a.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}

a.infobulle:hover span
{
  display: inline; /* ceci 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: -150px; /* on positionne notre infobulle */
  left: -50px;
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png") repeat; /* arrière-plan de l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
  border: 1px solid black;
  border-left: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Forum */

/* Liens des catégories*/
a.forumlink:link, a.forumlink:visited
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #eeeeee;
  text-align: center;
  display: block;
  border: 1px solid #444444;
  border-left: 5px solid #444444;
  border-right: 5px solid #444444;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

a.forumlink:hover, a.forumlink:hover:visited
{
  background: url("http://nsa15.casimages.com/img/2010/07/15/100715101126275775.png");
  color: #666666;
  display: block;
}

/* Description du forum */
.forum-description
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  margin: auto;
  padding: 10px;
  color: #000000;
  width: 80%;
  border: 1px solid #444444;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  font-size: 12px;
}

/* Nombres messages et sujets */
.forum-stats
{
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  border-bottom: 0 none !important;
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  border-top: 1px solid #444444;
  color: #000000;
  font-size: 11px;
  font-style: italic;
  height: 14px;
  left: 280px;
  padding: 3px;
  position: relative;
  text-align: center;
  width: 200px;
}

/* Sous-forums */
.forum-sousforum
{
  background: url("http://nsa15.casimages.com/img/2010/04/19/100419054922575590.png");
  color: #000000;
  border: 1px solid #444444;
  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: #000000;
  width: 50%;
  text-align: center;
  height: auto;
  font-size: 11px;
}


/* QEEL */

#qeel
.statistiques{
border:0px;
background-image: url("http://img41.imageshack.us/img41/8692/lignept.png");
background-repeat: no-repeat;
background-position: center;
height:270px;}
.text {
color#000000;
cursor:pointer;
}

.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}
.text {
color#333333;
cursor:pointer;
}

#cat_Forum et Blog,#cat_Membre et Flood,#cat_Mangas et ScanTrad,#cat_Animés et Dramas {
padding-top:4px;
}

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

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

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

.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://i65.servimg.com/u/f65/15/35/95/61/i_back10.png') no-repeat;
width:180px; /*Largeur de l'onglet étant actif*/
height:25px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
text-shadow: #4A4A4A 0px 0px 3px;
padding: 5px 20px;
margin: 0;
}

.onglet_nactif {
background:url('http://hitskin.com/themes/16/19/06/i_back_title.png') no-repeat; /*URL de l'onglet étant inactif*/
width:180px; /*Largeur de l'onglet étant inactif*/
height:25px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
padding: 5px 20px;
margin: 0;
}

.infobulle{
position: relative;
z-index: 0;}

.infobulle:hover{
background-color: transparent;
z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: none;}

.infobulle span img{
border: 2px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Blabla Box de Passion Manga"; }
body.chatbox {
background-image: url('http://img812.imageshack.us/img812/349/layoutbe.png');
}
.code
{
-moz-border-radius: 15px;
padding-left: 10px;
}
.quote
{
-moz-border-radius: 15px;
padding-left: 10px;
}
.button2{ -moz-border-radius: 5px;}
.bodyline{ -moz-border-radius: 10px;}
input,textarea, select {
border-radius: 10px 10px;
-moz-border-radius: 10px;
padding-left: 3px;
}

on utilise ce forumbêta pour bidouiller mais c'est pour le forum qui est dans mon profil :

forumbêta ici

C'est le grand lifting pour 2011 lol!

je vous remercie d'avance !

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Anzu le Mar 21 Déc 2010 - 12:29


Pour la bande grise, je n'en ai aucune idée, mais je vais regarder de plus près.

Pour la couleur du texte, dans onglet actif, rajoute simplement:

Code:
color: #code couleur;

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

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

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Mar 21 Déc 2010 - 16:54

Merci infiniment !!

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Mer 22 Déc 2010 - 17:22

UP !

j'ai toujours mon soucis de cardre gris sous google chrome ^^

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Jeu 23 Déc 2010 - 18:27

Up pour le cadre gris ^^

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Sam 25 Déc 2010 - 20:45

@Pomme Golden a écrit: Up pour le cadre gris ^^

Always lol!

Noyeux Joël à tous ! <3

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Lun 27 Déc 2010 - 13:37

UP

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Kaktus le Jeu 30 Déc 2010 - 22:32

Bonjour,
J'avais le même problème que toi en étant sous chrome, aussi. Et en cherchant un peu, j'ai trouvé sur CSSActif ceci à rajouter dans le CSS:
Code:
.forumline {
width: 100% !important;
}
Pour moi, cela à marcher, alors, je vous le "donne" Wink

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code/script onglets catégories

Message par Pomme Golden le Jeu 6 Jan 2011 - 8:52

merci !!

C'est vrai on résolu le problème avec cha ^^

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden 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