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

2 participants

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 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
avatar

gaellecathleen
**

Messages : 73
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 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 :
Systhème d'onglets dans fiche de présentation. Sp8e
MlleAlys

MlleAlys
Membre actif

Messages : 5767
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 Jeu 14 Avr 2016 - 15:14

Merci beaucoup mais ça ne fonctionne pas :/
avatar

gaellecathleen
**

Messages : 73
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 Jeu 14 Avr 2016 - 18:15

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

MlleAlys
Membre actif

Messages : 5767
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 Jeu 14 Avr 2016 - 18:40

avatar

gaellecathleen
**

Messages : 73
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 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

MlleAlys
Membre actif

Messages : 5767
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 Jeu 14 Avr 2016 - 18:57

merci ça fonctionne Smile
avatar

gaellecathleen
**

Messages : 73
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

- Sujets similaires

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