structure d'onglets.

[Carrie.]

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 .

Voici les codes (en hide) :


CSS :


Bonne soirée!

[MlleAlys]

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;
}

[Carrie.]

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