Tableaux

[oiseaublue]

Bonjour,

Je n'arrive pas à mettre un tableau comme dans le tutoriel ici: https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil

Merci d'avance.

[Niko]

Salut

avez-vous essayé de suivre toutes les étapes ?
Ce que vous ne pouvez pas faire ?

[oiseaublue]

Oui j'ai suivit toute les étapes.
Je ne sais pas ou sa bloque

[Automne]

Bonjour,

Qu'avez vous fait exactement. Donnez moi les codes que vous avez mis au différents endroit. Merci.

[oiseaublue]

D'accord alors j'ai mis ce code là:

Code:

        $(function(){
          var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".sslide")?"slideUp":a.is(".sfade")?"fadeOut":"hide"](500);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".sslide")?"slideDown":a.is(".sfade")?"fadeIn":"show"](500)};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".sbottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".sbottom")?
        "tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".shover").on("mouseenter",".tab",d)
        });

Dans: Panneau d'administration =>Modules => Gestion des codes javascripts => Créer un nouveau code Javascript

Puis celui là:

Code:


        <div class="systab" id="tab-bloc">
          <div id="tab-regles">
            <span><img src="http://i.imgur.com/8aDn6.gif" /> Règles</span>
            <ul>
              <li>Premier commandement : Un seul Dieu tu aimeras et adoreras parfaitement.
              <li>Deuxième commandement : Son saint nom tu respecteras, fuyant blasphème et faux serment.
              <li>Troisième commandement : Le jour du Seigneur garderas, en servant Dieu dévotement.
              <li>Quatrième commandement : Tes père et mère honoreras, tes supérieurs pareillement.
              <li>Cinquième commandement : Meurtre et scandale éviteras, haine et colère également.
              <li>Sixième commandement : La pureté observeras, en tes actes soigneusement.
              <li>Septième commandement : Le bien d'autrui tu ne prendras, ni retiendras injustement.
              <li>Huitième commandement : La médisance banniras et le mensonge également.
              <li>Neuvième commandement : En pensées, désirs veilleras à rester pur entièrement.
              <li>Dixième commandement : Bien d'autrui ne convoiteras pour l'avoir malhonnêtement.
            </ul>
          </div>
          <div class="selected" id="tab-bienvenue">
            <span><img src="http://i.imgur.com/Xq6ZJ.jpg" /> Bienvenue</span>
            <marquee direction="up">
              <div>Welkom</div><div>أهلاً و سهلاً</div><div>Բարի գալուստ!</div><div>Xoş gəlmişsiniz!</div><div>Ongi etorri</div><div>歡迎</div><div>Bienvenue</div><div>Καλώς Ορίσατε</div><div>Aloha</div><div>ᑐᙵᓱ</div><div>ようこそ</div><div>환영합니다</div><div>ຍິນດີຕ້ອນຮັບ</div><div>Laipni lūdzam</div><div>Räxim itegez</div><div>Benvignùo</div><div>Merhbe</div><div>კეთილი იყოს თქვენი</div><div>Vælkomin</div><div>Добро пожаловать</div><div>Haykuykuy!</div>
            </marquee>
          </div>
          <div id="tab-staff">
            <span><img src="http://i.imgur.com/enPmV.png" /> Staff</span>
            <table>
            <tr>
              <td><span style="color:red;font-weight:bold;">Admin :</span></td>
              <td><span>JP, R2D2, Chuck</span></td>
            <tr>
            <tr>
              <td><span style="color:green;font-weight:bold;">Modo :</span></td>
              <td>Skully, Dark angel, Terminator, JCVD</td>
            <tr>
            </table>
          </div>
        </div>

dans Panneau d'administration => Modules => Gestion des pages HTML => Créer une nouvelle page HTML

Et enfin celui là:

Code:

        /* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
        #tab-bloc .tabs {
          text-align: center;
          margin-bottom: 10px;
        }
        /* .tab = onglets */
        #tab-bloc .tab {
          border-radius: 5px;
          border: none;
          margin: 0 20px;
          background: none;
        }
        /* .tab.selected = onglet sélectionné*/
        #tab-bloc .tab.selected {
          background: #111;
          box-shadow: 0 0 5px #333;
          color: #eee;
          font-weight: bold;
        }
        /* .tab img = image dans les onglets */
        #tab-bloc .tab img {
          vertical-align: -3px;
        }
        /* .contents = conteneur des contenu */
        #tab-bloc .contents {
          border: 3px double #aaa;
          background: #eee;
          border-radius: 50px;
          padding: 25px;
        }
        /* #tab-staff = contenu associé à l'onglet staff */
        #tab-staff {
          background: url(http://i.imgur.com/KlbuC.jpg);
          width: 791px;
          height: 607px;
          border: 1px dotted #ccc;
          margin: auto;
        }
        #tab-staff table {
          color: #444;
          background: url(http://i.imgur.com/GEdKG.png);
          margin: 100px auto;
          font-weight: 30px;
          opacity: 0.8;
          border: 2px solid #ccc;
          border-radius: 5px;
        }
        /* #tab-bienvenue = contenu associé à l'onglet bienvenue */
        #tab-bienvenue {
          border-radius: 50px;
          border: 2px dashed #bbb;
          background: url(http://i.imgur.com/yAyJl.jpg);
          text-align: center;
          font-size: 20px;
          color: #333;
          text-shadow: 0 0 5px #fff;
        }
        /* #tab-regles = contenu associé à l'onglet règles */
        #tab-regles ul  {
          font-family: georgia, arial, serif;
          font-size: 17px;
          list-style: url(http://i.imgur.com/DMC6G.gif);
        }
        #tab-regles li {
          margin-bottom: 10px;
          color: green;
        }

