Comment réaliser ce genre

+4
-Tancrède-
Chacha
Neptunia
Mdame Lili
8 participants

Page 2 sur 3 Précédent  1, 2, 3  Suivant

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

Résolu Comment réaliser ce genre

Message par Mdame Lili Lun 24 Fév - 18:43

Rappel du premier message :

Bonjour, désolée si mon message n'est pas au bon endroit.

Je suis incapable de donner un nom à ce que je voudrais réaliser dans mon forum http://coutureplaisir.forumgratuit.be/
J'essaie d'expliquer : je voudrais une liste alphabétique et chaque lettre serait clicable et contiendrait des informations.
Je me permets de mettre un lien qui sera sans aucun doute plus explicite.
http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Ville_de_France
si je clic sur la lettre A toutes les villes apparaissent, j'obtiens la même réaction quelque soit la lettre sur laquelle je clic.

Je dois vous précisez que je suis nulle avec les termes techniques et que je suis très lente à la compréhension. :O: 

Merci pour la prochaine réponse.


Dernière édition par Mdame Lili le Mar 6 Mai - 15:19, édité 1 fois
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Sam 15 Mar - 11:58

Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Mer 19 Mar - 17:13

Coucou...... j'aimerais recevoir une réponse  Very Happy 
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Mer 19 Mar - 21:53

Bonsoir,

Qu'est-ce que vous voulez faire à ce niveau ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Jeu 20 Mar - 16:35

Ai-je encore mal compris ?
Pour le css c'est toujours là où je l'ai dit, et pour le javascript aussi.
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Jeu 20 Mar - 23:39

A ce niveau sur le screen (panneau >> affichage >> couleur), vous cliquez sur "feuille de style css", et vous mettez le CSS dedans :
Code:
/* .systab .tab => les onglet */.systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer;}/* .systab .tab:hover => les onglets survolés */.systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31;}/* .systab .tab.selected => les onglets sélectionnés */.systab .tab.selected{ color: #ccc; background: #333;}/* .systab .contents => les conteneurs des contenus associés aux onglets */.systab .contents { margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff; border: 1px solid #000; padding: 10px;}/* style des onglets si ils sont à gauche ou à droite */.systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px;}/* flottement des conteneurs si les onglets sont à gauche où à droite */.systab.s_float .tabs,.systab.s_float .contents { float: left;}

ensuite, vous enregistrez.

Avez-vous installé le code javascript et le code html comme dit plus haut ?

 Like a Star @ heaven  HTML - dans le sujet/message désiré :
Code:
    <div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div>

 Like a Star @ heaven le JavaScript, à mettre dans panneau > modules > page javascript > créer un nouveau javascript > sur les messages
Code:
                $(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)
                });


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Ven 21 Mar - 12:07

Je suis admirative de ta patience, un tout grand merci.
donc ici A ce niveau sur le screen (panneau >> affichage >> couleur), vous cliquez sur "feuille de style css", et vous mettez le CSS dedans :
voici ce que je vois
Comment réaliser ce genre  - Page 2 Nouvel13
comment dois-je faire pour mettre  CSS dedans  ???

J'en deviens confuse d'être aussi lourde pour la compréhension.
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Ven 21 Mar - 15:11

Et bien à priori c'est déjà là puisque je vois la classe systab. Il semble qu'il n'y ait pas besoin de rajouter de contenu, mais sinon, si vous avez quelque chose à mettre dans le CSS, vous cliquez dans le champ, et tout à la fin, après ce que vous avez déjà, vous rajoutez du contenu (comme quand on rajoute du contenu dans un message). Et ensuite pour valider vous cliquez sur  :enreg: 


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Mer 26 Mar - 14:41

Cela vous semble tellement facile car vous êtes des pro dans ces éléments.
J'ai reçu ceci :
HTML - dans le sujet/message désiré :
<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div>

je suppose que je dois aller dans panneau d'administration, et ensuite ?

Merci pour la future réponse
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Mer 26 Mar - 14:44

Bonjour Mdame Lilli

