Adapter onglets catégories pour le codage catégorie Bouton_activeAdapter onglets catégories pour le codage catégorie Bouton_hoverAdapter onglets catégories pour le codage catégorie Fb-hoverAdapter onglets catégories pour le codage catégorie Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Adapter onglets catégories pour le codage catégorie EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Adapter onglets catégories pour le codage catégorie EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Adapter onglets catégories pour le codage catégorie EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Adapter onglets catégories pour le codage catégorie EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Adapter onglets catégories pour le codage catégorie EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Adapter onglets catégories pour le codage catégorie EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Adapter onglets catégories pour le codage catégorie EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Adapter onglets catégories pour le codage catégorie EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le Deal du moment :
Pokémon EV06 : où acheter le Bundle Lot ...
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Adapter onglets catégories pour le codage catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://ligue1.bbactif.com
g93
{ Membre }
{ Membre }

Masculin Messages : 16



Adapter onglets catégories pour le codage catégorie Empty
Bonjour,

En fait je m'explique ,j'ai utilisé un code pour les catégories en onglets notamment celui ci :

Code:
<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">
 
<div>
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Règles et Casting</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Fiches / RPG</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Le Sas</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Intérieur</li>
</div>
<div id="deuxieme_rang">
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Extérieur</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Partie Eliminés</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">Les Primes</li>
<li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Le Hors-Jeu</li>
</div>
</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7');

 
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 -->
<div class="noms-categories" style="margin-right:100px;">{catrow.tablehead.L_FORUM}</div>
<br />

<div style="padding: 0px;" class="categories" nowrap="nowrap" style="padding:10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td></tr><tr>
      <!-- END inc -->
<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">

</td></tr>
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">

        <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"  height="50" style="padding-right: 3px; padding-left: 3px;">




<script type="text/javascript">
<!--
capture_cat();
//-->
</script>   

<!-- FIN MODIF ONGLETS -->


Associé a cette partie de css :

Code:
text
{
color:#FF6347;
cursor:pointer;
}

#cat_Regles et Casting, #cat_Candidats et Cagnottes,#cat_le SAS d'Entree,#cat_Interieur de la Maison,#cat_Exterieur de la Maison,#cat_En Dehors de la Maison des Secrets,#cat_Les Primes, #cat_Hors Jeu
{
padding-top: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:20px;
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://i63.servimg.com/u/f63/14/63/59/97/onglet11.png') no-repeat;
width:130px;
height:40px;
cursor:pointer;
font-family : arial;
font-size : 8px;
padding-top : 5px;
}

.onglet_nactif {
background: url('http://i63.servimg.com/u/f63/14/63/59/97/onglet10.png') no-repeat;
width:130px;
height:30px;
cursor:pointer;
font-family : arial;
font-size : 8px;
padding-top : 5px;
}

Voila ce que sa donne quand j'essaye d'introduire le code dans l'index-box

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}<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">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">
 
<div>
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Règles et Casting</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Fiches / RPG</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Le Sas</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Intérieur</li>
</div>
<div id="deuxieme_rang">
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Extérieur</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Partie Eliminés</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">Les Primes</li>
<li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Le Hors-Jeu</li>
</div>
</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7');

 
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 -->
<div class="noms-categories" style="margin-right:100px;">{catrow.tablehead.L_FORUM}</div>
<br />

<div style="padding: 0px;" class="categories" nowrap="nowrap" style="padding:10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td></tr><tr>
      <!-- END inc -->
<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">

</td></tr>
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">

        <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"  height="50" style="padding-right: 3px; padding-left: 3px;">




<script type="text/javascript">
<!--
capture_cat();
//-->
</script>   

<!-- FIN MODIF ONGLETS -->
       
<h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</div></a>
            </span> 
        </h{catrow.forumrow.LEVEL}> 
  <div class="stats-nombre" style="margin-right:100px;">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets</div>
<table class="forumlastpost"  border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" ><tr>
<td>

      <span class="genmed"><div class="descriptions-categories">{catrow.forumrow.FORUM_DESC}</div></span>
<br />    <center>        <span class="gensmall">

 
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
       

<span class="gensmall"><span id="sublink" class="subforumlink"> {catrow.forumrow.LINKS}</span><script type="text/javascript">document.getElementById('sublink').innerHTML=document.getElementById('sublink').innerHTML.replace(/,/,"<br />");
</script>
</center>
</td>
<td style="margin-top:4px; vertical-align:top center;margin-right:10px;"><div class="stats-forum"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td></tr></table>
<br />

</span>
        </span>

      </td>

      <!-- BEGIN forum_link_no -->
     

      <!-- 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 -->
</table></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Le problème c'est que je n'arrive pas a adapter le codage des onglets pour qu'il puisse fonctionner avec celui des catégories stylisé :

Regarder ce que sa donne ici :

http://poudlardthewar.purforum.com/

Merci beaucoup d'avance a celui qui m'aidera !

MessageSujet: Adapter onglets catégories pour le codage catégorie   Adapter onglets catégories pour le codage catégorie EmptyMar 14 Aoû 2012, 19:21
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Adapter onglets catégories pour le codage catégorie Empty
Bonjour !

Le code que tu utilises est, je pense, celui des catégories en onglets proposé par Vic_Le_Faucheur sur Never Utopia. Je te conseille d'aller directement à la source dudit code pour commencer (si j'en obtiens la permission, j'en ferai un tutoriel propre et clair pour CSSActif)

Il remet régulièrement son code à jour pour en optimiser le fonctionnement, et celle que tu utilise est dépassée depuis au moins un an ^^' Autant en profiter pour te mettre à jour vu que ça ne marche pas Wink
MessageSujet: Re: Adapter onglets catégories pour le codage catégorie   Adapter onglets catégories pour le codage catégorie EmptyVen 17 Aoû 2012, 14:07
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Adapter onglets catégories pour le codage catégorie Empty
Bonjour !

Ton problème est-il résolu ?
MessageSujet: Re: Adapter onglets catégories pour le codage catégorie   Adapter onglets catégories pour le codage catégorie EmptyVen 24 Aoû 2012, 11:07
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Adapter onglets catégories pour le codage catégorie Empty
Hello (:
N'ayant toujours pas obtenu de réponse, je considère ce sujet comme résolu !
Merci de ta compréhension Adapter onglets catégories pour le codage catégorie 926145
MessageSujet: Re: Adapter onglets catégories pour le codage catégorie   Adapter onglets catégories pour le codage catégorie EmptyLun 27 Aoû 2012, 15:34
Revenir en haut Aller en bas
Contenu sponsorisé




Adapter onglets catégories pour le codage catégorie Empty
MessageSujet: Re: Adapter onglets catégories pour le codage catégorie   Adapter onglets catégories pour le codage catégorie Empty
Revenir en haut Aller en bas
 

Adapter onglets catégories pour le codage catégorie

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Modification codage catégorie (2)
» Codage de catégorie [Résolu]
» Codage de catégorie - ( On le trouve sur pas mal de forums maintenant)
» Catégorie Onglets
» Catégories en onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit