Tableau à onglets qui ne fonctionne pas

2 participants

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

Résolu Tableau à onglets qui ne fonctionne pas

Message par Chertograd Mer 8 Fév 2012 - 22:45

Bonsoir,


Je n'ai pas vu de sujet similaire, ce pourquoi j'expose mon problème ici. J'ai suivi la démarche des tableaux à onglets, proposés par le forum. J'ai copié-collé comme tout était demandé, donc PA, CSS et Javascript. Niveau esthétique, il me convient. Cependant, même si la surbrillance se fait en passant sur les onglets, impossible d'afficher le menu en cliquant dessus.
Voici le site : http://vampires-kingdom.jdrforum.com/

Ainsi que le CSS :
Code:
        .mainmenu{
              background-color: #1F1D1B;
              border: 1px solid #38322D;
              -moz-border-radius-topleft: 6px;
              -moz-border-radius-topright: 6px;
              -webkit-border-top-right-radius: 6px;
              -webkit-border-top-left-radius: 6px;
              border-top-right-radius: 6px;
              border-top-left-radius: 6px;
              padding: 3px;
            }


          .forumline {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        }   


         
.mon_onglet{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #A19789;
          background: #38322D;
          border: 1px solid #82795F;}
       
        .mon_onglet:hover{
          background: #4d4b46;} 
         
        .mon_onglet_selected{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #A19789;
          background: #4d4b46;
          border: 1px solid #82795F;}
               
        .clear{
          clear: both;}
       
        .mon_contenu{
          color: #A19789;
          background: #38322D;
          border: 1px solid #82795F;
          padding: 100px;
          margin: 30 px;
          height: 200px;
          line-height: normal;
          font-size: 11px;}
       
        #mes_contenus, #mes_onglets{
          height: 100%;
          width:100%;}

Le Javascript :
Code:
function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
            for(var i = 0; i < getOnglets.length; i++){
                if(getOnglets[i].id){
                    if(getOnglets[i].id == _this.id){
                        getOnglets[i].className = 'mon_onglet_selected';
                        document.getElementById('c' + _this.id).style.display            = 'block';
                    }
                    else{
                        getOnglets[i].className = 'mon_onglet';
                        document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                    }
                }
            }   
        }

Et la Page d'Accueil :
Code:
                <table style="margin: auto;"><tr><td><div id="mes_onglets">
            <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><div align="center">Général</div></span>
                <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><div align="center">News</div></span>
                <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
                <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><div align="center">À propos</div></span></td><td>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">


        <select style="width: 200px;" onchange="location = this.value">
          <option selected="selected">Le Grimoire de Vampires' Kingdom</option>
          <option value="url1-de-renvoi">Réglement</option>
          <option value="url2-de-renvoi">Contexte</option>
          <option value="url3-de-renvoi">Liste des avatars et noms</option>
          <option value="url4-de-renvoi">Description des castes</option>
        </select>


</div>
            <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2

Lalalala</div>
            <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
            <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
        </div></div></div></td></tr></table>



De plus, mes deux premiers titres du forum ont bougé et je suis incapable de les remettre sur les gauche.




Merci du temps que vous accorderez à cette demande,

Bonne soirée.


Dernière édition par Chertograd le Jeu 9 Fév 2012 - 21:00, édité 1 fois
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets qui ne fonctionne pas

Message par Dr. Karlos Mer 8 Fév 2012 - 22:52

Bonsoir,

Pour le problème avec le tableau à onglets, en allant dans votre
> Panneau d'administration
> Modules
> Gestion des codes Javascript

Activer la gestion des codes Javascript : Est-il sur oui?


Pour le deuxième problème, allez dans votre
> Panneau d'administration
> Général
> Catégories et forums
> edit sur les deux forums centrés

Nom du Forum : Voyez-vous <center> et </center> entourant le titre de votre forum? Si oui, retirez-le.


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets qui ne fonctionne pas

Message par Chertograd Jeu 9 Fév 2012 - 21:00

Tout fonctionne. Merci beaucoup ! Very Happy
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd 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