Apparemment le html n'est pas activé sur votre forum. Je vous laisse lire ce tutoriel et suivre les étapes afin d'activer le html sur votre forum :
Right Activation du HTML


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Mer 26 Mar - 17:01

Si le HTML est activé sur mon forum.

Donc je demande où je dois placer ceci
HTML - dans le sujet/message désiré :
<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div>

Dois-je passer par le panneau d'administration ? et ensuite dans le nom du sujet en choisissant quoi ?
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Invité Mer 26 Mar - 17:09

Mdame Lili a écrit:Si le HTML est activé sur mon forum.

Donc je demande où je dois placer ceci
HTML - dans le sujet/message désiré :
<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div>

Dois-je passer par le panneau d'administration ? et ensuite dans le nom du sujet en choisissant quoi ?

Bonsoir,

Comme l'a dit Lixyr :
dans le sujet/message désiré

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Mer 26 Mar - 19:45

Oui, essayez déjà de placer ceci dans un sujet.
Donc sur votre forum (pas dans le panneau, mais directement dans votre forum), là où vous vouliez mettre votre liste, vous créez un tout nouveau sujet.
Vous l'appelez comme vous voulez, ça, ça n'a pas d'importance. Et dans le corps du message (donc le contenu, là où par exemple vous écrivez "Salut, je m'appelle Machin") vous mettez le code HTML.

Et ensuite vous envoyez votre sujet.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Jeu 27 Mar - 9:11

Merci, voilà c'est fait pour le HTML.

Je viens de créer le javascrip.

Je vais donc essayé pour voir si le tout fonctionne.
Je vous tiens informé.

Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Jeu 27 Mar - 12:12

je ne vois pas d'onglet .......
comment dois-je procéder ?

Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Jeu 27 Mar - 17:09

C'est étrange, je viens de tester et ce code fonctionne dans les messages... Je peux avoir le lien du sujet dans lequel sont sensés apparaitre les onglets ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Ven 28 Mar - 17:26

Voici l'image qui apparait
Comment réaliser ce genre  - Page 2 Nouvel14

et voici le lien
http://coutureplaisir.forumgratuit.be/t623-lexique-image

j'ai mis temporairement une image !!!

Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Mar 1 Avr - 23:55

Bonsoir Mdame Lili,

Pouvez-vous me donner le code que vous avez mis dans ce lien que je vous le corrige ? Je peux aussi l'améliorer, comme par exemple, mettre un listing plutôt :

- A -
Abeille
Agrafe
Aisance
- B -
etc
et mettre le contenu avec l'image à droite. Je suppose que c'est ce que vous voulez ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Mer 2 Avr - 11:51

Merci pour le suivi, j'ai l'humeur princtanière : que serai-je sans toi qui vins à ma rencontre  Sourire2 
Voici donc le contenu
<div class="systab"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div>

Je te remercie pour ta proposition
Mais en fait ce sont seulement les lettres alphabétiques que je désirais dès le départ
A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z
La lettre A est un mauvais exemple car le récapitulatif est très petit.

La lettre S cela donne
Comment réaliser ce genre  - Page 2 S10
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Mer 2 Avr - 16:14

Pour le contenu, je pensais vous prendre le contenu complet (images + listing + textes) pour vous faire la base. Vous n'auriez eu qu'à remplir.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Mer 2 Avr - 18:17

Je ne comprends pas ton explication  Embarassed  Embarassed  Embarassed 

Il y a toujours de l'évolution, de nouveaux accessoires font toujours leur appariition, donc je dois pouvoir intervenir afin de compléter.

La totalité des images est refusée car trop longue, donc j'ai décidé de faire par ordre alphabétique.
As-tu une autre solution à me proposer ?

Je ne sais si c'est possible mais si tu m'envoyais ton adresse courriel, je pourrais te faire parvenir toutes les images.

Encore merci.
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Sam 5 Avr - 9:41

Bonjour, Mdame Lili,

Je ne compte pas faire tout le code, juste un petit jet pour vous montrer comment faire pour que les onglets fonctionnent. Ensuite ce sera à vous de compléter, je voulais juste par exemple 3 images et trois textes associés pour pouvoir faire un test.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Dim 6 Avr - 9:39

J'accepte avec grand plaisir bien entendu.
Merci à toi et bon dimanche.
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Lun 14 Avr - 12:46

Bonsoir, Mdame Lili

C'est quelque chose comme ça que vous voulez ?
http://forum-test-in-lixyr.rpg-dynasty.com/h6-onglets-test-mllelilly


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Jeu 17 Avr - 9:52

Very Happy Very Happy Very Happy oui c'est impeccable et cela correspond totalement à mon attente, merci
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Dim 20 Avr - 10:25

Ah, bien. ^^

Alors pour les codes, les voici :

 Like a Star @ heaven LE CSS
panneau d'administration >> affichage >> couleur >> feuille de style CSS
à rajouter à la suite, puis à valider:

Code:
 .systab {width:600px;}
  .tabs {width:120px;float:left}
  .systab .tab
      {
      padding: 2px 10px; margin: 0px 5px 5px 0px; color: #000;
      cursor: pointer;
      float:left;width:11px; height:20px;
      }
  .systab .tab:hover
      {
      color: #487f31;
      }
  .systab .tab.selected
      {
      color: #ccc;
      }
  .systab .contents
      {
      margin-top: 1px; margin-bottom: 1px; color: #000; background: #fff;
      border: 1px solid #000; padding: 10px;
  float:right;width: 450px;height: auto;
      }
  .systab .contents h6 {margin:0; color:#000000; font-weight:bold;}
  .systab .contents img {width:150px;max-height:150px;}
  .systab .contents p {float:right;}
  .systab .contents hr.clear {clear:both; border-style:dotted;}
  .systab.s_float .tab,.systab.s_float .tab
      {
      display: block; margin: 5px;
      }

  .systab.s_float .tabs,.systab.s_float .contents
      {
      float: left;
      }

 Like a Star @ heaven le JavaScript
panneau d'administration >> modules >> gestion des pages javascript
>> créer une nouvelle page  Ajout 
>> titre : onglets pour le dictionnaire (ou ce que vous voulez)
>> cocher : sur toutes les pages

Code:
$(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)
        });

Enregistrez.

 Like a Star @ heaven le HTML
à mettre dans votre message. Enfin, là où vous voulez mettre votre dictionnaire, dans un topique.

Code:
<div class="systab">
      <div class="selected">
        <span>A</span>
        <h6>Abeille</h6>
        <img src="http://i57.servimg.com/u/f57/11/14/32/22/a11.jpg" alt="" />
        <p>Je suis un texte de description</p>
        <hr class="clear" />
        <h6>Agrafe</h6>
        <img src="http://i57.servimg.com/u/f57/11/14/32/22/a11.jpg" alt="" />
        <p>Je suis un texte de description</p>
        <hr class="clear" />
        <h6>Aisance</h6>
        <img src="http://i57.servimg.com/u/f57/11/14/32/22/a11.jpg" alt="" />
        <p>Je suis un texte de description</p>
        <hr class="clear" />
      </div>
      <div>
        <span>B</span>
        <h6>BBBBBBBBB</h6>
        <img src="http://i57.servimg.com/u/f57/11/14/32/22/a11.jpg" alt="" />
        <p>Je suis un texte de description</p>
        <hr class="clear" />
        <h6>BBBBBBBBB</h6>
        <img src="http://i57.servimg.com/u/f57/11/14/32/22/a11.jpg" alt="" />
        <p>Je suis un texte de description</p>
        <hr class="clear" />
        <h6>BBBBBBBBB</h6>
        <img src="http://i57.servimg.com/u/f57/11/14/32/22/a11.jpg" alt="" />
        <p>Je suis un texte de description</p>
        <hr class="clear" />
      </div>
      <div>
        <span>C</span>
        Mon contenu 3
      </div>
      <div>
        <span>D</span> Mon contenu 1
      </div>
      <div>
        <span>E</span>
        Mon contenu 2
      </div>
      <div>
        <span>F</span>
        Mon contenu 3
      </div>
      <div>
        <span>G</span>
        Mon contenu 2
      </div>
      <div>
        <span>H</span>
        Mon contenu 3
      </div>
      <div>
        <span>I</span> Mon contenu 1
      </div>
      <div>
        <span>J</span>
        Mon contenu 2
      </div>
      <div>
        <span>K</span>
        Mon contenu 3
      </div>
      <div>
        <span>L</span>
        Mon contenu 2
      </div>
      <div>
        <span>M</span>
        Mon contenu 3
      </div>
      <div>
        <span>N</span> Mon contenu 1
      </div>
      <div>
        <span>O</span>
        Mon contenu 2
      </div>
      <div>
        <span>P</span>
        Mon contenu 3
      </div>
      <div>
        <span>Q</span>
        Mon contenu 2
      </div>
      <div>
        <span>R</span>
        Mon contenu 3
      </div>
      <div>
        <span>S</span> Mon contenu 1
      </div>
      <div>
        <span>T</span>
        Mon contenu 2
      </div>
      <div>
        <span>U</span>
        Mon contenu 3
      </div>
      <div>
        <span>V</span>
        Mon contenu 2
      </div>
      <div>
        <span>W</span>
        Mon contenu 3
      </div>
      <div>
        <span>X</span> Mon contenu 1
      </div>
      <div>
        <span>Y</span>
        Mon contenu 2
      </div>
      <div>
        <span>Z</span>
        Mon contenu 3
      </div>
    </div>


