Tableau à onglet.

[LaTeamEthologie]

• Bonjour !
  Alors voila, j'aimerais enfin commencer à faire ma Page d’accueil de mon forum encore en construction :coolmavie:
  Bref, j'aimerais faire un tableau à onglet assez spécial.
  Pour ne pas faire de loongues explications inutiles, je vous ai fait un joli petit schéma *O*
  
  
  
  Donc voila, si vous pouviez m'expliquer comment on fait pour faire un bébé qui ressemble à ça !
  Et aussi, quel serait le code pour rajouter un onglet ?
  
  Merci d'avance
  LaTeam ;p

[LaTeamEthologie]

UP SVP !

[kheino]

Bonjour,

Tu peux trouver un tuto dans le genre ici (3 propositions même), si c'est bien ce que j'ai compris...

[LaTeamEthologie]

• Bonjour !
  Merci pour le tuto ! J'avais chercher un dans le genre mais je l'avais pas trouver T-T
  Je vais installer le code et après, je vois ce qu'il faudrait modifier
  
  Merci encore Final-Blond !
  
  
  
• EDIT : Voila, j'ai installer ce magnifique code mais le résultat n'est pas génial... Allez voir ici le résultat. Bon d'accord il n'est pas fini mais bon.
  Alors voila, j'aimerais que la hauteur et la larguer restent les mêmes quand on passe sur n'importe quel onglet. J'aimerais aussi que les onglets soient de larguer 40% et le contenu 60% ... et qu'il prenne toute la largeur (onglet + contenu). Ensuite, j'aimerais savoir comment faire pour que le bor du contenu ait la même tête que ce qu'il y a sur mon shéma.
  
  Voici le code HTML :
  

  Code:

          <table style="margin: auto;"><tr><td><div id="mes_onglets">
                <span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">LOOK</span>
                <span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">AT</span>
                <span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">ME</span>
                <span id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">♥</span></td><td>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu"><table class="defilement">
<tr><td><div style="height:100px; overflow:auto;">blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa</div></tr></td></table></div>
            <div id="co_2" class="mon_contenu" style="display: none;"><table>
