Tableau à onglet

2 participants

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

Résolu Tableau à onglet

Message par Lady doll Jeu 16 Aoû 2012 - 12:35

Bonjour ^^
voilà, j'ai actuellement un soucis avec un tableau à onglet... Je change le design de me forum dans peu de temps et pour la page d'accueil je comptais mettre ce fameux tableau à onglets. J'ai tester plusieurs version différente, rien na marché, pour le coup, j'ai cru que je codait de travers. Suite à cela, je suis passé sur un second forum test où j'ai poster un nouveau tableau à onglet, que voici: http://chou-test.monforumgratuit.com/
Ravi que tout ce passe à merveille et que celui-ci marche sans problème, je suis passé à mon autre forum test où le design de mon forum est en cours. J'installe ce même tableau et... ça ne marche pas! Ainsi, je joins mon javascript, le codage et mon code HTML (bien que lerreur ne devrais pas venir d'ici vu que j'ai fait un simple copier/coller pour le passé d'un forum à l'autre^^)

► Javascript:
Code:
        function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
            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';
                    }
                }
            }         
        }

► Codage:
Code:
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #ffffc5 ;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .mon_onglet:hover{
          background: #f1ffe3;
        }       
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #ffffc5 ;
          border-top: 2px solid #000;
          border-right: 2px solid #000;
          border-left: 2px solid #000;
          border-bottom: 1px solid #ffffc5;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #000;
          background: #ffffc5;
          border: 2px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 12px;}
        #mes_contenus, #mes_onglets{
          width: 400px;
          margin: auto;}

► code HTML :
Code:
        <div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Titre</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">
        </div>
            <div id="co_2" class="mon_contenu" style="display: none;">
        </div>
            <div id="co_3" class="mon_contenu" style="display: none;">
        </div>
            <div id="co_4" class="mon_contenu" style="display: none;">
        </div>
        </div></div></ul></div>

Le résultat que j'ai obtenu sur mon forum test avec le design en cours de création: http://lady-doll-design.forumactif.org/
Si quelqu'un pouvait éclairer ma lanterne sur la manière d'arranger le problème, se serait bien ! Je joins aussi le codage de ma PA, si cela peu aider, merci ^^
Code:
<div style="background-image:url('http://i31.servimg.com/u/f31/14/91/59/57/fond_p10.jpg')"><table cellpadding="0" cellspacing="0" border="1" width="95%" align="center" >

<tr>

  <td  align="center" valign="top" >
    <ul id="menu">
    <li><div class="menu_ombre">Incontournable</div>
      <ul>
        <li><a href="http://moribond.forumgratuit.org/t1-reglement">Règlement</a></li>
        <li><a href="http://moribond.forumgratuit.org/t3-histoire">Contexte</a></li>
        <li><a href="http://moribond.forumgratuit.org/t5-race">Race</a></li>
        <li><a href="http://moribond.forumgratuit.org/t6-les-dons-et-les-guildes">Guilde</a></li>
        <li><a href="http://moribond.forumgratuit.org/t8-les-predefinis">Prédéfinis</a></li>
      </ul>
    </li>
    <li><div class="menu_ombre">Nécessaire</div>
      <ul>
        <li><a href="http://moribond.forumgratuit.org/f17-demandes">Demandes</a></li>
        <li><a href="http://moribond.forumgratuit.org/f18-espace-invites">Espace Invités</a></li>
        <li><a href="http://moribond.forumgratuit.org/f19-partenariat">Partenariat</a></li>
      </ul>
    </li>
    <li><div class="menu_ombre">Bonus</div>
      <ul>
        <li><a href="#">Gazette</a></li>
        <li><a href="http://moribond.forumgratuit.org/t99-galerie-d-avatars">Galerie d'avatars</a></li>
        <li><a href="http://browse.deviantart.com/digitalart/paintings/fantasy/">DA fantasy</a></li>
        <li><a href="http://www.archive-host.com/playlist/v8/popup.php?id=8uumq6whrmod">Playlist</a></li>
      </ul>
    </li>
 
    </ul>
  </td>
</tr>
<tr>
    <td>
       <table cellpadding="0" cellspacing="10" width="100%" border="1">
          <tr>
             <td rowspan="2" valign="top" width="75%" >
       
        <div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Titre</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">
        </div>
            <div id="co_2" class="mon_contenu" style="display: none;">
        </div>
            <div id="co_3" class="mon_contenu" style="display: none;">
        </div>
            <div id="co_4" class="mon_contenu" style="display: none;">
        </div>
        </div></div></ul></div>

                     </td>
             <td valign="top" width="25%" >
                <table cellpadding="0" cellspacing="10" width="100%" border="1">
                      <tr>
                      <td >
                        <strong>NEWS</strong><br />
                               <br />
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dolor sit amet libero ultricies ornare.
                        </td>
                        </tr>
                  <tr>

                      <td >
                        <strong>TOPS SITES</strong><br />
                         <br />
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dolor sit amet libero ultricies ornare.
                       </td>
                        </tr>
                    </table>                  
            </td>
         </tr>      
      </table>
   </td>
