Accueil
Créer un forumCode/script onglets catégories
3 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
Code/script onglets catégories
par Pomme Golden 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 ^^ :
Le script des onglets uniquement :
le template index_box :
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 )
je vous remercie infiniment de votre aide <3
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:
- Spoiler:
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- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Anzu Lun 20 Déc 2010 - 12:22
Coucou ^^
Dans l'index box, il faut changer les
Pour l'arrondi, il faut rajouter dans le css onglet actif et inactif ceci:
Cordialement.
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;
Cordialement.
Anzu- Membre actif
-
Messages : 20685
Inscrit(e) le : 30/08/2007 -
Re: Code/script onglets catégories
par Pomme Golden 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 ? )
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- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Anzu Lun 20 Déc 2010 - 12:56
Si je vous ai donné ceci:
Ce n'est pas pour rien, ce n'est pas pareil que:
il manque le tiret
- 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
Anzu- Membre actif
-
Messages : 20685
Inscrit(e) le : 30/08/2007 -
Re: Code/script onglets catégories
par Pomme Golden 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!:
vais réessayer ^^
* Donc j'ai changé..boah ça marche toujours pas :lol!:
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Anzu Lun 20 Déc 2010 - 13:20
Si si ca marche
Mais vous devez utiliser IE c'est pour ca, et IE n'aime pas les arrondis
Anzu- Membre actif
-
Messages : 20685
Inscrit(e) le : 30/08/2007 -
Re: Code/script onglets catégories
par Pomme Golden Lun 20 Déc 2010 - 13:22
J'utilise google chrome 
( lui auchi il aime pô ça ? )
édit avec :
ça marche sous google chrome
Par contre ça fait pas très onglet toussa, mais boutons >_<'
edit 02 :
avec les valeurs :
ça fait plus "onglet"
Edit 03 (lol) Alors il ne me reste que ceci :
- qui n'apparaît que sous google chrome -
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
( 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:
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- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Pomme Golden 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 :
Css :
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 !
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- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Anzu 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- Membre actif
-
Messages : 20685
Inscrit(e) le : 30/08/2007 -
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Pomme Golden Mer 22 Déc 2010 - 17:22
UP ! 
j'ai toujours mon soucis de cardre gris sous google chrome ^^
j'ai toujours mon soucis de cardre gris sous google chrome ^^
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Pomme Golden Jeu 23 Déc 2010 - 18:27
Up pour le cadre gris ^^
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Pomme Golden Sam 25 Déc 2010 - 20:45
Pomme Golden a écrit:
Always :lol!:
Noyeux Joël à tous ! <3
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Code/script onglets catégories
par Kaktus 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:
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;
}
Kaktus- ***
-
Messages : 160
Inscrit(e) le : 12/12/2010 -
Re: Code/script onglets catégories
par Pomme Golden Jeu 6 Jan 2011 - 8:52
merci !!
C'est vrai on résolu le problème avec cha ^^
C'est vrai on résolu le problème avec cha ^^
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Sujets similaires» Problème code javascript permettant d'afficher plusieurs catégories dans des onglets
» Script de catégories en onglets et forums invisibles
» Code catégories en onglets ne fonctionne pas
» Problème code catégories onglets
» Code pour catégories en onglets ne marche pas
» Script de catégories en onglets et forums invisibles
» Code catégories en onglets ne fonctionne pas
» Problème code catégories onglets
» Code pour catégories en onglets ne marche pas
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