Onglets : Onglets invisibles

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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

Résolu Onglets : Onglets invisibles

Message par # Eve Sam 9 Juil 2011 - 17:47

Bonjour à tous, Wink

Je me casse les dents sur un système d'onglets que je cherche à intégrer dans une page HTML.
Il n'y a pas de bug d'affichage mis à part que mes onglets cliquables demeurent invisibles.
Je peux uniquement voir le texte contenu dans les onglets, à la file et en bloc.
Je ne connais pas grand-chose au JavaScript et je recherche un peu d'aide.
(Mon script est sûrement bourré de fautes).

Merci d'avance Wink ...

Code HTML et JavaScript :
Code:
<html>

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

<table class="" bgcolor="#f8e6c1" align="center">

<tr>
<td style="width:600px ; font-family:Helvetica ; font-size:13px">

<head>
</head>

</td>
</tr>

<br>
<br>


<tr>
<td style="width:600px ; height:100px ; font-family:Helvetica ; font-size:13px">
<body class="bodyhtml">

<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">
E.T. - C'est quoi ?</li>
<li onclick="change_cat(1);" class="onglet_actif" id="cat_1">
E.T. - Ca peut m'aider ?</li>
<li onclick="change_cat(2);" class="onglet_actif" id="cat_2">
E.T. - Ca bouge ?</li>
<li onclick="change_cat(3);" class="onglet_actif" id="cat_3">
E.T. - C'est qui ?</li>
<li onclick="change_cat(4);" class="onglet_actif" id="cat_4">
E.T. - Comment ça marche ?</li> <br><br>

</ul>

</div>
');

var compteur_cat = 0;

var anc_cat = 0;

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

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>



</td>
</tr>


<table class="forumline" bgcolor="#f8e6c1" align="center">


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




<tr>
<td style="width:600px ; font-family:Helvetica ; font-size:13px">
<div class="0" id="cat_0">

E.T. est un forum de commandes graphiques et de codage orienté Forumactif. Vous pouvez commander tous les éléments que vous souhaitez (thèmes complets ou partiels, profils, layouts, portails et bien plus encore) dans les différentes rubriques du forum. Cependant, E.T. ne se réduit pas à un site où vous avez la simple possibilité de trouver les éléments à même de rendre votre forum attractif : Elegance Temptation vous propose également différents services pour vous aider à vous améliorer en graphisme grâce à une FAQ dynamique entre membres autour de logiciels spécifiques tels que Photofiltre, Photomerge ou Photoshop, par exemple. <br><br>

</div>
</td>
</tr>

<tr>
<td style="width:600px ; font-family:Helvetica ; font-size:13px">
<div class="1" id="cat_1">

La politique d'interactivité entre membres est le gage pour E.T. d'un aboutissement heureux de vos projets, le tout dans une ambiance créative et joyeuse. Participez aux jeux graphiques, tournois ou encore aux différents concours ludiques organisés spécialement pour vous faire progresser ! Graphez à l'aide de nos tutoriels pas-à-pas classés selon leur difficulté et découvrez à votre rythme les joies du codage ! <br><br>

</div>
</td>
</tr>

<tr>
<td style="width:600px ; font-family:Helvetica ; font-size:13px">
<div class="2" id="cat_2">

Le concept d'E.T. s'appuie également sur une compétition amicale entre les trois équipes constituées par l'ensemble de nos membres. Que vous soyez Waterlily ou Dragonfly, ou encore que vous ayez à cœur de défendre l'honneur des Goldfishes, Elegance Temptation vous propose diverses activités et jeux d'équipes, le tout dans la bonne humeur. Participez aux battles à thèmes inter-équipes pour faire gagner des points à votre clan ! Envie de shopping virtuel sur Elegance Temptation ? Ouvrez votre store dans notre grand Shopping Mall ou alors venez acheter des créations à vos graphistes préférés ! Et bien sur, tout ceci dans une ambiance très chaleureuse et conviviale ! <br><br>

</div>
</td>
</tr>

<tr>
<td style="width:600px ; font-family:Helvetica ; font-size:13px">
<div class="3" id="cat_3">

Saya et Mota, administratrices dévouées, dirigent Elegance Temptation d'une main de fer dans un gant de velours. Elle sont relayés par des modératrices zélées : il s'agit de Chung Ae, Sol et Pied de Bitch. Tout le Staff d'E.T. est à l'écoute de vos désirs, questions et de besoins. Arbitres, Graphistes & Codeurs apportent également leur potentiel créatif à ce forum hors normes !<br><br>

</div>
</td>
</tr>

<tr>
<td style="width:600px ; font-family:Helvetica ; font-size:13px">


