Tableau à onglet.

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

Résolu Tableau à onglet.

Message par LaTeamEthologie le Dim 28 Aoû 2011 - 18:22

  • 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 Very Happy
    LaTeam ;p


Dernière édition par LaTeamEthologie le Dim 4 Sep 2011 - 22:11, édité 1 fois

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Lun 29 Aoû 2011 - 16:11

UP SVP !

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par Final-Blonde le Lun 29 Aoû 2011 - 16:31

Bonjour,

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Lun 29 Aoû 2011 - 16:45

  • 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 Very Happy

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

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Mer 31 Aoû 2011 - 12:02

  • Upinou SVP ♥

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Jeu 1 Sep 2011 - 14:30

  • UP ! ♥

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Sam 3 Sep 2011 - 12:00

  • UP !
    CA commence à vraiment faire pas beau Mad

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par Final-Blonde le Dim 4 Sep 2011 - 12:35

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Dim 4 Sep 2011 - 14:43

  • 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 ! ♥

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par Final-Blonde le Dim 4 Sep 2011 - 14:52

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Dim 4 Sep 2011 - 15:03

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

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par Final-Blonde le Dim 4 Sep 2011 - 16:04

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 !

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par Roxy. le Dim 4 Sep 2011 - 16:18

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,

Roxy.
# Tropactif #

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Dim 4 Sep 2011 - 16:38

  • Je comprends plus rien à ce qui se passe Mad

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par Final-Blonde le Dim 4 Sep 2011 - 17:08

@Roxy. a écrit:ê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.

@LaTeamEthologie a écrit:
  • Je comprends plus rien à ce qui se passe Mad
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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par Final-Blonde le Dim 4 Sep 2011 - 17:39

@LaTeamEthologie a écrit: 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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Dim 4 Sep 2011 - 17:58

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

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

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

Résolu Re: Tableau à onglet.

Message par Final-Blonde le Dim 4 Sep 2011 - 18:10

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet.

Message par LaTeamEthologie le Dim 4 Sep 2011 - 22:11

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

LaTeamEthologie
**

Féminin
Messages : 92
Inscrit(e) le : 04/08/2011

http://silvercrest.forumgratuit.org/
LaTeamEthologie 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