Accueil
Créer un forumCréer un tableau avec onglets dans un post
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Créer un tableau avec onglets dans un post
par cacbou 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
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
-
Messages : 10
Inscrit(e) le : 19/10/2012 -
Re: Créer un tableau avec onglets dans un post
par Matriochka Dim 17 Fév 2013 - 16:10
Bonjour et Bienvenue Vu que vous êtes nouveau, voici quelques sujets importants :sur le Forum des Forums Forumactif  Sécurité : mail de fondation - Ce qu'il ne faut pas faire
 |
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 :
https://forum.forumactif.com/t345798-utiliser-les-pages-html-et-les-iframes-sur-votre-forum
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Créer un tableau avec onglets dans un post
par cacbou Dim 17 Fév 2013 - 16:14
Merci beaucoup pour cette réponse si rapide, je vais aller regarder cela de suite.
Amicalement Cacbou
Amicalement Cacbou
cacbou- Nouveau membre
-
Messages : 10
Inscrit(e) le : 19/10/2012 -
Re: Créer un tableau avec onglets dans un post
par cacbou 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
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
-
Messages : 10
Inscrit(e) le : 19/10/2012 -
Re: Créer un tableau avec onglets dans un post
par Matriochka 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 ? 
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Créer un tableau avec onglets dans un post
par cacbou 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
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
-
Messages : 10
Inscrit(e) le : 19/10/2012 -
Re: Créer un tableau avec onglets dans un post
par Matriochka Dim 17 Fév 2013 - 19:23
Il faut mettre le CSS et le script donné avec, si tu veux que ça fonctionne
Comme ceci :
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- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Créer un tableau avec onglets dans un post
par cacbou Dim 17 Fév 2013 - 19:36
Il me semblait bien qu'il devait manquer quelque chose 
Je viens de faire un copier/coller de ce que tu as mis mais cela ne va toujours pas.
Voici ce que cela donne:
http://les-mercenaires.forumactif.pro/h2-test-2
Je viens de faire un copier/coller de ce que tu as mis mais cela ne va toujours pas.
Voici ce que cela donne:
http://les-mercenaires.forumactif.pro/h2-test-2
cacbou- Nouveau membre
-
Messages : 10
Inscrit(e) le : 19/10/2012 -
Re: Créer un tableau avec onglets dans un post
par cacbou 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
en espérant que quelqu'un puisse trouver ce qui ne va pas.
Amicalement cacbou
cacbou- Nouveau membre
-
Messages : 10
Inscrit(e) le : 19/10/2012 -
Re: Créer un tableau avec onglets dans un post
par cacbou 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
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
-
Messages : 10
Inscrit(e) le : 19/10/2012 -
Sujets similaires» Tableau avec Onglets dans la News
» Problème avec une structure de type tableau à onglets
» Problème avec mon tableau à Onglets.
» Problème avec Tableau à onglets
» Problème avec le tableau à onglets.
» Problème avec une structure de type tableau à onglets
» Problème avec mon tableau à Onglets.
» Problème avec Tableau à onglets
» Problème avec le tableau à onglets.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum