Des onglets dans un message

par paper-gangsta Mar 21 Aoû 2012 - 22:26

Bonjour et merci de vous intéresser à mon problème.

J'aimerais savoir quel est le code à mettre pour avoir des onglets dans un message, comme ceci :

Spoiler:

(les deux onglets verts sur la droite)

J'ai cherché un peu partout sans trouver. Je vous remercie d'avance !

par **Lixyr** Jeu 23 Aoû 2012 - 8:52

Bonjour.

Déjà pour ça, il faut savoir faire des onglets. Je vous laisse chercher, on en parle partout ici, des onglets dans une PA. Donc c'est facile.

Par contre on ne peut pas mettre de javascript dans un message sans que ça ne marche pas, il faut donc faire une page html, avec dedans le code des onglets etc, et ensuite mettre le tout en iframe dans le message :

Code:: <iframe frameborder="0" src="URLDELAPAGEHTML"></iframe>

Cordialement.

par paper-gangsta Jeu 23 Aoû 2012 - 10:56

Merci de votre réponse Smile

Alors j'ai suivi ce tuto et ensuite ajouté l'iframe, donc comme ça :

Code:: <iframe frameborder="0" src="http://castello-maledice.lightbb.com/11255.js"><div class="systab"> <div> <span>Onglet 1</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </div> <div> <span>Onglet 2</span> Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. </div> <div> <span>Onglet 3</span> Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. </div> </div></iframe>

et voilà ce que ça me donne :

Spoiler:

par **Lixyr** Jeu 23 Aoû 2012 - 23:28

Bonsoir.

Oui, c'est normal :
Like a Star @ heaven

- les onglets doivent être fait dans une page HTML, comme je l'ai dit plus haut.
Panneau d'administration >> modules >> gestions des pages html
>> vous mettez votre code à l'intérieur, en mettant comme ceci :

Code:: <body> <head> <style type="text/css"> ICI LE CSS </style> <script type="text/javascript"> ICI LE JAVASCRIPT </script> </head> <body> ICI LE CODE HTML AVEC LES DIV ETC </body> </html>

<body>
<head>
<style type="text/css">
ICI LE CSS
</style>
<script type="text/javascript">
ICI LE JAVASCRIPT
</script>
</head>
<body>
ICI LE CODE HTML AVEC LES DIV ETC
</body>
</html>

=> en violet, les balises qui indiquent ce que vous insérez dans le code :
- css : le CSS
- javascript : le Javascript
- body : corps du message, donc toute la partie HTML
=> en orange ce que vous devez remplacer par les codes adéquats trouvés dans votre tutoriel.

>> et ceci fait, vous enregistrez.
>> ensuite vous retournez sur la page "gestion des pages HTML"
>> vous cherchez quelle est la ligne qui correspond au code que vous venez d'enregistrer
>> vous récupérez l'URL du lien (c'est marqué dans le tableau, c'est pas compliqué).

Like a Star @ heaven

Et c'est ce lien que vous mettez, dans l'iframe, dans votre message :

<iframe src="URLDELIENDELAPAGEHTML" etc></iframe>

par paper-gangsta Ven 24 Aoû 2012 - 6:37

Ah d'accord, oui en fait j'étais loin du compte !
J'ai essayé et suivi à la lettre toutes vos indications et voilà ce que ça me donne :

Spoiler:

Je pense pourtant avoir correctement completé le code :

