DIV imbriquées et "faux" onglets

Bonjour,

Mon but est de faire tenir sur une seule page plusieures "petites" pages

Je pars de 3 div, je voudrais, lorsque j'appuie sur un bouton, afficher une div et cacher les deux autres, et ainsi de suite pour les deux autres div.
(1 bouton = affiche une div et cache deux autres.)

en cherchant sur le net je suis tombé sur une page explicative des possibilités css. Sur cette page il y a un exemple qui crée des sortes d'onglets.

En tapant le code suivant je devrais obtenir le meme resultat que sur l'image en dessous du code:

<style type="text/css">
  body {background: silver; color: black}
  div.records {display: stack; border: outset}
  div.record {display: card}
  h2 {display: tab; width: 5em; border: outset; text-align: center}
  h2:current {border-bottom: solid silver}
</style>
<div class=records>
  <div class=record>
    <h2>Men's fashion</h2>
    <ul>
      <li>Oversized jeans, 4 pockets.
      <li>…
    </ul>
  </div>
  <div class=record>
    <h2>Women's fashion</h2>
    …
  </div>
  <div class=record>
    <h2>Children's fashion</h2>
    …
  </div>
</div>

Resultat souhaité:
http://www.w3.org/TR/css3-layout/tab1.png

Il me manque apparement quelque chose dans le code pour obtenir le resultat souhaité car en testant ce code, les div s'affichent les unes a la suite des autres.

Je n'arrive pas a trouver d'autres infos sur le display:stack et display:card sur le net.

Existe t il une autre solution ou une autre technique pour faire ce que je veux ou avez vous une info à me donner sur comment ameliorer ce code.

Merci beaucoup!

Bonjour,

Ces deux valeurs de display n'existent pas en CSS2.1.

Ce type d'onglet nécessite conjointement javascript et CSS (à base de position: absolute)

Bonjour,

Merci pour cette réponse rapide!

Malheureusement, je ne doit pas utiliser de javascript dans ma page, je doit le faire uniquement en css.

Je n'ai pas forcement besoin des onglets,

Il me semble que l'on peut supperposer les div au meme endroit et les afficher une par une en cliquant sur un lien? Est-ce correct? si oui quelles sont les syntaxes css utilisées? Je ne connais pas le css mais avec le nom des syntaxes correctes je m'amuserai à trouver le bon code !
Merci!

broke a écrit :
Il me semble que l'on peut supperposer les div au meme endroit

Oui...

broke a écrit :
et les afficher une par une en cliquant sur un lien?

... avec Javascript.

Si tu ne peux pas utiliser Javascript (il y a une raison pour ça ?), ça n'est pas possible, et il faudra envisager d'autres moyens d'accéder au contenu.