Problème avec un code =/

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

Résolu Problème avec un code =/

Message par carlotta88 le Mer 3 Aoû 2011 - 13:40

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à Mr. Green

Au revoir et à bientôt.


Dernière édition par carlotta88 le Mer 3 Aoû 2011 - 20:04, édité 3 fois

carlotta88
**

Féminin
Messages : 56
Inscrit(e) le : 25/06/2011

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

Résolu Re: Problème avec un code =/

Message par UsagiloveMamoru le Mer 3 Aoû 2011 - 14:19

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>

UsagiloveMamoru
***

Féminin
Messages : 125
Inscrit(e) le : 07/04/2008

UsagiloveMamoru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code =/

Message par Invité le Mer 3 Aoû 2011 - 14:28

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code =/

Message par carlotta88 le Mer 3 Aoû 2011 - 15:02

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

carlotta88
**

Féminin
Messages : 56
Inscrit(e) le : 25/06/2011

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

Résolu Re: Problème avec un code =/

Message par Invité le Mer 3 Aoû 2011 - 15:13

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code =/

Message par carlotta88 le Mer 3 Aoû 2011 - 15:30

Ok merci, je vais voir si ça marche Wink

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

carlotta88
**

Féminin
Messages : 56
Inscrit(e) le : 25/06/2011

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

Résolu Re: Problème avec un code =/

Message par Invité le Mer 3 Aoû 2011 - 18:24

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code =/

Message par carlotta88 le Mer 3 Aoû 2011 - 18:34

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

carlotta88
**

Féminin
Messages : 56
Inscrit(e) le : 25/06/2011

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

Résolu Re: Problème avec un code =/

Message par Invité le Mer 3 Aoû 2011 - 19:20

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code =/

Message par carlotta88 le Mer 3 Aoû 2011 - 20:04

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

carlotta88
**

Féminin
Messages : 56
Inscrit(e) le : 25/06/2011

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum