Créer un tableau avec onglets dans un post

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

Résolu Créer un tableau avec onglets dans un post

Message par cacbou le Dim 17 Fév 2013 - 16:05

Bonjour à toutes et tous et désolé du dérangement.
J'essaye de créer un tableau avec onglets dans un post sur mon forum mais je n'y arrive pas,
j'ai regarder ce que l'on explique ICI mais je n'y arrive pas.
Je suis très nul en ce qui est du HTML et css je l'avoue.

J'ai réussis à créé des tableau en cherchant sur le net ce qui a donner ceci:

en utilisant les codes suivants:


Ne sachant plus ou chercher je me tourne vers vous pour voir si une âme châritable connaitrais les codes que je devrai mettre pour pouvoir avoir mes tableau avec des onglets au dessus pour donner ceci dans un post sur mon forum.

D'avance merci de vos réponses.
Amicalement Cacbou


Dernière édition par cacbou le Ven 22 Fév 2013 - 0:26, édité 1 fois

cacbou
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 19/10/2012

http://les-mercenaires.forumactif.pro
cacbou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un tableau avec onglets dans un post

Message par Matriochka le Dim 17 Fév 2013 - 16:10

Bonjour et Bienvenue
sur le Forum des Forums Forumactif
Vu que vous êtes nouveau, voici quelques sujets importants :
Sécurité : mail de fondation - Ce qu'il ne faut pas faire
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink

Si je comprends bien, tu voudrais donc insérer le tableau à onglet proposé dans le tutoriel dans un sujet ?

C’est possible, mais seulement, il faut passer par une iframe, car pour créer un tel tableau, on a besoin de JavaScript et, par sécurité, le JavaScript n’est pas pris en compte dans les messages de ton forum.

Il faut donc créer une page HTML sur laquelle tu créées ton tableau (en suivant évidemment le tutoriel que tu as trouvé), puis, il faut insérer ta page dans ton message à l’aide d’une iframe.

En complément, voici un tutoriel sur les pages HTML de ton forum. Il te permettra également de comprendre comment utiliser les iframes :
http://forum.forumactif.com/t345798-utiliser-les-pages-html-et-les-iframes-sur-votre-forum

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Créer un tableau avec onglets dans un post

Message par cacbou le Dim 17 Fév 2013 - 16:14

Merci beaucoup pour cette réponse si rapide, je vais aller regarder cela de suite.

Amicalement Cacbou

cacbou
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 19/10/2012

http://les-mercenaires.forumactif.pro
cacbou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un tableau avec onglets dans un post

Message par cacbou le Dim 17 Fév 2013 - 18:11

Re bonjour tout le monde

Donc j'ai plus ou moins compris le système mais ne comprend pas encore ou je fais un erreur,

J'ai ouvert mon bloc note et copier/coller le code montrer ici:

Ensuite je suis aller copier le code suivant :

que j'ai coller entre les balises "body"
puis j'ai enregistré ma page, mais lorsque je l'ouvre on ne vois pas le tableau avec onglet comme présenter dans votre exemple.
Une fois que j'aurai réussi a créer ma page avec vos exemple il ne me restera qu'a remplacer les titres et contenu des onglets par les tableaux que j'ai déjà créer.

Désolé d'être si nul mais je débute complètement avec le html.
Par contre j'ai bien compris pour l'Iframe.

Amicalement Cacbou

cacbou
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 19/10/2012

http://les-mercenaires.forumactif.pro
cacbou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un tableau avec onglets dans un post

Message par Matriochka le Dim 17 Fév 2013 - 18:13

Peux-tu m’envoyer ici sous balises code ta page HTML (le code utilisé) ainsi que l’URL menant vers celle-ci ? Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Créer un tableau avec onglets dans un post

Message par cacbou le Dim 17 Fév 2013 - 19:20

Voici le lien :
http://les-mercenaires.forumactif.pro/h1-test-1

Voici les codes:

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre de la page HTML</title>
<meta charset="utf-8" />
<style>
Styles CSS de la page
</style>
</head>

<body>
<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>
<span>Onglet 4</span>
Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.
</div>
<div>
<span>Onglet 5</span>
Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin.
</div>
<div>
<span>Onglet 6</span>
Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas.
</div>
<div>
<span>Onglet 7</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus.
</div>
<div>
<span>Onglet 8</span>
Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
</div>
</div>
</body>
</html>


Merci de ton aide
Amicalement Cacbou

cacbou
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 19/10/2012

http://les-mercenaires.forumactif.pro
cacbou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un tableau avec onglets dans un post

Message par Matriochka le Dim 17 Fév 2013 - 19:23

Il faut mettre le CSS et le script donné avec, si tu veux que ça fonctionne Smile

Comme ceci :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre de la page HTML</title>
<meta charset="utf-8" />
<style>
/* .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;
}
</style>

<script>
$(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">
<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>
<span>Onglet 4</span>
Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.
</div>
<div>
<span>Onglet 5</span>
Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin.
</div>
<div>
<span>Onglet 6</span>
Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas.
</div>
<div>
<span>Onglet 7</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus.
</div>
<div>
<span>Onglet 8</span>
Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
</div>
</div>
</body>
</html>

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Créer un tableau avec onglets dans un post

Message par cacbou le Dim 17 Fév 2013 - 19:36

Il me semblait bien qu'il devait manquer quelque chose Confused

Je viens de faire un copier/coller de ce que tu as mis mais cela ne va toujours pas. pale

Voici ce que cela donne:
http://les-mercenaires.forumactif.pro/h2-test-2

cacbou
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 19/10/2012

http://les-mercenaires.forumactif.pro
cacbou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un tableau avec onglets dans un post

Message par cacbou le Lun 18 Fév 2013 - 19:20

Je me permet un petit up
en espérant que quelqu'un puisse trouver ce qui ne va pas.

Amicalement cacbou

cacbou
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 19/10/2012

http://les-mercenaires.forumactif.pro
cacbou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un tableau avec onglets dans un post

Message par cacbou le Ven 22 Fév 2013 - 0:26

Bonjour tout le monde,
a force de chercher et de prendre des petits morceaux par ci par là, j'ai réussis a faire le tableau, il ne me reste qu'a changer les contenu, voici le premier résultat ^^ http://les-mercenaires.forumactif.pro/h1-monture-test-1

cacbou
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 19/10/2012

http://les-mercenaires.forumactif.pro
cacbou a été remercié(e) par l'auteur de ce sujet.

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


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