structure d'onglets.

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

Résolu structure d'onglets.

Message par Carrie. le Mar 5 Mai 2015 - 22:35

Bonjour à tous,
Je viens vers vous ce soir, car j'ai un petit soucis, ce n'est que du détail mais quitte à bien faire les choses, autant le faire jusqu'au bout ! Bref, j'ai trouvé un code pour faire des onglets sans passer par Javascript. Le seul petit hic, c'est qu'il faut rédiger le contenu de l'onglet2 avant celui de l'onglet1. Je sais que ce n'est pas bien grave, mais comme le code sera pour des futurs membres, je n'ai pas envie de les embêter. Ma question est donc purement esthétique et pour ma part, je n'ai pas réussi à comprendre à comment modifier le code. Donc voilà, j'aimerai que dans la partie html, on puisse d'abord avoir le contenu de l'onglet 1 avant l'onglet 2. Merci beaucoup Smile.

Voici les codes (en hide) :


CSS :


Bonne soirée!


Dernière édition par Carrie. le Mer 6 Mai 2015 - 22:31, édité 1 fois

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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

Résolu Re: structure d'onglets.

Message par MlleAlys le Mar 5 Mai 2015 - 23:39

Bonjour,
si c'est pour les membres, je peux vous proposer un autre code, peut être plus simple, d'onglets sans javascript :
contenu 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>

code css associé, personnalisable :
Code:
.tableonglets span.ongletcont {
  display: none;
}
.tableonglets input {
  display:none;
}
.tableonglets input:checked + span.ongletcont {
  display: block;
}
.tableonglets span.ongletcont {
  background: white;
  width: 200px;
  padding: 5px;
  height: 150px;
  overflow: auto;
}
.tableonglets label.onglet {
  display: inline-block;
  background: rgb(153, 186, 202);
  margin: 0 2px;
  width: 100px;
  text-align: center;
}

MlleAlys
+ Hyperactif +

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

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

Résolu Re: structure d'onglets.

Message par Carrie. le Mer 6 Mai 2015 - 22:30

Oh Merci beaucoup !!!
Effectivement, c'est beaucoup plus simple Mr. Green
Résolu !

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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