Mais n'oublions pas l'essentiel ! Car E.T., c'est d'abord et avant tout <span class="FORUMCOUNTUSER"></span> membres répartis en trois équipes sur un forum actif et dynamique comptant déjà <span class="FORUMCOUNTPOST"></span> messages dans <span class="FORUMCOUNTFORUM"></span> ateliers après une ouverture en fanfare le <span class="FORUMBIRTHDAY"></span>. Alors … libérez l'étincelle d'intérêt qui s'éveille en vous ! Poussez la porte d'une communauté qui n'attend plus que vous.<br><br>

</div>
</td>
</tr>

<td style="width:600px ; font-family:Helvetica ; font-size:13px">
<div class="4" id="cat_4">

Elegance Temptation vous propose une incursion dans son univers.<br><br>
Venez parcourir et vous familiariser avec le Règlement !<br>
Envie de découvrir les membres ? Accédez à la rubrique Présentations.<br>
Elegance Temptation vous propose également un système de Partenariat.<br><br>

La curiosité vous pique ? <br><br>

Venez nous rejoindre.<br>
Inscrivez-vous !<br><br>

</div>
</td>
</body>

</td>
</tr>

<tr>
<td  style="width:600px ; font-family:Helvetica ; font-size:13px">

<footer class="footerhtml">

Codage : Eve. <br>
Plate-forme : <a href="http://www.forumactif.com" target="_blank">forumactif.com</a>.

</footer>

</td>
</tr>

</table>
</table>
</html>

Code CSS :
Code:
/* CATEGORIES EN ONGLETS */

    text
    {
          color:#000000; /*Couleur du texte de vos onglets*/
          cursor: crosshair;
    }

    #cat_0,#cat_1,#cat_2,#cat_3,#cat_4
    /*nomonglet... � remplacer par le nom des onglets*/
    {
          padding-top:10px;
          padding-bottom:10px;
    }

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

    .cat_forum
    {
          background-color: #000000;
          margin: auto;
          margin-bottom:30px;
          width:800px;
          clear: both;
          float: left
    }

    .onglet
    {
          display:block;
          margin-top:15px;
          margin-bottom:30px;
height: 100px;
          text-decoration:none;
          cursor:crosshair;
    }

    .onglet li
    {
          float:left;
          list-style-type:none;
          margin-bottom:-22px;
          text-decoration:none;
          cursor:crosshair;
    }

    .onglet li:hover
    {
          text-decoration:none;
          cursor:pointer;
    }

    .onglet li a
    {
          display:block;
          text-decoration:none;
          list-style-type: none;
          cursor:pointer;
    }

    .onglet li a: hover
    {
          text-decoration:none;
          list-style-type:none;
          cursor:pointer
    }

    .onglet_actif
    {
                color:#1d1912;
               
                font-family:Tahoma;
                font-size:13px;
                text-align:center;
                padding:5px; !important
                text-shadow: #FFFFFF 4px 4px 4px;
                background:url('http://img844.imageshack.us/img844/1695/735287fondmessage203.png') no-repeat; /*URL de l'onglet �tant actif*/
                border: 1px #1D1912 solid;
                width:90px; /*Largeur de l'onglet �tant actif*/
                height:40px; /*Hauteur de l'onglet �tant actif*/
                cursor:crosshair;
                -moz-border-radius: 10px
                margin-right:10px;
              -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -goog-ms-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    }

    .onglet_nactif
    {
                color:#1d1912;
                font-family:Tahoma;
                font-size:13px;
                text-align:center;
                padding: 5px;
                text-shadow: #FFFFFF 4px 4px 4px;
                background:url('http://img844.imageshack.us/img844/1695/735287fondmessage203.png') no-repeat; /*URL de l'onglet �tant inactif*/
                width:90px; /*Largeur de l'onglet �tant inactif*/
                height:40px; /*Hauteur de l'onglet �tant inactif*/
                cursor:crosshair;
                -moz-border-radius: 10px
                border: 1px #1D1912 solid;
                margin-right:10px;
              -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
              -goog-ms-box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    }


Dernière édition par # Eve le Dim 10 Juil 2011 - 15:20, édité 1 fois
# Eve

# Eve
**

Féminin
Messages : 54
Inscrit(e) le : 02/10/2010

# Eve a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets : Onglets invisibles

Message par # Eve Dim 10 Juil 2011 - 15:20

Bonjour,

Problème résolu en passant par un autre code.
Merci au FdF pour la ressource codage.

Amicalement,

Eve.
# Eve

# Eve
**

Féminin
Messages : 54
Inscrit(e) le : 02/10/2010

# Eve a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum