Problème avec le tableau à onglets.

2 participants

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

Résolu Problème avec le tableau à onglets.

Message par Chamal0h Mar 28 Fév 2012 - 18:03

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.


Dernière édition par Chamal0h le Mer 29 Fév 2012 - 1:39, édité 1 fois
Chamal0h

Chamal0h
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 22/12/2011

http://hellhunter.forumgratuit.org/
Chamal0h a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le tableau à onglets.

Message par Automne Mar 28 Fév 2012 - 18:06

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.
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le tableau à onglets.

Message par Chamal0h Mar 28 Fév 2012 - 18:18

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;}
Chamal0h

Chamal0h
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 22/12/2011

http://hellhunter.forumgratuit.org/
Chamal0h a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le tableau à onglets.

Message par Automne Mar 28 Fév 2012 - 18:56

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>
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le tableau à onglets.

Message par Chamal0h Mar 28 Fév 2012 - 23:54

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

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 ...
Chamal0h

Chamal0h
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 22/12/2011

http://hellhunter.forumgratuit.org/
Chamal0h a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le tableau à onglets.

Message par Automne Mer 29 Fév 2012 - 0:19

Re,

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

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le tableau à onglets.

Message par Chamal0h Mer 29 Fév 2012 - 0:22

Oui c'est tout à fait ca !
Chamal0h

Chamal0h
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 22/12/2011

http://hellhunter.forumgratuit.org/
Chamal0h a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le tableau à onglets.

Message par Automne Mer 29 Fév 2012 - 1:10

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>

Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec le tableau à onglets.

Message par Chamal0h Mer 29 Fév 2012 - 1:36

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 Yahoo
Toujours aussi efficace !
Chamal0h

Chamal0h
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 22/12/2011

http://hellhunter.forumgratuit.org/
Chamal0h 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