Systhème d'onglets dans fiche de présentation.

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

Résolu Systhème d'onglets dans fiche de présentation.

Message par gaellecathleen le Jeu 14 Avr 2016 - 9:27

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumtestepoison.forumactif.be/

Description du problème

Coucou, oui c'est encore moi **
Alors, j'ai testé plusieurs codes pour intégrer un système d'onglet dans ma fiche de présentation avec Javascript itou itou mais ça ne donne jamais rien. Du coup, quelqu'un saurait m'orienter? Parce que sur le coup je désespère totalement, j'ai beau fouiller dans les sujets et bien les codes ne fonctionnent pas :/


Dernière édition par gaellecathleen le Jeu 14 Avr 2016 - 18:57, édité 1 fois

gaellecathleen
**

Messages : 65
Inscrit(e) le : 06/05/2012

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

Résolu Re: Systhème d'onglets dans fiche de présentation.

Message par MlleAlys le Jeu 14 Avr 2016 - 13:37

Bonjour,
Vous pouvez essayer ce style là (html et css, pas de javascript) :

code html à mettre dans le message :
Code:
<div class="tableonglets">
    <label for="o1" class="onglet">TITRE ONGLET 1</label>
    <label for="o2" class="onglet">TITRE ONGLET 2</label>

    <input id="o1" type="radio" name="onglets" checked />
    <span class="ongletcont">CONTENU ONGLET 1</span>

    <input id="o2" type="radio" name="onglets" />
    <span class="ongletcont">CONTENU ONGLET 2</span>
</div>

Code css à mettre dans la feuille de style du forum :
Code:
.tableonglets span.ongletcont {
  display: none;
}
.tableonglets input {
  display: none;
}
.tableonglets input:checked + span.ongletcont {
  display: block;
}
.tableonglets span.ongletcont {
  width: 200px;
  height: 150px;
  padding: 5px;
  overflow: auto;
  background: white;
}
.tableonglets label.onglet {
  display: inline-block;
  width: 100px;
  margin: 0 2px;
  text-align: center;
  background: rgb(153,186,202);
  cursor: pointer;
}

Résultat :

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

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

Résolu Re: Systhème d'onglets dans fiche de présentation.

Message par gaellecathleen le Jeu 14 Avr 2016 - 15:14

Merci beaucoup mais ça ne fonctionne pas :/

gaellecathleen
**

Messages : 65
Inscrit(e) le : 06/05/2012

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

Résolu Re: Systhème d'onglets dans fiche de présentation.

Message par MlleAlys le Jeu 14 Avr 2016 - 18:15

Auriez vous un lien vers le message dans lequel vous avez testé ce tableau ?

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

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

Résolu Re: Systhème d'onglets dans fiche de présentation.

Message par gaellecathleen le Jeu 14 Avr 2016 - 18:40

Oui http://forumtestepoison.forumactif.be/t21-bottin-des-avatars#100
Dernier poste Smile

gaellecathleen
**

Messages : 65
Inscrit(e) le : 06/05/2012

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

Résolu Re: Systhème d'onglets dans fiche de présentation.

Message par MlleAlys le Jeu 14 Avr 2016 - 18:51

oups là oui pardon, voici le bon code html :
Code:
<div class="tableonglets">
<label for="o1" class="onglet">TITRE ONGLET 1</label><label for="o2" class="onglet">TITRE ONGLET 2</label>
<input id="o1" type="radio" name="onglets" checked><span class="ongletcont">CONTENU ONGLET 1</span><input id="o2" type="radio" name="onglets"><span class="ongletcont">CONTENU ONGLET 2</span>
</div>
J'ai pris le code en forme, mais dans les messages il faut supprimer les retours à la ligne...

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

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

Résolu Re: Systhème d'onglets dans fiche de présentation.

Message par gaellecathleen le Jeu 14 Avr 2016 - 18:57

merci ça fonctionne Smile

gaellecathleen
**

Messages : 65
Inscrit(e) le : 06/05/2012

gaellecathleen 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