Problème avec le tableau à onglets.

[Chamal0h]

Bonjour,

J'ai fais pas mal de page du forum mais je n'ai pas trouver de solution donc je poste un nouveau sujet en espérant que le souci sera vite réglé ! J'ai repris le tableau à onglets du forum donc j'ai tout les bon codes.

La tableau est super et tout pas de bug sauf que les onglets ne marche pas, la gestion des codes Javascript est activer et donc je reste bloqué à ce niveau. Je sais pas si c'est un souci de code ou de forum ...

L'adresse de mon Forum : Hell Hunter

Merci d'avance,
Chaml0h.

[Automne]

Bonjour,

Vous avez repris se tuto. https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil

Pourriez vous me donnez les différent code css,html et javascript que vous avez mis. Merci.

[Chamal0h]

Oui c'est bien cela !

Pas de souci :

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

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Hell Hunter.</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Bienvenue.</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Contexte.</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Ramène des amis !</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><div><center><div style="height: auto; width: 480px; background-color: darkgray; -moz-box-shadow: 2px 2px 2px dimgray; -moz-border-radius: 15px 15px 15px 15px;border: 2px solid lavender;  credit-site-css:mycandids.tk;padding: 15px;"><div style="margin-top:-25px;letter-spacing: -2px; font-weight:bold;text-align: center; border-bottom: medium dotted lavender;"><br><font color="lavender"><span style="font-size: 28px; text-transform:uppercase; line-height: normal;font-family:Courier New; "><strong>Hell Hunter.</strong></span></font></div><div><center><div style="width: 400px; height: 220px; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px; background-repeat: no-repeat; background-position: center top; border: 5px solid dimgray; padding: 7px; background-image: url(http://i43.servimg.com/u/f43/15/33/89/34/accuei11.jpg);"></div><div style="font-size:10px;text-align:right;padding-right:15px;"><a href="http://candids.nexgate.ch" class="postlink" target="_blank" rel="nofollow">CRÉDIT - CSS</a></div></div>
    <div id="co_2" class="mon_contenu" style="display: none;">Coucou !</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></ul></div>


<table><tbody><tr><td><div style="border: 5px solid darkgray;"><img style="display: inline;" src="http://i47.servimg.com/u/f47/14/87/50/01/brasfj10.jpg" border="0"></div><div style="background-color: darkgray; height: 15px; color: white;"><span style="font-size: 9px; line-height: normal;font-family: Comic Sans MS;"><div style="margin: auto; text-align: center; width: 100%;">(c) </div></span></div></td><td width="90%"><div style="border: 5px solid darkgray; height: 45px; overflow: auto; background-color: lavender; padding: 10px; border-radius: 0px 20px 20px 0px; margin-left: -5px;text-align:justify;"> <a href="http://www.root-top.com/topsite/velusia/in.php?ID=5043" class="postlink" target="_blank" rel="nofollow">Top Site Velusia</a> • <a href="http://www.root-top.com/topsite/blueberry/in.php?ID=3527" class="postlink" target="_blank" rel="nofollow">WALL OF FAME // le top site de providence</a> • <a href="http://www.root-top.com/topsite/hoglard/in.php?ID=4777" class="postlink" target="_blank" rel="nofollow">Dawn of Destiny : Top site de jeux de rôle</a> • <a href="http://www.root-top.com/topsite/ploplop/in.php?ID=1538" class="postlink" target="_blank" rel="nofollow">Top site RPG - Our Own World</a></div></td></tr></tbody></table>

Code css

Code:

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #fff;
  background: #;
  border: 1px solid #000;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;
}
.mon_onglet:hover{
  background: #b8efa1;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #fff;
  background: #;
  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: #fff;
  background: #;
  border: 1px solid #000;
  padding: 10px; 
  line-height: normal;
  font-size: 11px;}
#mes_contenus, #mes_onglets{
  width: 490px;
  margin: auto;}

[Automne]

Bon on va d'abord changer le code de la page d'acceuil. J'ai refais un peu votre tableau, ou il y avait pas mal de div ouverte et non fermés.