Dans : Panneau d'administration => Affichage => Couleurs => Feuille de style CSS


Merci d'avance
Ps: Les texte je les change après

[Automne]

D'accord alors j'ai mis ce code là:

Code:


        <div class="systab" id="tab-bloc">
          <div id="tab-regles">
            <span><img src="http://i.imgur.com/8aDn6.gif" /> Règles</span>
            <ul>
              <li>Premier commandement : Un seul Dieu tu aimeras et adoreras parfaitement.
              <li>Deuxième commandement : Son saint nom tu respecteras, fuyant blasphème et faux serment.
              <li>Troisième commandement : Le jour du Seigneur garderas, en servant Dieu dévotement.
              <li>Quatrième commandement : Tes père et mère honoreras, tes supérieurs pareillement.
              <li>Cinquième commandement : Meurtre et scandale éviteras, haine et colère également.
              <li>Sixième commandement : La pureté observeras, en tes actes soigneusement.
              <li>Septième commandement : Le bien d'autrui tu ne prendras, ni retiendras injustement.
              <li>Huitième commandement : La médisance banniras et le mensonge également.
              <li>Neuvième commandement : En pensées, désirs veilleras à rester pur entièrement.
              <li>Dixième commandement : Bien d'autrui ne convoiteras pour l'avoir malhonnêtement.
            </ul>
          </div>
          <div class="selected" id="tab-bienvenue">
            <span><img src="http://i.imgur.com/Xq6ZJ.jpg" /> Bienvenue</span>
            <marquee direction="up">
              <div>Welkom</div><div>أهلاً و سهلاً</div><div>Բարի գալուստ!</div><div>Xoş gəlmişsiniz!</div><div>Ongi etorri</div><div>歡迎</div><div>Bienvenue</div><div>Καλώς Ορίσατε</div><div>Aloha</div><div>ᑐᙵᓱ</div><div>ようこそ</div><div>환영합니다</div><div>ຍິນດີຕ້ອນຮັບ</div><div>Laipni lūdzam</div><div>Räxim itegez</div><div>Benvignùo</div><div>Merhbe</div><div>კეთილი იყოს თქვენი</div><div>Vælkomin</div><div>Добро пожаловать</div><div>Haykuykuy!</div>
            </marquee>
          </div>
          <div id="tab-staff">
            <span><img src="http://i.imgur.com/enPmV.png" /> Staff</span>
            <table>
            <tr>
              <td><span style="color:red;font-weight:bold;">Admin :</span></td>
              <td><span>JP, R2D2, Chuck</span></td>
            <tr>
            <tr>
              <td><span style="color:green;font-weight:bold;">Modo :</span></td>
              <td>Skully, Dark angel, Terminator, JCVD</td>
            <tr>
            </table>
          </div>
        </div>

dans Panneau d'administration => Modules => Gestion des pages HTML => Créer une nouvelle page HTML

Mettez celui ci dans pa << affichage << page accueil << généralité << message page accueil.

[oiseaublue]

Merci j'ai réussi

[Automne]

Bonjour,

Il faut vérifier deux choses; Le code marche chez moi, donc le soucis doit venir d'une options qu'il manque.

Voir les trois points de contrôle du html https://forum.forumactif.com/t285442-activation-du-html-3-points-de-controle#2522474

Et voir si les JavaScript sont activés dans la page : gestion des JavaScript "activé:oui"

[oiseaublue]

Merci, par contre est-ce qu'il existe un code pour faire plus que 3 onglets ?

[Automne]

Bonjour,

Oui, dans le tuto il est expliqué comment rajouté des onglets.

[oiseaublue]

Je ne trouve pas dans le tuto ou c'est marqué, et j'aimerai aussi savoir comment enlevé les truc de gauche dans la partie règles: http://www.maonyn.com/h18-test-tableau-onglets#bloc

[Automne]

Bonjour
Pour rajouter un onglet

Code:

<div id="tab-staff">
    <span><img src="VOTRE IMAGE" />TEXTE</span>
    CE QUI SE TROUVERA DANS LE TABLEAU
  </div>

Les trucs de gauche, c'est quoi? a l'intérieur du premier onglet se trouve une liste. elle correspond a ceci

Code:

<ul>
      <li>Premier commandement : Un seul Dieu tu aimeras et adoreras parfaitement.
      <li>Deuxième commandement : Son saint nom tu respecteras, fuyant blasphème et faux serment.
      <li>Troisième commandement : Le jour du Seigneur garderas, en servant Dieu dévotement.
      <li>Quatrième commandement : Tes père et mère honoreras, tes supérieurs pareillement.
      <li>Cinquième commandement : Meurtre et scandale éviteras, haine et colère également.
      <li>Sixième commandement : La pureté observeras, en tes actes soigneusement.
      <li>Septième commandement : Le bien d'autrui tu ne prendras, ni retiendras injustement.
      <li>Huitième commandement : La médisance banniras et le mensonge également.
      <li>Neuvième commandement : En pensées, désirs veilleras à rester pur entièrement.
      <li>Dixième commandement : Bien d'autrui ne convoiteras pour l'avoir malhonnêtement.
    </ul>

[oiseaublue]

Eh bien à gauche de chaque liste il y a une image avec un espèce de bonhomme et quand on clique dessus ça sélectionne le texte.

Sinon Merci

[Automne]

Ceci viens du css associé a cette class

Code:

/* #tab-regles = contenu associé à l'onglet règles */
#tab-regles ul  {
  font-family: georgia, arial, serif;
  font-size: 17px;
  list-style: url(http://i.imgur.com/DMC6G.gif);
}
#tab-regles li {
  margin-bottom: 10px;
  color: green;
}

[oiseaublue]

Merci problème