Tableau à onglet dans Page d'accueil

[Dark Raviel]

Bonjour,
j'ai suivi ce tuto mais voici quelques problèmes :

https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil


Page d'accueil : petit problèmes d'onglets :




Quand je clique sur un onglet : gros problème :





Voici les différents codes utilisés :


Code 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';
                    }
                }
            }         
        }

Code HTML de ma page d'accueil :

Code:

<div id="mes_onglets">
            <ul><li id="o_1" class="accueil_selected" onclick="changeOnglet(this);">Accueil</li>
                <li id="o_2" class="news" onclick="changeOnglet(this);">Les News du Forum</li>
                <li id="o_3" class="distributions" onclick="changeOnglet(this);">Évènements et Distributions</li>
                <li id="o_4" class="lien_utile" onclick="changeOnglet(this);">Liens Utiles</li>
            <li id="o_5" class="topsite" onclick="changeOnglet(this);"> Top Sites</li>
            <li id="o_6" class="partenaires" onclick="changeOnglet(this);">Partenaires</li>
            <li id="o_7" class="divertissement" onclick="changeOnglet(this);">Divertissement Musicaux et Vidéos</li>
                <div class="clear"><div id="mes_contenus">
            
            <div id="co_1" class="contenu_accueil">
         <center>Bienvenue {USER&amp;#8288;NAME} sur Poké-Trénia.</center>
         
         <center><img src="http://up.sur-la-toile.com/iUKu" alt="Mascotte de Novembre" title="..." /></center>         
         </div>
         
            <div id="co_2" class="contenu_news" style="display: none;">
         <center>Voici tous les nouveaux messages du forum.<br/>
         </center>
         </div>
         
            <div id="co_3" class="contenu_distribs" style="display: none;">
         <center>Évènements et Distributions

         <a href="http://poke-trenia.forumgratuit.org/t244-distribution-novembre#5293?tid=86f491e1c1cf5ae3599951945617e4ab">
         <img src="http://up.sur-la-toile.com/iULD" alt="Distribution de Novembre" title="..."/></a>

         <a href="http://poke-trenia.forumgratuit.org/t233-event-branette-americain#5202?tid=951a509f6b81c9fce6018485496212db">
         <img src="http://up.sur-la-toile.com/iUAf" alt="Branette Américain"  title="..."/></a>
         </center>         
         </div>
         
            <div id="co_4" class="contenu_liens" style="display: none;">
         <center>Les liens utiles du forum

         <a href="http://poke-trenia.forumgratuit.org/f1-reglements?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Règlement</a>

         <a href="http://poke-trenia.forumgratuit.org/f7-actualites-du-forum?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Actualités du Forum</a>

         <a href="http://poke-trenia.forumgratuit.org/f9-boite-a-idees?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Postez vos idées</a>

         <a href="http://poke-trenia.forumgratuit.org/f11-sondages?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Les Sondages</a>

         <a href="http://poke-trenia.forumgratuit.org/f71-projets-du-forum?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Les Projets du Forum</a><br/>
         </center>
         </div>
         
         <div id="co_5" class="contenu_topsite" style="display: none;">
         <center>Les Top Sites, votez pour amenez de nouveaux inscrits.

         <span><marquee><a href="http://www.pokemontrash.com/topsite/"><img src="http://www.pokemontrash.com/topsite/button.php?u=Ayfoth" alt="Pokémon" border="0"></a>  <a href="http://pokemon.power.free.fr/top-sites/"><img src="http://pokemon.power.free.fr/top-sites/button.php?u=Ayfoth" alt="Top-Sites Pokémon-Power !" border="1"></a>  <a href="http://www.root-top.com/topsite/gnik/in.php?ID=895" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/gnik/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/mew/in.php?ID=338" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/mew/banner.gif" alt="" border="0"></a><a href="http://www.eternia-fr.net/topsite/"><img src="http://www.eternia-fr.net/topsite/votez.php?s=308" alt="Pokémon"></a></marquee></span></center>
         </div>
         
         <div id="co_6" class="contenu_partenaires" style="display: none;">
         <center>Voici nos partenaires, n'hésitez pas à leur rendre visite.<br/>
         <span><marquee><a href="http://pokemoncenter.forumgratuit.org/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/16/35/01/47/bouton10.gif" alt="" border="0"></a><a href="http://pokemon-event-revolution.un concurrent.com/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://img26.xooimage.com/files/c/8/4/bouton-1a2a5b0.png" alt="" border="0"></a><a href="http://the-dark-dragon-team.un concurrent.fr/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://img66.xooimage.com/files/9/4/a/tddt-2a44a03.png" border="0" alt="" /></a></marquee></span>
         </center>
         </div>
         
         <div id="co_7" class="contenu_divertissement" style="display: none;">
         Mon contenu 7
         </div>
        </div></div></ul></div>

Et pour finir le code CSS complet de mon forum.

Code:

a { text-decoration: none; }

.bodyline
{
border-style: dashed;
border-color: snow;
min-width : 900px;
}

.mainmenu
{
color: royalblue;
font-size: 20px;
text-shadox: 2px 2px  #000000;
}

.gensmall
{
text-decoration: none;
}

body {
    cursor: url('http://upload.is.free.fr/upload/hr8kuacd.cur'),auto;
}

       
        .       
        .accueil{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f2e38d;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .accueil:hover{
          background: #f2e38d;
        }       
        .accueil_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f2e38d;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .contenu_accueil{
          color: #000;
          background: #f2e38d;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}
       
       
        .news{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #a4dcf3;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .news:hover{
          background: #a4dcf3;
        }       
        .news_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #a4dcf3;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .contenu_news{
          color: #000;
          background: #a4dcf3;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}
       
          .distributions{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #d1a4f3;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .distributions:hover{
          background: #d1a4f3;
        }       
        .distributions_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #d1a4f3;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .contenu_distribs{
          color: #000;
          background: #d1a4f3;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}
       
        .lien_utile{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #a4f3d2;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .lien_utile:hover{
          background: #a4f3d2;
        }       
        .lien_utile_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #a4f3d2;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .contenu_liens{
          color: #000;
          background: #a4f3d2;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}
       
             .topsite{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f3f2a4;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .topsite:hover{
          background: #f3f2a4;
        }       
        .topsite_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f3f2a4;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .contenu_topsite{
          color: #000;
          background: #f3f2a4;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}
       
             .partenaire{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f3c2a4;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .partenaires:hover{
          background: #f3c2a4;
        }       
        .partenaires_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f3c2a4;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .contenu_partenaires{
          color: #000;
          background: #f3c2a4;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}
       
        .divertissement{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f3a4a4;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .divertissement:hover{
          background: #f3a4a4;
        }       
        .divertissement_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f3a4a4;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .contenu_divertissement{
          color: #000;
          background: #f3a4a4;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}

En l'attente d'une réponse rapide votre part, je vous remercie.

[Lixyr]

Bonjour.

J'ai regardé votre code. Il me semble qu'on ne puisse pas modifier la classe des onglets, puisqu'elles sont spécifiées dans le code javascript. Ce qui veut dire que même si vous souhaitez avoir une apparence différente selon les onglets etc, vous ne pourrez pas car vos onglets doivent avoir la même classe : celle indiquée dans le javascript, qui est :

mon_onglet & mon_onglet_selected
rien d'autre :

<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>

ne modifiez pas ceci, exit les noms des onglets.

Cordialement.

[Dark Raviel]

J'ai remis à l'origine comme vous me le disiez mais ceci me fait ça :




Nouveau code HTML :

Code:

<div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Les News du Forum</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Évènements et Distributions</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Liens Utiles</li>
            <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);"> Top Sites</li>
            <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);">Partenaires</li>
            <li id="o_7" class="mon_onglet" onclick="changeOnglet(this);">Divertissement Musicaux et Vidéos</li>
                <div class="clear"><div id="mes_contenus">
            
            <div id="co_1" class="mon_contenu">
         <center>Bienvenue {USER&amp;#8288;NAME} sur Poké-Trénia.</center><br />         
         <center><img src="http://up.sur-la-toile.com/iUKu" alt="Mascotte de Novembre" title="..." /></center>         
         </div>
         
            <div id="co_2" class="mon_contenu" style="display: none;">
         <center>Voici tous les nouveaux messages du forum.<br/>
         </center>
         </div>
         
            <div id="co_3" class="mon_contenu" style="display: none;">
         <center>Évènements et Distributions<br />
         <a href="http://poke-trenia.forumgratuit.org/t244-distribution-novembre#5293?tid=86f491e1c1cf5ae3599951945617e4ab">
         <img src="http://up.sur-la-toile.com/iULD" alt="Distribution de Novembre" title="..."/></a><br />
         <a href="http://poke-trenia.forumgratuit.org/t233-event-branette-americain#5202?tid=951a509f6b81c9fce6018485496212db">
         <img src="http://up.sur-la-toile.com/iUAf" alt="Branette Américain"  title="..."/></a>
         </center>         
         </div>
         
            <div id="co_4" class="mon_contenu" style="display: none;">
         <center>Les liens utiles du forum<br />
         <a href="http://poke-trenia.forumgratuit.org/f1-reglements?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Règlement</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f7-actualites-du-forum?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Actualités du Forum</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f9-boite-a-idees?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Postez vos idées</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f11-sondages?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Les Sondages</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f71-projets-du-forum?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Les Projets du Forum</a><br/>
         </center>
         </div>
         
         <div id="co_5" class="mon_contenu" style="display: none;">
         <center>Les Top Sites, votez pour amenez de nouveaux inscrits.<br />
         <span><marquee><a href="http://www.pokemontrash.com/topsite/"><img src="http://www.pokemontrash.com/topsite/button.php?u=Ayfoth" alt="Pokémon" border="0"></a>  <a href="http://pokemon.power.free.fr/top-sites/"><img src="http://pokemon.power.free.fr/top-sites/button.php?u=Ayfoth" alt="Top-Sites Pokémon-Power !" border="1"></a>  <a href="http://www.root-top.com/topsite/gnik/in.php?ID=895" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/gnik/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/mew/in.php?ID=338" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/mew/banner.gif" alt="" border="0"></a><a href="http://www.eternia-fr.net/topsite/"><img src="http://www.eternia-fr.net/topsite/votez.php?s=308" alt="Pokémon"></a></marquee></span></center>
         </div>
         
         <div id="co_6" class="mon_contenu" style="display: none;">
         <center>Voici nos partenaires, n'hésitez pas à leur rendre visite.<br/>
         <span><marquee><a href="http://pokemoncenter.forumgratuit.org/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/16/35/01/47/bouton10.gif" alt="" border="0"></a><a href="http://pokemon-event-revolution.un concurrent.com/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://img26.xooimage.com/files/c/8/4/bouton-1a2a5b0.png" alt="" border="0"></a><a href="http://the-dark-dragon-team.un concurrent.fr/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://img66.xooimage.com/files/9/4/a/tddt-2a44a03.png" border="0" alt="" /></a></marquee></span>
         </center>
         </div>
         
         <div id="co_7" class="mon_contenu" style="display: none;">
         Mon contenu 7
         </div>
        </div></div></ul></div>

Mon code CSS :

Code:


.bodyline
{
border-style: dashed;
border-color: snow;
min-width : 900px;
}

.mainmenu
{
color: royalblue;
font-size: 20px;
text-shadox: 2px 2px  #000000;
}

.gensmall
{
text-decoration: none;
}

body {
    cursor: url('http://upload.is.free.fr/upload/hr8kuacd.cur'),auto;
}

       
        .       
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f2e38d;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .mon_onglet:hover{
          background: #f2e38d;
        }       
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #f2e38d;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #000;
          background: #f2e38d;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;
        text-shadow: 2px 2px 2px black}
        #mes_contenus, #mes_onglets{
          width: 1000px;
          margin: auto;}

[Lixyr]

body {
cursor: url('http://upload.is.free.fr/upload/hr8kuacd.cur'),auto;
}


.
.mon_onglet{

vous avez un point en trop. Enlevez-le et le css fonctionnera correctement. ^^

[Dark Raviel]

Mon derniere petit problème est le manque de largeur je pense que je dois modifier le width à la fin du CSS mais je préfère demander confirmation.



Problème résolu, par ailleurs je voulais savoir si y avait possible de mettre les élements de {L-RECENT_TOPICS} dans les onglets ?

[Lixyr]

Oui, il fallait bien changer le width, et ensuite jouer avec le margin, pour tout centrer.

-----

Ca dépend d'où viennent ces éléments. Si ce sont des éléments de variables, dans les templates, alors non, on ne peut pas les mettre dans la PA. Si ce sont des variables affichable dans la PA, alors oui, vous pouvez les mettre.

Vous avez une liste de variable qu'on peut mettre dans la PA :
https://forum.forumactif.com/popup_help.forum?l=miscvars

Cordialement.

[Dark Raviel]

Sinon c'est possible de faire appelle a un script php (en particulier script de news) ?

[Lixyr]

J'avais vu un tuto sur le forum qui permettait de convertir les variables, qu'elles s'affichent sur la PA (ou j'ai rêvé ? Oo ) mais impossible de remettre la main dessus. u_u

Cependant, si vous lisez bien les demandes sur les variables dans les nombreux sujets déjà posté, il semble qu'on ne puisse malheureusement pas. Une suggestion avait cependant été posée, donc je vous laisse le soin d'aller voir ça. ^^


Cordialement.

[Dark Raviel]

J'ai chercher dans convertions de variable mais rien, mais je sais qu'il existe également en Widget est-il possible d'obtenir le code html du Widget, ou bien d'intégrer le widget entre des balises div ?


Est-ce que la PA accepte la balise include pour faire appel à du PHP ?

[Dark Raviel]

Je me permets d'up ^^

[Lixyr]

Vous voulez que l'on voit quel widget dans votre PA ?

[Dark Raviel]

Celui des sujets récents.

[Lixyr]

J'ai bien un code, mais pas modifiable, je vous préviens. ^^

Code:


<table><tr><td align="center" id="comments_scroll_div" valign="middle" style="height: 201px;">
 <iframe name="ifr" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var ifr=window.ifr.document.getElementById('comments_scroll_div');document.getElementById('comments_scroll_div').innerHTML=ifr.innerHTML;"></iframe>
                    </td></tr></table>

à mettre dans la PA.

Cordialement.

[Dark Raviel]

Ce code ne semble pas fonctionner dans ma PA.

[Lixyr]

Pour qu'il fonctionne, il faut activer son portail, et installer le widget. Auquel cas, rien ne s'affichera, car cette iframe affiche en réalité le contenu du widget présent dans le portail. C'est la seule solution pour avoir le rendu voulu.

A moins de mettre le widget directement sur la page d'accueil

panneau d'administration >> module >> widget du forum

>> widget derniers messages

le mettre à gauche ou à droite du forum.

Cordialement.

[Dark Raviel]

Ah oui merci j'avais zappé d'activer le portail, merci le résultat est niquel.

Problème résolu !