</tr>
<tr>
    <td align="center" valign="top" width="100%" >
   <a href="http://slavavostok.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/903090548345bouton2.jpg" alt="" border="0"></a> <a href="http://nuxcia.forumactif.fr/" target="_blank"><img src="http://i49.servimg.com/u/f49/11/19/39/90/100x3510.jpg" alt="Nuxcia" title="Nuxcia | Forum Mature [NC -18 ans]"></a> <a href="http://reve-inverness.forumactif.com/" alt="Les Rêves d'Inverness"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" alt="Les Rêves d'Inverness"></a> <a href="http://cross-garden.keuf.net/" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa29.casimages.com/img/2012/06/24/120624071236247432.png" alt="" border="0"></a> <a href="http://untoldsecrets.forumsgratuits.net/" class="postlink" target="_blank" rel="nofollow"> <img src="http://illiweb.com/fa/pbucket.gif" alt="" border="0"></a>
   </td>
</tr>
</table></div>


Dernière édition par Lady doll le Jeu 16 Aoû 2012 - 13:03, édité 1 fois
Lady doll

Lady doll
***

Féminin
Messages : 119
Inscrit(e) le : 02/11/2011

http://witchcraft-rpg.forumactif.com/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par mimi-76- Jeu 16 Aoû 2012 - 12:48

Bonjour, je ne comprend pas j'ai essayer les deux lien et sa fonctionne correctement.
mimi-76-

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Lady doll Jeu 16 Aoû 2012 - 12:49

j'ai aussi tester sur le forum de rp en question et ça ne marche pas! c'est étrange non ? Oo
Lady doll

Lady doll
***

Féminin
Messages : 119
Inscrit(e) le : 02/11/2011

http://witchcraft-rpg.forumactif.com/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par mimi-76- Jeu 16 Aoû 2012 - 12:55

Bas passer le forum en question et ajouter le pour que je regarde si sa fonctionne sur votre forum en question.
mimi-76-

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Lady doll Jeu 16 Aoû 2012 - 12:56

Lady doll

Lady doll
***

Féminin
Messages : 119
Inscrit(e) le : 02/11/2011

http://witchcraft-rpg.forumactif.com/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par mimi-76- Jeu 16 Aoû 2012 - 12:57

A ouai c'est le javascript qui ne fonctionne pas, avez vous mis le javascript sur toute les pages ?

EDIT: Sur le deuxième que vous nous avez passer, le tableau fonctionne pas.


Dernière édition par mimi-76- le Jeu 16 Aoû 2012 - 13:00, édité 1 fois
mimi-76-

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Lady doll Jeu 16 Aoû 2012 - 13:00

ah ! je viens de voir que je n'avais pas coché l'activation du javascript, ça marche sur le forum RP, mais ça ne marche toujours pas sur le forum test x)
Lady doll

Lady doll
***

Féminin
Messages : 119
Inscrit(e) le : 02/11/2011

http://witchcraft-rpg.forumactif.com/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par mimi-76- Jeu 16 Aoû 2012 - 13:02

Si, vous voulez je peut m'inscrire sur votre forum et vous me m'etez admin pour que je regarde et après vous pouvez me supprimer.
mimi-76-

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Lady doll Jeu 16 Aoû 2012 - 13:03

Non ça iras mimi, savoir que le tableau à onglet marche parfaitement sur le forum Rp est bien suffisant! merci encore ♥
sujet résolu!
Lady doll

Lady doll
***

Féminin
Messages : 119
Inscrit(e) le : 02/11/2011

http://witchcraft-rpg.forumactif.com/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par mimi-76- Jeu 16 Aoû 2012 - 13:05

LOL, je vien de m'inscrire le forum en teste Very Happy
Vous pouvez cliquer sur merci pour dire merci a se qui vous on aidez
mimi-76-

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Lady doll Jeu 16 Aoû 2012 - 13:06

voilà qui est fait pour me merci Wink
Lady doll

Lady doll
***

Féminin
Messages : 119
Inscrit(e) le : 02/11/2011

http://witchcraft-rpg.forumactif.com/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par mimi-76- Jeu 16 Aoû 2012 - 13:07

super Very Happy
mimi-76-

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- 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

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