| Créer une organisation par onglets (messages) | |
|
|
.Little Lady ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 564
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | |
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Yop !
Tu devrais préciser que de cette manière-là, les onglets ne marchent que dans la news et que la manière pour les insérer dans les messages est différente, y a pas mal de membres qui essaient de l'insérer dans des messages et qui n'y arrivent pas ^^ | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
.Little Lady ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 564
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Je l'ai précisé au début du tuto en disant qu'il marchait sur la PA et sur les pages HTML. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Lexis ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 26
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Je dois vraiment être nulle car je n'y arrive pas...
Je pense que je dois faire une erreur quand je mets le code dans la PA, car les titres s'affichent bien, mais quand je passe la souris, rien ne s'affiche... | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
.Little Lady ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 564
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Peux tu me montrer le code que tu as mis sur ta PA ?? | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
'Christa ![Lostmindy Lostmindy](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Lostmindy
Messages : 2856
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Y'en a qui aiment bien reprendre les tutos des gens sans indiquer leur source, hein ?
-- > http://www.supportduweb.com/scripts_tutoriaux-code-source-48-systeme-d-onglets-en-javascript-x-html-et-css-dans-la-meme-page.html | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
.Little Lady ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 564
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Euh non j'ai pas repris ce tutoriel là mais bon. Je l'ai fait à partir d'une commande que j'avais passé sur un autre forum. De plus, le lien que tu as donné, je ne le connaissais pas. Et le tuto que tu montres met tout dans la même page HTML or moi non.
La prochaine fois, pose la question à l'auteur avant de dire ça. Merci. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
'Christa ![Lostmindy Lostmindy](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Lostmindy
Messages : 2856
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Même si tu ne l'a pas repris de là, ce qui est possible, ton propos sous entend que tu l'as repris d'ailleurs. Il n'y a pas de honte à citer ses sources, tu sais, et au contraire, c'est même plus flatteur. Je trouve personnellement dommage, mais cet avis n'engage que moi, de retrouver des codes identiques sur deux sites différents. Quant à ta justification, si elle n'est pas fausse, il reste que le code d'origine est le même, je revois les deux mêmes erreurs que j'avais notées quand j'avais utilisé ma propre source, et la fonction javascript comme les classes sont identiques ^^ (d'ailleurs on retrouve ce "quoi" dans un coin du code, qui n'a pas été changé en "nom_de_l'onglet") J'ajoute donc une petite précision à ton tutoriel : Choisir l'onglet qui sera ouvert par défaut : A la fin du code HTML (APRES la partie des onglets, sinon cela ne marchera pas) se trouve ce petit script javascript : - Code:
-
<script type="text/javascript"> //<!-- var anc_onglet = 'nom_onglet_par_defaut'; change_onglet(anc_onglet); //--> </script> Une fois que tous vos onglets auront été mis en place, vous n'aurez qu'à préciser le nom de celui que vous voulez voir apparaître à l'ouverture de la page (et à chaque rechargement). A noter que ce système d'onglets, néanmoins, n'est pas fonctionnel si le javascript est désactivé (les utilisateurs du plugin Noscript de firefox vont s'en arracher les cheveux XD) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Pips'up ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 21
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | - Lexis a écrit:
Je dois vraiment être nulle car je n'y arrive pas...
Je pense que je dois faire une erreur quand je mets le code dans la PA, car les titres s'affichent bien, mais quand je passe la souris, rien ne s'affiche...
Idem pour moi =/
Voici ce que j'ai mis dans ma PA :
- Code:
-
<div class="onglets"> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">New</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Coté Rp</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Partenaires</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"><div class="boite"> <blockquote><div align="justify"><span style="font-size: 20px; line-height: normal"><b>♪</span> ../../.. :</b> Nouveau design dans les tons jaune par Pips'up, accompagner des nouvelles terres et de la mise en place du meilleur Rpgiste du mois ! [ pour plus d'info' <a href="http://forest-wolf.forumactif.com/messages-importants-f3/design-arret-migration-nouveautes-t710.htm#9275" class="postlink">ICI</a>]<br>
<span style="font-size: 20px; line-height: normal"><b> ♪</span> 7/03/10 :</b> Nouveau design dans les tons violet de Coconut's avec un petit élément perturbateur. <br> <br> <span style="font-size: 20px; line-height: normal"><b> ♪</span> 6/01/10 :</b> Forest Wolf a 1 ans ! </div></blockquote> </div></div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'New'; change_onglet(anc_onglet); //--> </script> - Citation :
- A noter que ce système d'onglets, néanmoins, n'est pas fonctionnel si le javascript est désactivé
Où pouvons-nous savoir si le javascript est désactivé ou pas ? =3 Merci d'avance (:
| | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kimy ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 1190
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Bonjour =) Si tu remplaces la moitié des éléments c'est sur que cela ne marchera pas ^^ Compare bien ton code et celui-là, et tu comprendras =) - Code:
-
<div class="onglets"> <span class="onglet_0 onglet" id="onglet_new" onclick="javascript:change_onglet('new');">New</span> <span class="onglet_0 onglet" id="onglet_rp" onclick="javascript:change_onglet('rp');">Coté Rp</span> <span class="onglet_0 onglet" id="onglet_partenaire" onclick="javascript:change_onglet('partenaire');">Partenaires</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_new"><div class="boite"> <blockquote><div align="justify"><span style="font-size: 20px; line-height: normal"><b>♪</span> ../../.. :</b> Nouveau design dans les tons jaune par Pips'up, accompagner des nouvelles terres et de la mise en place du meilleur Rpgiste du mois ! [ pour plus d'info' <a href="http://forest-wolf.forumactif.com/messages-importants-f3/design-arret-migration-nouveautes-t710.htm#9275" class="postlink">ICI</a>]<br>
<span style="font-size: 20px; line-height: normal"><b> ♪</span> 7/03/10 :</b> Nouveau design dans les tons violet de Coconut's avec un petit élément perturbateur. <br> <br> <span style="font-size: 20px; line-height: normal"><b> ♪</span> 6/01/10 :</b> Forest Wolf a 1 ans ! </div></blockquote> </div></div>
<div class="contenu_onglet" id="contenu_onglet_rp">Contenu de l'onglet</div>
<div class="contenu_onglet" id="contenu_onglet_partenaire">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'new'; change_onglet(anc_onglet); //--> </script> | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sui ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 346
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Bonjour, je voulais savoir s'il est possible d'utiliser ce tutoriel pour faire afficher/cacher des catégories de forums... si vous voyez ce que je veux dire. (: | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Pips'up ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 21
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Kimy -> Ah oui effectivement ... x) Je me sens bête là xD En tout cas merci pour ta réponse ;D Pour l'instant ça marche x3 | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Bonjour Sui,
Un Tutoriel reprenant le code créé par Iowan est en cours d'écriture, ce ne sera pas long ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sui ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 346
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Merci beaucoup Kaiji ! (: | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Pocky'Mosh ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 26
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Bonjour, bonjour =] Peut-on intégrer ce système dans un QEEL? J'sais pas moi, en copiant le code de la page HTML dans le template overall_footer au lieu du overall_header_new... Je sais c'est un peu hasardeux, mais si quelqu'un sait comment mettre des onglets dans un QEEL je lui en serais très reconnaissante ^^ Merci d'avance. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
.Little Lady ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 564
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Je pense que oui puisque le QEEL de CSSActif possède des onglets cliquables. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Pocky'Mosh ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 26
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | J'suis un méga-boulet --" j'avais même pas pensé à regarde celui de CCSActif x) Mais est-ce que le système serait le même que pour une PA? | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
.Little Lady ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 564
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Je pense que oui mais fais quand même une vérification sur un forum de test. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Pocky'Mosh ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 26
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | C'est ce que je pensais effectivement faire, mais ce qui me pose problème c'est où placer le code de la page HTML. Je fais faire un essai dans le template overall_header_new. & après dans le overall_footer. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Thryna ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 84
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | tout d'abord, merci pour le tutoriel ! ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png) Je l'utilise dans une page html et tout fonction, mais j'ai une question... j'aimerais savoir quel parti du code sert à placer les noms des onglets en haut. Car j'aimerais les placer ailleurs et je ne trouve pas comment faire !!! Merci d'avance ! | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Thryna ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 84
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | désolée du double poste... après deux jours de recherche... j'viens de trouver ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png) merci tout de même !!! | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Tsunam!s ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 45
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Bonjour à tous et à toutes... J'aimerais savoir comment agrandir le cadre contenue des Onglets parce que l'image contenue à l'intérieur est beaucoup trop grande... Merci à tous ceux qui pourront m'aider j'en ai vraiment vraiment vraiment besoin. Merci d'avance
P.S: Pour voir ce que ça fait? ICI Merci encore ^^ | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Streetwalker ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 16
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | JE suis aussi intéressée par les onglets dans le QEEL ![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif) Et Merci infinimment pour ce tuto, il est très pratique ! | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
.Little Lady ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 564
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | - Pocky'Mosh a écrit:
C'est ce que je pensais effectivement faire, mais ce qui me pose problème c'est où placer le code de la page HTML. Je fais faire un essai dans le template overall_header_new. & après dans le overall_footer. Ce n'est pas dans ces templates. Le QEEL se trouve dans le template index_body | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Dreamland ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 96
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | Bonjour, Comment faire pour que les onglets se retrouve au dessus du tableau de la PA ? car sur mon forum tout reste dans la PA et j'aimerais bien les mettre au dessus... Merci d'avance ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Contenu sponsorisé
![Créer une organisation par onglets (messages) Empty](https://2img.net/i/fa/empty.gif) | |
![Aller en bas](https://2img.net/i/empty.gif) | |
| Créer une organisation par onglets (messages) | |
|