Si jamais vous avez déjà mis le CSS, il faudrait l'enlever pour remettre celui-ci.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Mar 22 Avr - 12:34

Merci pour le suivi.

Comment réaliser ce genre  - Page 2 Essai_10

Je ne comprends pas ceci
le JavaScript
panneau d'administration >> modules >> gestion des pages javascript
>> créer une nouvelle page ajout
>> titre : onglets pour le dictionnaire (ou ce que vous voulez)
>> cocher : sur toutes les pages
dois-je choisir gestion des pages HTML ou gestion des codes javascrip ?
Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Gourmandises Mar 22 Avr - 20:01

Bonsoir, 


* a écrit:Je ne comprends pas ceci 
le JavaScript
panneau d'administration >> modules >> gestion des pages javascript
>> créer une nouvelle page ajout 
>> titre : onglets pour le dictionnaire (ou ce que vous voulez)
>> cocher : sur toutes les pages
dois-je choisir gestion des pages HTML ou --->>>gestion des codes javascrip <<<---
Gourmandises

Gourmandises
***

Messages : 134
Inscrit(e) le : 23/05/2012

https://forum.forumactif.com
Gourmandises a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Ven 2 Mai - 11:29

Comment réaliser ce genre  - Page 2 Ktip10Bonjour,

Où en-est votre problème ?

Deux solutions :

  • Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône résolu en éditant votre premier message,
  • Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté,


A bientôt sur ForumActif Smile


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Mdame Lili Ven 2 Mai - 16:50

Je suis désolée, mais trop de préoccupations familiales momentanément.
Je vais demander à mon assistant, qui est très volontaire et très honnête de faire le travail à ma place; j'en suis presque honteuse, mais je dois faire avec les soucis.

Je vous remercie tous pour votre aide, oh combien précise et pertinente, je vais solliciter Romain Freteurr, que j'ai nommé administrateur, que je connais (pas virtuellement) depuis très longtemps et que j'ai fait nommé modérateur sur mon autre site www.lacaravane.com.

Mdame Lili

Mdame Lili
****

Messages : 374
Inscrit(e) le : 29/01/2013

http://coutureplaisir.forumgratuit.be
Mdame Lili a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment réaliser ce genre

Message par Lixyr Sam 3 Mai - 9:53

D'accord, il faudrait que monsieur nous tienne au courant rapidement alors. Smile

Bonne journée.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Comment réaliser ce genre  - Page 2 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Comment réaliser ce genre  - Page 2 3592387030 pour prévenir la modération.

Comment réaliser ce genre  - Page 2 Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 3 Précédent  1, 2, 3  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum