Tableau à onglet.
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Tableau à onglet.
- 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
Dernière édition par LaTeamEthologie le Dim 4 Sep 2011 - 22:11, édité 1 fois
Re: Tableau à onglet.
UP SVP !
Re: Tableau à onglet.
Bonjour,
Tu peux trouver un tuto dans le genre ici (3 propositions même), si c'est bien ce que j'ai compris...
Tu peux trouver un tuto dans le genre ici (3 propositions même), si c'est bien ce que j'ai compris...
Re: Tableau à onglet.
- 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 ♥
Re: Tableau à onglet.
- Upinou SVP ♥
Re: Tableau à onglet.
- UP ! ♥
Re: Tableau à onglet.
- UP !
CA commence à vraiment faire pas beau
Re: Tableau à onglet.
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...
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...
Re: Tableau à onglet.
- 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 ! ♥
Re: Tableau à onglet.
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.
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.
Re: Tableau à onglet.
- Désolée :s
J'ai pris le 3°, celui avec les onglets à gauche.
Re: Tableau à onglet.
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 !
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 !
Re: Tableau à onglet.
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,
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,
Re: Tableau à onglet.
- Je comprends plus rien à ce qui se passe
Re: Tableau à onglet.
Bonjour Roxy,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.
Arf ! Quelle "final-blond" je fais (d'où mon pseudo !), mais oui, il manquait bien le rappel du JS, merci bien.
Je n'arrivais pas à ouvrir les onglets puisque j'avais oublié le rappel du JS dans le message d'acceuil :LaTeamEthologie a écrit:
- Je comprends plus rien à ce qui se passe
- Code:
<script type="text/javascript" src="url_page_js/numero.js"></script>
Maintenant je vais voir pour t'aider plus loin LaTeamEthologie.
Re: Tableau à onglet.
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.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 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.
Re: Tableau à onglet.
- Merci ! Et pour faire comme sur mon shéma, le même style de bordure ? Comment on peux faire ? Merci d'avance
Re: Tableau à onglet.
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 :
EDIT : Pour ce qui est de la bulle (avec la flèche), tu as ici un tuto qui en parle.
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;
EDIT : Pour ce qui est de la bulle (avec la flèche), tu as ici un tuto qui en parle.
Re: Tableau à onglet.
- Oké merci mais au final, je ne la fait pas ^^'
Je garde le topic sous la main ^^
Encore merci de m'avoir aider ♥
Sujets similaires
» Sur un tableau à trois onglet, je ne peux pas changer d'onglet
» double tableau à onglet
» Tableau a Onglet : onglet qui ne souvre pas
» Tableau à onglet
» Un onglet de chaque côté du tableau ?
» double tableau à onglet
» Tableau a Onglet : onglet qui ne souvre pas
» Tableau à onglet
» Un onglet de chaque côté du tableau ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum