Sujets similaires

Bonjour!
Voilà, je trouve le système d'onglets très utile, je l'ai par ailleurs utilisé afin de me construire une PA à la fois concise et complète, seulement... La PA est bien le seul endroit où j'arrive à appliquer ce système, mais j'aimerais beaucoup y parvenir dans les messages également. é.è

J'ai donc cherché comment y arriver, mais le mieux que je parvienne à faire est de créer un onglet dans un message; le soucis -> Je ne parviens pas à afficher son contenu. x.x

J'ai procédé en insérant cette partie du code des onglets dans le CSS de mon forum:

Spoiler:

Ainsi, j'espérais pouvoir le ré-utiliser dans les messages grâce à un Span Class, ce qui visiblement fonctionne, ou du moins, à moitié, comme ce n'est opérationnel que pour l'onglet et non pour son contenu. n.n"

Enfin, voici donc le code que j'ai inséré dans un message:

Code:: <span class="onglet onglet" id="onglet_description_courte" onclick="javascript:change_onglet('description_courte');">Description Courte</span>

<span class="contenu_onglet" id="contenu_onglet_description_courte">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</span>

Quelqu'un saurait-il me dire ce qui cloche, ou encore s'il existe un autre moyen de parvenir à mes fins (d'utiliser le système des onglets via un message)? é.è

Merci d'avance pour votre aide. ^^

Amitiés,
CréaChose

Hum, est-ce que tu as bien suivi le tuto que tu as trouvé ? (:

Eh bien là est mon problème. ^^"
Je n'ai malheureusement pas trouvé de tutoriel où la création d'onglets dans les messages est expliquée. Les seuls que j'ai trouvés touchent la PA, mais pour ça j'y suis déjà parvenue, et les onglets dans les catégories, mais je n'ai rien trouvé concernant les messages. é.è

J'ai donc testé quelques codes par moi-même mais aucun ne fonctionne, pourtant je sais bien qu'il est possible de le faire puisque je l'ai déjà vu dans un message sur un autre forum. C'est pourquoi je pose ma question ici, afin de savoir si quelqu'un connaîtrait la méthode à employer puisqu'aucune des miennes ne fonctionne. ^^

Bonjour,

Tu peux utiliser les I-Frame.
C'est à dire te créer une page html sur ton forum (ou sur un forum de test) et utiliser l'I-Frame pour l'afficher dans un message. Par contre si tu veux modifier le contenu, tu devras modifier dans la page HTML.

Je peux expliquer comment créer une I-Frame si tu ignores comment faire ^^

EDIT : En fait y'a un tuto qui y ressemble, crée par Imari ici. Mais si ce n'est pas clair, dis le Wink

Bonjour! ^^
Alors euhm, je suis... larguée! Déjà (pour dire le point auquel je suis à l'arrache en CSS), j'ignore non seulement comment créer un I-Frame (je retenterai de déchiffrer le tutoriel comme je n'ai fait qu'une lecture), mais j'ignore même ce que c'est... é.è

Mais tu dis que depuis une I-Frame et une page HTML je devrais pouvoir utiliser des onglets comme ceux sur La PA de ce forum test dans les messages?

Juste pour m'en assurer, comme ce n'est pas des zones cliquables comme celle proposées sur le tutoriel que je recherche. ^^

Le tutoriel de .Little Lady correspond sûrement à ce que tu souhaites faire : https://css-actif.forumactif.org/structures-des-forums-f31/organisation-par-onglet-t4747.htm

Un exemple de ce qu'on peut faire avec une I-Frame dans un message : cliiic (c'est mon forum, je précise xD)

Le tuto donné par Little Lady ne marche que dans les pages d'accueil & les pages html. Si tu veux utiliser ce système dans un message posté sur ton forum - comme dans mon exemple - tu dois utiliser un système d'I-Frame.

C'est à dire :
- Créer une page html sur ton forum par exemple; via le panneau administration >> modules >> pages html
- Utiliser ce code et le coller dans le message que tu veux :

Code:: <iframe width="LARGEUR" height="HAUTEUR" frameborder="0" src="LIEN DE LA PAGE HTML" target="_blank"></iframe>

Si je comprends bien, tu veux ton système d'onglets dans un message; comme dans mon exemple ? C'est pour mettre quoi ? Je peux t'aider à faire la page si tu le souhaites et ensuite à appliquer l'I-Frame Wink

EDIT : Haricoow : justement non; puisque Créachose veut utiliser ce code dans un message. Hors le tuto de Little Lady ne s'applique qu'aux pages d'accueil Wink

Oui. Je croyais que c'était dans une PA qu'il voulait le message d'accueil.
J'ai lu le sujet trop vite Very Happy

Re-bonjour!
Merci beaucoup pour vos réponses, j'apprécie beaucoup votre aide, surtout que comme vous aurez pu le constater, je suis assez à la bourre en matière de codages... é.è

Alors en effet, ce que tu montres dans ton message ressemble à ce que j'aimerais obtenir comme résultat, Liliana! J'ai fait une recherche car je me souvenais avoir vu précisément ce que je recherchais dans le message d'un autre forum, voici donc une capture d'écran en spoiler:

Spoiler:

Je voudrais en fait pouvoir utiliser le système d'onglets, comme je l'ai utilisé sur ma PA, dans les messages de mon forum afin de les rendre plus concis, par exemple dans le cas d'un scénario, dans un onglet j'inscris l'intrigue, dans l'autre les consignes, et dans le dernier les informations additionnelles, ou encore des PVs comme sur l'exemple donné. ^^

Seulement, mon problème est que la deuxième partie du code que j'ai inséré dans mon message ne s'applique pas, soit celle du contenu (étant donné que mon onglet, lui, est visible, voici une capture)

Spoiler:

Voilà, je voulais donc savoir ce qui clochait dans la deuxième partie, mais s'il y a moyen d'arriver à ce résultat grâce aux I-Frame, on peut bien tenter! ^^
Seulement voilà, en fait le code semble s'appliquer depuis des images, mais y a-t-il moyen de faire avec des onglets comme sur la PA de mon forum test? é.è

(http://forumtest.quickbb.net/forum.htm)

Citation :: Voilà, je voulais donc savoir ce qui clochait dans la deuxième partie, mais s'il y a moyen d'arriver à ce résultat grâce aux I-Frame, on peut bien tenter! ^^
Seulement voilà, en fait le code semble s'appliquer depuis des images, mais y a-t-il moyen de faire avec des onglets comme sur la PA de mon forum test? é.è

Personnellement j'ai utilisé des images à cause de la taille qu'aurait prit un texte. Mais le code est le même Wink

. Onglets ou images c'est la même chose =)

Tu as déjà le code que tu veux faire figurer dans ton message je suppose ? (Je parle du CSS et HTML)
Est-ce que tu sais créer une page html entière ou pas ? (sinon je te file une explication xD)

Non je ne sais malheureusement pas comment créer une page HTML complète. ^^"
(La nulle x__x)
Sinon pour les codes CSS et HTML, je les ai oui, enfin puisque mon code s'affiche bien sur la PA, je présume que ce sont ceux qui j'ai inscrits dans ma feuille de style et la PA. ^^

Edit: En fait, pour la créer, je sais où aller puisque tu me l'as indiqué plus haut! J'ignore seulement ce que je dois mettre dedans pour que mon code veuille bien fonctionner. é.è

Donc en fait il va falloir prendre tous tes codes (css, html & javascript) et mettre le tout sur la page html; de cette façon :

Code:: <html>

<head>
<title>TITRE DE TA PAGE (FACULTATIF)</title>

<script type="text/javascript" src="LIEN DU script"></script>

<style type="text/css">
/* TES CODES CSS */
</style>

</head>

<body>

</body>

</html>

Donc voilà une base de page HTML.
Tu dois donc coller tes codes aux emplacements indiqués ^^ (Si tu as des doutes, montres moi ton code je te dirais si c'est correct ^^

Tu vas dans Panneau d'administration >> Module >> Gestion des pages HTML : nouvelle page HTML.
- Tu coches "non" aux deux questions
- Tu donnes un titre à ta page
- Et tu colles ton code (en faisant attention que la croix soit de cette couleur : Onglets dans message Act-html

Ensuite, tu récupères le lien de ta page HTML.

Tu vas sur ton forum, tu ouvres un nouveau message, et tu entres le code de l'I-Frame :

Code:: <iframe width="LARGEUR" height="HAUTEUR" frameborder="0" src="LIEN DE LA PAGE HTML" target="_blank"></iframe>

Tu colles le lien de ta page à l'endroit indiqué, tu règles la hauteur et la largeur et tu enregistres. Bon, au début tu auras surement un problème avec l'affichage; mais c'est la hauteur et la largeur qui risquent de merdouiller xD

Dis le si tu as un problème; où si mon explication est merdique xD

Il est vrai que mon tuto ne fonctionne que pour les PA et les pages HTML. Pour pouvoir l'utiliser, il faut, comme l'a dit Liliana, utiliser une i-frame. Cela marche très bien puisque j'ai utilisé les onglets pour ma fiche pub.

Hum, est-ce qu'on peut l'utiliser sans page HTML ? Je veux dire, est-ce qu'on peut utiliser les balises

Code:: <style></style>

?

Re-bonjour!
Alors j'ai bien quelques questions, mais c'est très loin d'être parce que ton explication est merdique, comme tu dis, parce qu'elle est très bien détaillée, bon! è.é

Je comprends tout ce qu'il faut faire, du moins je crois, seulement je ne sais pas très bien de quoi il est question é.è Par exemple, LIENjavascript, je connais de nom, je ne n'ai franchement aucune idée de ce que c'est (hé hé, hé... x_x), et je ne sais par conséquent pas ce que je dois mettre à cet endroit ni où le trouver *Poooh, la honte u_u*

Pour le CSS, je crois que j'ai mit ce qu'il fallait *espérons*, mais pour le HTML j'aurais une petite question... Pour les onglets, quelle partie du code dois-je mettre? Parce que par exemple, si j'inclus le contenu de mes onglets (donc ma PA) à la page HTML, je la retrouverai chaque fois que je voudrai utiliser les onglets dans un message en utilisant l'I-frame, puisqu'elle fera parti de la page HTML de base, non? é.è

Devrais-je donc enlever le contenu des onglets?
Par exemple, mon code deviendrait:

Spoiler:

Code:: <html>

<head>
<title>onglets</title>

<script type="text/javascript" src="LIEN DU script"></script>

<style type="text/css">
/* .onglet
{
display:inline-block;
position:left;
margin-left:3px;
margin-right:3px;
padding:3px;
border:3px solid #333333;
-moz-border-radius-bottomleft:0px
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
cursor:pointer;
}
.onglet_0
{
background:#111111;
border:3px solid #222222;
border-bottom:3px solid #222222;
}
.onglet_1
{
background:#111111;
border:3px solid #444444;
border-bottom:2px solid #111111;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#000000;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
} */
</style>

</head>

<body>

</script>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Bienvenue en Enfer!</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Nos Partenaires</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Crédits Détaillés</span>
</div>
<div class="contenu_onglets">

</div>
<script type="text/javascript">
//
</script>
</body>
</html> -->
</body>

</html>

Huuuh? é.è Je ne suis pas sûre de tout suivre é.è
Sinon, peut-être puis-je mettre tous mes codes (ceux de la PA avec les onglets et de la feuille de style CSS), et avec votre aide je pourrais les disposer là où ils doivent aller dans le code que tu m'as fourni? silent

Le problème c'est que je n'ai pas testé le tuto de Little Lady puisque j'utilise une autre méthode combinant un Javascript xD. Donc je ne peux pas savoir si ton code est bon ou pas ..

Mais y'a des erreurs dans ta page HTML en fait ... Donc je vais reprendre avec toi en partant du début :

I. Le script.
Dans le tuto de Litte Lady, elle dit de mettre ce script dans une page html du forum; puis de coller le lien de la page dans un template. Ca, pas besoin de le faire pour un message puisque ça ne marche que sur les pages d'accueil. En revanche, il faut quand même faire une page html pour le script. J'ai donc sauvegardé le script et hébergé sous ArchiveHost (ça fait pareil que sur une page HTML de ton forum)

Le script : https://sd-2.archive-host.com/membres/up/190331098933529247/Onglets_Creachose.js (pardon pour le titre xD)

C'est ça que j'appelais "LIEN DU script" dans le code que je t'ai donné Wink

II. La base de la page.
La base de la page html; c'est ce que j'ai donné plus haut, soit ça :

Code:: <html>

<head>
<title>TITRE DE TA PAGE (FACULTATIF)</title>

<script type="text/javascript" src="LIEN DU script"></script>

<style type="text/css">
/* TES CODES CSS */
</style>

</head>

<body>

</body>

</html>

Il va donc falloir la remplir. Donc on a déjà le lien du script, et je reprends tes codes CSS pour les rajouter =). Ca donne ceci :;

Code:: <html>

<head>
<title>TITRE DE TA PAGE (FACULTATIF)</title>

<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/190331098933529247/Onglets_Creachose.js"></script>

<style type="text/css">
.onglet
{display:inline-block;
position:left;
margin-left:3px;
margin-right:3px;
padding:3px;
border:3px solid #333333;
-moz-border-radius-bottomleft:0px
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
cursor:pointer;}

.onglet_0
{background:#111111;
border:3px solid #222222;
border-bottom:3px solid #222222;}

.onglet_1
{background:#111111;
border:3px solid #444444;
border-bottom:2px solid #111111;
padding-bottom:4px;}

.contenu_onglet
{background-color:#000000;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;}

ul
{margin-top:0px;
margin-bottom:0px;
margin-left:-10px}

h1
{margin:0px;
padding:0px;}
</style>

</head>

<body>

</body>

</html>

III. Le html
Il reste donc la partie "contenu de la page, soit tous les codes html" à remplacer. C'est donc là que tu dois mettre le contenu de tes onglets en fait =)

Cependant; comme je comprends rien au code donné par Little Lady; je pense qu'elle va devoir t'aider si tu ne comprends pas plus xD Je ne maîtrise pas ce code; que je trouve plus compliqué qu'autre chose.

Waaaaaaaaw o_o
Merci beaucoup! o.o

Du coup il ne me reste plus que la partie HTML à tenter de régler, c'est vraiment gentil d'avoir fait tout ça. é.è Je vais tenter de regarder plus attentivement mon contenu HTML pour trouver ce que je dois insérer dans cette partie précisément. ^^

Si jamais je ne pige toujours pas et que personne n'a posté à la suite je, huf... j'attendrai quelques jours et ferai un petit up! é.è Mais je tenterai tout de même de m'en tirer comme une grande, quand même, vu ce que tu as déjà fait pour moi!

Un grand merci en tout cas! Je redonnerai des nouvelles si j'y arrive (ou si je n'y arrive pas). ^^

Hum, en progression, je dirais!
Je tente plusieurs essais avec le HTML, j'ai seulement du mal à prendre la bonne partie de mon code pour l'insérer à l'endroit voulu on dirait, mais je finirai bien par y arriver, ou dans le cas contraire, je ferai appel aux connaissances de gens charitables. é.è

Vous pouvez donc clore le sujet si vous préférez ne pas le laisser en attente. ^^
Un ÉNORME merci à tous ceux qui se sont penchés sur mon problème et qui me sont venus en aide, c'est très, très apprécié! ^^

Edit: Buh, je n'y arrive pas x____x J'ai créé ma page HTML, y ai inséré le code, j'ai ensuite utilisé le code I-Frame dans un message, mais... Nada é_è J'ai toujours les onglets uniquement, pour le contenu, rien ne s'affiche. =/

Voici les codes que j'ai utilisés, je ne sais pas si quelqu'un saura trouver le problème, parce que j'ai beaucoup de mal à voir. é__è

Page HTML:

Spoiler:

Code:: <html>

<head>
<title>TITRE DE TA PAGE (FACULTATIF)</title>

<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/190331098933529247/Onglets_Creachose.js"></script>

<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:3px solid #333333;
-moz-border-radius-bottomleft:0px
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
cursor:pointer;
}
.onglet_0
{
background:#111111;
border:3px solid #222222;
border-bottom:3px solid #222222;
}
.onglet_1
{
background:#000000;
border:3px solid #444444;
border-bottom:2px solid #000000;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#000000;
border:1px solid #222222;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-100px
}
h1
{
margin:0px;
padding:0px;
}
</style>

</head>

<body>
<div class="systeme_onglets">
<div style="margin-right : 52%" ><div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">BlaBla3</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">BlaBla2</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">BlaBla</span>
</div></div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
EN CONSTRUCTION
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
EN CONSTRUCTION
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
EN CONSTRUCTION
</div>
</div>
</div>
</body>

</html>

Code I-Frame dans le message:

Spoiler:

Bonjour~

Le problème est-il toujours d’actualité?

Oui, il l'est. ^^
Je ne suis toujours pas parvenue à maîtriser le I-Frame x_x *Boulet*
Quelque chose cloche visiblement dans mon code, mais ne m'y connaissant que très peu (pas du tout), je parviens plutôt mal à voir ce que c'est... é.è

Et essaye avec ce code:

Code:: <style type="text/css">
.onglet {
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:2px solid #999;
border-bottom:0px solid #999;
cursor:pointer;
}
.onglet_0 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
background:;
border-bottom:0px solid #999;
}
.onglet_1 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
background:;
border-bottom:0px solid #999;
padding-bottom:4px;
}
.contenu_onglet {
-moz-border-radius: 15px;
border:2px solid #999;
margin-top:-1px;
padding:5px;
display:none;
width: 900px;
}

a {
font-variant: small-caps;
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
text-shadow: 2px 2px 3px #777;
letter-spacing : 1px;
}

</style>
<script language="javascript" src="http://twilight-rpg.forumotion.com/script-onglet-h4.htm">
</script>

<div class="onglets">
<span class="onglet_0 onglet" id="onglet_accueil" onmouseover="javascript:change_onglet('accueil');" style="margin-left: 300px">Accueil</span>
<span class="onglet_0 onglet" id="onglet_contexte" onmouseover="javascript:change_onglet('contexte');">Contexte du forum</span>
<span class="onglet_0 onglet" id="onglet_pv" onmouseover="javascript:change_onglet('pv');">PV's attendus</span>
<span class="onglet_0 onglet" id="onglet_staff" onmouseover="javascript:change_onglet('staff');">Staff du forum</span>
</div>

<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_accueil">
Tout ce que tu souhaites voir apparaître dans cet onglet.
</div>

<div class="contenu_onglet" id="contenu_onglet_contexte">
Pareil ici, le texte souhaites</div>
</div>

<div class="contenu_onglet" id="contenu_onglet_pv">
Boumboumboumbidou
</div>

<div class="contenu_onglet" id="contenu_onglet_staff">
Lalalalalalalala
</div>
</div>
</div>
<script type="text/javascript">
//
</script>

Bonjour!
Je suis désolée de ce retard, je me suis absentée plusieurs jours sans que ce ne soit prévu, je n'ai donc pas eut l'occasion d'aviser de mon absence. é.è

D'abord merci beaucoup pour votre réponse! Le code que vous m'avez refilé parait fonctionner beaucoup mieux que le précédent puisque les onglets s'affichent, tout comme leur contenu. ^^

Après quelques petites adaptations, tout semble fonctionner, votre code était parfait il me fallait seulement le modifier de sorte à ce qu'il s'applique à mon forum (pour la largeur, surtout, c'est ce qui faisait que les onglets se superposaient), mais... ma foi, je crois que tout est impeccable! o.o

Il ne me reste plus qu'à modifier leur apparence, et tout sera bon! *Pitié, faites que je ne commette pas de bourde*

Un énorme merci à tous, votre aide m'a été très précieuse! Embarassed

Problème résolu, je n'oublierai pas de vous remercier dans les crédits de mon forum dès que le nouveau thème sera appliqué! Very Happy

Onglets dans message

Onglets dans message

Sujets similaires

Sujets similaires

Partenaires Or