<tr>
<td align="left" width="50%"><table class="defilement">
<tr><td><div style="height:100px; overflow:auto;">blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa</div></tr></td></table></td>
<td align="left" width="50%">blaa</td>
</tr>
</table></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>

  
  Et mon CSS qui correspond aux onglets :
  

  Code:

          .mon_onglet{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #000;
          width: 40%;
          background: #fff;
          -moz-border-radius:8px;
          -webkit-border-radius:8 px;
          -border-radius:8 px;
          -khtml-border-radius:8 px;
          border: 1px solid #000;}
       
        .mon_onglet:hover{
          background: #b8efa1;} 
         
        .mon_onglet_selected{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #000;
          width: 40%;
          background: #fff;
          -moz-border-radius:8px;
          -webkit-border-radius:8 px;
          -border-radius:8 px;
          -khtml-border-radius:8 px;
          border: 1px solid #000;}
               
        .clear{
          clear: both;}
       
        .mon_contenu{
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
          margin: 10 px;
          height: 100%px;
          width: 60%;
          -moz-border-radius:8px;
          -webkit-border-radius:8 px;
          -border-radius:8 px;
          -khtml-border-radius:8 px;
          line-height: normal;
          font-size: 11px;}
       
        #mes_contenus, #mes_onglets{
          height: 100%;
          width: 100%;}

  
  Mercii ♥

[LaTeamEthologie]

• Upinou SVP ♥

[LaTeamEthologie]

• UP ! ♥

[LaTeamEthologie]

• UP !
  CA commence à vraiment faire pas beau

[kheino]

Salut,

J'ai dû commencer plus tôt que prévu, d'où mon retard (en même tamps, tout le monde peut intervenir).

Bon quel tableau as-tu mis ?
J'ai mis le troisième sur mon FT, mais les onglets ne s'ouvrent pas, ça reste sur "onglet 1". Faut que je voie ça...

[LaTeamEthologie]

• Voici mon HTML du tableau :
  

  Code:

                  <table style="margin: auto;"><tr><td><div id="mes_onglets">
                        <span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">LOOK</span>
                        <span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">AT</span>
                        <span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">ME</span>
                        <span id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">♥</span></td><td>
                        <div class="clear"><div id="mes_contenus">
                    <div id="co_1" class="mon_contenu"><table class="defilement">
        <tr><td><div style="height:100px; overflow:auto;">blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa</div></tr></td></table></div>
                    <div id="co_2" class="mon_contenu" style="display: none;"><table>
        <tr>
        <td align="left" width="50%"><table class="defilement">
        <tr><td><div style="height:100px; overflow:auto;">blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa blaa</div></tr></td></table></td>
        <td align="left" width="50%">blaa</td>
        </tr>
        </table></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>

  
  Et le CSS qui vas avec :
  

  Code:

                  .mon_onglet{
                  display: block;
                  padding: 5px;
                  margin: 4px;
                  color: #000;
                  width: 40%;
                  background: #fff;
                  -moz-border-radius:8px;
                  -webkit-border-radius:8 px;
                  -border-radius:8 px;
                  -khtml-border-radius:8 px;
                  border: 1px solid #000;}
             
                .mon_onglet:hover{
                  background: #b8efa1;}
               
                .mon_onglet_selected{
                  display: block;
                  padding: 5px;
                  margin: 4px;
                  color: #000;
                  width: 40%;
                  background: #fff;
                  -moz-border-radius:8px;
                  -webkit-border-radius:8 px;
                  -border-radius:8 px;
                  -khtml-border-radius:8 px;
                  border: 1px solid #000;}
                     
                .clear{
                  clear: both;}
             
                .mon_contenu{
                  color: #000;
                  background: #fff;
                  border: 1px solid #000;
                  padding: 10px;
                  margin: 10 px;
                  height: 100%px;
                  width: 60%;
                  -moz-border-radius:8px;
                  -webkit-border-radius:8 px;
                  -border-radius:8 px;
                  -khtml-border-radius:8 px;
                  line-height: normal;
                  font-size: 11px;}
             
                #mes_contenus, #mes_onglets{
                  height: 100%;
                  width: 100%;}

  
  Merci beaucoup de s'occuper de moi ! ♥

[kheino]

Oui mais tu ne réponds pas à ma question :
Quel modèle de tableau as-tu pris du tuto dont je t'ai donné le lien ?

Ton HTML et ton CSS sont déjà modifiés, et à partir de ça, je ne peux pas (défaut de temps) vérifier tout tes codes.

[LaTeamEthologie]

• Désolée :s
  J'ai pris le 3°, celui avec les onglets à gauche.

[kheino]

Ok, c'est le même que j'ai installé aussi.
Mais sans rien modifier, juste pour pouvoir le modifier dans ton sens.

J'ai un souci et je bloque certainement toute seule : je n'arrive pas à ouvrir les autres onglets !

[Roxy.]

Bonjour,

Je ne pourrais vous aidez LaTeamEthologie mais Final-blond pour votre problème, êtes vous sur d'avoir mi le code javascript ? Je sais que je l'avais oublier et qu'il ne marcher donc pas. Essayez normalement ce sera bon.

Cordialement,

[LaTeamEthologie]

• Je comprends plus rien à ce qui se passe

[kheino]

êtes vous sur d'avoir mi le code javascript ? Je sais que je l'avais oublier et qu'il ne marcher donc pas. Essayez normalement ce sera bon.

Bonjour Roxy,

Arf ! Quelle "final-blond" je fais (d'où mon pseudo !), mais oui, il manquait bien le rappel du JS, merci bien.

• Je comprends plus rien à ce qui se passe

Je n'arrivais pas à ouvrir les onglets puisque j'avais oublié le rappel du JS dans le message d'acceuil :

Code:

<script type="text/javascript" src="url_page_js/numero.js"></script>

Maintenant je vais voir pour t'aider plus loin LaTeamEthologie.

[kheino]

j'aimerais que la hauteur et la larguer restent les mêmes quand on passe sur n'importe quel onglet. J'aimerais aussi que les onglets soient de larguer 40% et le contenu 60% ... et qu'il prenne toute la largeur (onglet + contenu). Ensuite, j'aimerais savoir comment faire pour que le bor du contenu ait la même tête que ce qu'il y a sur mon shéma.

Pour avoir une largeur et une hauteur toujours égales, il suffit de donner une largeur fixe (width: ??px;) et une hauteur fixe (height: ??px;) dans le CSS qui correspond au contenu, dans l'exemple c'est l'intitulé : .mon_contenu.

Pour ce qui est de la proportion entre les onglets et les contenus et au vu de ce qui est plus haut, procède avec le width des onglets (et avec des essais) de la même façon.

N'hésite pas si tu as encore un souci.

[LaTeamEthologie]

• Merci ! Et pour faire comme sur mon shéma, le même style de bordure ? Comment on peux faire ? Merci d'avance

[kheino]

Ah j'avais oublié ce point.
Tu veux dire avec des bords arrondis ?

Il faut ajouter aux intitulés .mon_onglet, .mon_onglet_selected et .mon_contenu du radius :

Code:

-moz-border-radius: ??px;
-webkit-border-radius: ??px;
border-radius: ??px;

Les trois radius doivent avoir le même nombre de pixels (px).


EDIT : Pour ce qui est de la bulle (avec la flèche), tu as ici un tuto qui en parle.

[LaTeamEthologie]

• Oké merci mais au final, je ne la fait pas ^^'
  Je garde le topic sous la main ^^
  Encore merci de m'avoir aider ♥