Problème avec un code =/

[carlotta88]

Bonjour.

Je ne suis vraiment pas calée dans tous ces codes et j'ai encore un problème ... J'espère que cette fois-ci quelqu'un me répondra. Enfin bref, je vous explique. J'ai inséré un tableau à onglet dans mon message d'accueil. J'essaie pour le moment de le mettre en place et je n'arrive pas à déplacer mon tableau pour le mettre bien au centre. Pour information, j'ai pris les codes sur le tuto de Isolde dans la partie "Trucs et Astuces", peut-être ai-je raté quelque chose...
Je vous montre ce que cela donne :


Je ne sais pas où le problème se trouve, je vais donc vous montrer tous les codes que j'utilise.
Le code CSS :

Code:

    .mon_onglet{
      display: inline;
      padding: 2px;
      margin: 2px;
      color: #000;
      background: #fff;
      border: 1px solid #000;}

    .mon_onglet:hover{
      background: #ffffff;}
         
    .mon_onglet_selected{
      display: inline;
      padding: 2px;
      margin: 2px;
      color: #000;
      background: #ffff;
      border: 1px solid #000;}
         
    .clear{
      clear: both;}

    .mon_contenu{
      color: #000;
      background: #fff;
      border: 1px solid #000;
      padding: 10px;
      margin: 10 px;
      height: 100px;
      line-height: normal;
      font-size: 11px;}

    #mes_contenus, #mes_onglets{
      height: 200%;
      width:200%;}

Le code Javascript :

Code:

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

Et le code que j'utilise pour le message d'accueil :

Code:

    <center><table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
        <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
            <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
            <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
            <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></td></tr>
    <tr><td>
            <div class="clear"><div id="mes_contenus">
        <div id="co_1" class="mon_contenu">Mon contenu 1 </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></div></td></tr></table></center>function changeOnglet(_this){
        var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
        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';
                }
            }
        }   
    }

Voilà les trois codes. J'espère bien que quelqu'un pourra m'aider. J'ai l'impression de me répété là

Au revoir et à bientôt.

[UsagiloveMamoru]

Salut ^^ Je viens de l'installer sur mon forum de test donc je vais te redonner les codes d'Isolde normalement ça devrait marcher :


JAVASCRIPT : (un titre et coche "sur l'index")

Code:

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

CSS :

Code:

    .mon_onglet{
      display: inline;
      padding: 2px;
      margin: 2px;
      color: #000;
      background: #fff;
      border: 1px solid #000;}

    .mon_onglet:hover{
      background: #b8efa1;}
         
    .mon_onglet_selected{
      display: inline;
      padding: 2px;
      margin: 2px;
      color: #000;
      background: #ffff;
      border: 1px solid #000;}
         
    .clear{
      clear: both;}

    .mon_contenu{
      color: #000;
      background: #fff;
      border: 1px solid #000;
      padding: 10px;
      margin: 10 px;
      height: 120px;
      line-height: normal;
      font-size: 11px;}

    #mes_contenus, #mes_onglets{
      height: 100%;
      width:100%;}

PAGE D'accueil :

Code:

<table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></td></tr>
<tr><td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1 </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></div></td></tr></table>

[Invité]

Bonjour,

Vous avez réglé la taille globale du tableau à 200%:

Code:

 #mes_contenus, #mes_onglets{
      height: 200%;
      width:200%;}

Le problème vient de là. En réglant sur 100% le tableau est centré.

D'autre part, le code javascript est placé dans votre message d'accueil, si vous avez mis le code dans la gestion des javascript, ce n'est pas utile.

Cordialement.

[carlotta88]

Justement, j'aimerai que la largeur fasse plus de 100%. ^^

[Invité]

Ce qui fait que le tableau est petit au centre du message d'accueil, n'est pas régit par le CSS. l'espace pris par le tableau est à ajouter dans le code HTML, au tout début, remplacez:

Code:

<table style="margin: auto;">

par:

Code:

<table style="margin: auto; width:100%;">

Puis réglez le pourcentage à votre convenance. Vous pouvez même le remplacer par un nombre de pixel si vous le désirez.

Cordialement.

[carlotta88]

Ok merci, je vais voir si ça marche

Édit : Niquel, ça marche très bien. Encore merci ;D

Re édit : Il y a un nouveau problème -_- Le contenu que j'ai écris pour le premier onglets part en dessus et le reste, tout ce déforme ... Voilà le code, des fois j'ai peut-être enlever quelque chose ^^

Code:

<table style="margin: auto;" width:90%;"><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Z’horse</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Nouveautés</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Modération</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Liens utiles</span></td></tr>
<tr><td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Bienvenue {USER&amp;#8288;NAME} !<tr>Z'horse, c'est quoi ? C'est un forum pour les passionner d'équitation et de chevaux, ainsi que de Mission Equitation Online, aussi connus sous le nom de MEO. Bien évidemment nous ne parlons pas que de ça, il y a d'autres parties. Des parties pour le graphisme, les délires entre potes, la photographie ... etc. Z'horse, c'est avant tout un forum convivial où tout le monde s'entend. Attention à ceux qui ne respectent pas cette règle ^^ </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></div></td></tr></table>


[Invité]

Vous avez un <tr> qui se promène tout seul, en le retirant, ça ne fonctionne pas mieux?

<div id="co_1" class="mon_contenu">Bienvenue {USER&amp;#8288;NAME} !<tr>Z'horse, c'est quoi ?

Cordialement.

[carlotta88]

J'ai fais un nouveau tableau, et cette fois-ci, j'ai rempli l'onglet 4 avec une simple boite de navigation rapide. Voici le résultat ... http://zhorse.forumgratuit.org/ Je ne crois pas que se sois à cause du "<tr>" ...

[Invité]

En retirant le <tr> de votre premier essai, je ne rencontre pas de soucis sur mon forum test , idem avec votre second essai en retirant le <tr> ...
<tr> est la balise servant à ouvrir un ligne dans un tableau. Si vous l'ouvrez sans jamais la refermer elle se place au dessus du tableau existant.

J'ai meme cumuler les 2 texte sans problème, en remplaçant les <tr> par <br />:

Code:

<table style="margin: auto; width:90%;" ><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Z’horse</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Nouveautés</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Modération</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Navigation rapide</span></td></tr>
<tr><td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Bienvenue {USER&amp;#8288;NAME} !<br />
Z'horse, c'est quoi ? C'est un forum pour les passionner d'équitation et de chevaux, ainsi que de Mission Equitation Online, aussi connus sous le nom de MEO. Bien évidemment nous ne parlons pas que de ça, il y a d'autres parties. Des parties pour le graphisme, les délires entre potes, la photographie ... etc. Z'horse, c'est avant tout un forum convivial où tout le monde s'entend. Attention à ceux qui ne respectent pas cette règle ^^ </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;"><span class="infobulle">Carlotta88
  <span class="infobulle-hidden">
      Administratrice et fondatrice du forum. Elle sera toujours là pour vous aidez ! =D
  </span>
</span></div>
    <div id="co_4" class="mon_contenu" style="display: none;"><br /><form>
<select style="width: 268px" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
Galoper vers
</option>
 
 
<option value="http://zhorse.forumgratuit.org/f1-reglement">
Le Règlement
</option>
 
 <option value="http://zhorse.forumgratuit.org/f5-faq-foire-aux-questions">
La Foire Aux Questions
</option>
 
<option value="http://zhorse.forumgratuit.org/f3-le-coin-des-invites">
Le Coin Des Invités
</option>
 
<option value="http://zhorse.forumgratuit.org/f2-annonce-et-news">
Les Annonces
</option>
 
 
 
</select>
</form></div>
</div></div></div></td></tr></table>

Cordialement.

[carlotta88]

C'est parfait, merci !
En fait, j'ai dû confondre la balise, ça doit être pour ça. =/