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

[gaellecathleen]

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 :/

[MlleAlys]

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 :

[gaellecathleen]

Merci beaucoup mais ça ne fonctionne pas :/

[MlleAlys]

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

[gaellecathleen]

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

[MlleAlys]

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

[gaellecathleen]

merci ça fonctionne