Code:: <body> <head> <style type="text/css"> /* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */ #tab-bloc .tabs { text-align: center; margin-bottom: 10px; } /* .tab = onglets */ #tab-bloc .tab { border-radius: 5px; border: none; margin: 0 20px; background: none; } /* .tab.selected = onglet sélectionné*/ #tab-bloc .tab.selected { background: #111; box-shadow: 0 0 5px #333; color: #eee; font-weight: bold; } /* .tab img = image dans les onglets */ #tab-bloc .tab img { vertical-align: -3px; } /* .contents = conteneur des contenu */ #tab-bloc .contents { border: 3px double #aaa; background: #eee; border-radius: 50px; padding: 25px; } /* #tab-staff = contenu associé à l'onglet staff */ #tab-staff { background: url(http://i.imgur.com/KlbuC.jpg); width: 791px; height: 607px; border: 1px dotted #ccc; margin: auto; } #tab-staff table { color: #444; background: url(http://i.imgur.com/GEdKG.png); margin: 100px auto; font-weight: 30px; opacity: 0.8; border: 2px solid #ccc; border-radius: 5px; } /* #tab-bienvenue = contenu associé à l'onglet bienvenue */ #tab-bienvenue { border-radius: 50px; border: 2px dashed #bbb; background: url(http://i.imgur.com/yAyJl.jpg); text-align: center; font-size: 20px; color: #333; text-shadow: 0 0 5px #fff; } /* #tab-bienvenue marquee = le marquee dans l'onglet bienvenue */ #tab-bienvenue marquee { width: 400px; text-align: center; } /* #tab-regles = contenu associé à l'onglet règles */ #tab-regles ul { font-family: georgia, arial, serif; font-size: 17px; list-style: url(http://i.imgur.com/DMC6G.gif); } #tab-regles li { margin-bottom: 10px; color: green; } </style> <script type="text/javascript"> $(function(){ var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")? "tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d) }); </script> </head> <body> <div class="systab s_bottom s_slide s_hover"> <div> <span style="background:red">Nadir</span> <span style="color:red"> <strong>Nom masculin singulier</strong> <ul><li>(astronomie) point virtuel de la sphère céleste, situé à l'extrémité d'une ligne verticale partant d'un endroit donné du globe et passant par le centre de la terre, opposé au zénith</li></ul> </span> </div> <div> <span style="background:blue">Azur</span> <span style="color:blue"> <strong>Adjectif invariant en genre et en nombre </strong> <ul><li>bleu comme le ciel</li></ul> <strong>Nom masculin singulier</strong> <ul><li>ciel</li></ul> </span> </div> <div> <span style="background:green">Hégémonie</span> <span style="color:green"> <strong>Nom féminin singulier </strong> <ul><li>dans l'Antiquité, suprématie d'un peuple, d'une institution ou d'un groupe social</li></ul> </span> </div> </div> </body> </html>

et dans mon message j'ai mis l'iframe à l'intérieur d'une div, ça vient peut-être de là ?

Code:: <div style="clear: both; padding-top: 20px"><div class="pv"> <h2>Une storia importante</h2><div class="pv_content"><iframe src="http://castello-maledice.lightbb.com/h2-onglet" etc></iframe> Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. </div></DIV></div>

Merci en tout cas, j'ai avancé dans mon problème Smile

par **Lixyr** Ven 24 Aoû 2012 - 8:53

Bonjour.

Hum j'essaie de comprendre ce que vous voulez obtenir au final. Il y a trois onglets :
- Nadir (en rouge)
- Azur (en bleu)
- Hégémonie (en vert)
C'est bien ça ?

Et ce contenu, il va où ?

Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.

Dans quel onglet ?

Je vais regarder ça ce soir.

par paper-gangsta Ven 24 Aoû 2012 - 10:14

Bonjour

En fait j'ai juste copié le modèle du tuto, donc je devrais obtenir ceci http://www.maonyn.com/h18-test-tableau-onglets#couleurs

une fois que j'aurais réussi à le faire je pourrais le bidouiller à ma manière, ça je sais faire Smile

Et donc le "Lorem ipsum" doit se trouver juste en dessous des onglets. Pour l'instant les onglets ont déjà leur contenu, mais ça ne marche pas.

J'vous remercie d'accorder du temps à mon problème !

par **Lixyr** Ven 24 Aoû 2012 - 22:35

D'accord, je n'avais pas vu que c'était un des exemples donnés par Isolde. C'est donc celui-là. Au moins j'ai le code, je vais le faire de mon côté, et voir les différences avec votre code.

Je vous tiens au courant.

Cordialement.

par paper-gangsta Sam 25 Aoû 2012 - 1:37

Merci bien !

Des onglets dans un message

Des onglets dans un message

Re: Des onglets dans un message

Re: Des onglets dans un message

Re: Des onglets dans un message

Re: Des onglets dans un message

Re: Des onglets dans un message

Re: Des onglets dans un message

Re: Des onglets dans un message

Re: Des onglets dans un message