Changer votre code page d'acceuil par celui ci et vois si le problème vient de là.

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Hell Hunter.</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Bienvenue.</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Contexte.</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Ramène des amis !</li>
        <div class="clear"><div id="mes_contenus">

            <div id="co_1" class="mon_contenu"><div style="height: auto; width: 480px; background-color: darkgray; -moz-box-shadow: 2px 2px 2px dimgray; -moz-border-radius: 15px 15px 15px 15px;border: 2px solid lavender;  creditsitecss:mycandids.tk;padding: 15px;"><div style="margin-top:-25px;letter-spacing: -2px; font-weight:bold;text-align: center; border-bottom: medium dotted lavender;"><br><font color="lavender"><span style="font-size: 28px; text-transform:uppercase; line-height: normal;font-family:Courier New; "><strong>Hell Hunter.</strong></span></font></div><div style="width: 400px; height: 220px; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px; background-repeat: no-repeat; background-position: center top; border: 5px solid dimgray; padding: 7px; background-image: url(http://i43.servimg.com/u/f43/15/33/89/34/accuei11.jpg);"></div><div style="font-size:10px;text-align:right;padding-right:15px;"><a href="http://candids.nexgate.ch" class="postlink" target="_blank" rel="nofollow">CRÉDIT - CSS</a></div></div></div>
            <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</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></ul></div>

<table><tbody><tr><td><div style="border: 5px solid darkgray;"><img style="display: inline;" src="http://i47.servimg.com/u/f47/14/87/50/01/brasfj10.jpg" border="0"></div><div style="background-color: darkgray; height: 15px; color: white;"><span style="font-size: 9px; line-height: normal;font-family: Comic Sans MS;"><div style="margin: auto; text-align: center; width: 100%;">(c) </div></span></div></td><td width="90%"><div style="border: 5px solid darkgray; height: 45px; overflow: auto; background-color: lavender; padding: 10px; border-radius: 0px 20px 20px 0px; margin-left: -5px;text-align:justify;"> <a href="http://www.root-top.com/topsite/velusia/in.php?ID=5043" class="postlink" target="_blank" rel="nofollow">Top Site Velusia</a> • <a href="http://www.root-top.com/topsite/blueberry/in.php?ID=3527" class="postlink" target="_blank" rel="nofollow">WALL OF FAME // le top site de providence</a> • <a href="http://www.root-top.com/topsite/hoglard/in.php?ID=4777" class="postlink" target="_blank" rel="nofollow">Dawn of Destiny : Top site de jeux de rôle</a> • <a href="http://www.root-top.com/topsite/ploplop/in.php?ID=1538" class="postlink" target="_blank" rel="nofollow">Top site RPG - Our Own World</a></div></td></tr></tbody></table>

[Chamal0h]

C'est bien ce que je me disais, des div non pas étaient bien fermés ... Le tableau marche super bien maintenant ! Merci beaucoup.

Est-ce que je peux encore vous embêtez ? Je voudrais garder mon cadre en html que j'ai repris d'un site pour avoir un tableau harmonieux mais je voulais savoir comment mettre à la place de l'image du texte ... enfin quelle partie du code html il faut changer pour pouvoir mettre du texte ...

[Automne]

Re,

C'est a dire qu'à la place de l'image, vous souhaitez du texte?

[Chamal0h]

Oui c'est tout à fait ca !

[Automne]

Ok, se doit etre bon.

Pensez a la mise en forme du texte, saut de ligne ....

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Hell Hunter.</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Bienvenue.</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Contexte.</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Ramène des amis !</li>
        <div class="clear"><div id="mes_contenus">
 
            <div id="co_1" class="mon_contenu"><div style="height: auto; width: 480px; background-color: darkgray; -moz-box-shadow: 2px 2px 2px dimgray; -moz-border-radius: 15px 15px 15px 15px;border: 2px solid lavender;  creditsitecss:mycandids.tk;padding: 15px;"><div style="margin-top:-25px;letter-spacing: -2px; font-weight:bold;text-align: center; border-bottom: medium dotted lavender;"><br><font color="lavender"><span style="font-size: 28px; text-transform:uppercase; line-height: normal;font-family:Courier New; "><strong>Hell Hunter.</strong></span></font></div><div style="width: 400px; height: 220px; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px; background-repeat: no-repeat; background-position: center top; border: 5px solid dimgray; padding: 7px;">ICI MISE EN FORME TEXTE</div><div style="font-size:10px;text-align:right;padding-right:15px;"><a href="http://candids.nexgate.ch" class="postlink" target="_blank" rel="nofollow">CRÉDIT - CSS</a></div></div></div>


            <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</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></ul></div>

[Chamal0h]

Ouii j'y penserais !Ca ne me pose pas trop de souci ca. Ca marche super bien ! Nikel rien à dire !
Merci beaucoup de votre aide
Toujours aussi efficace !