Boîte à onglets

 En brut de fonderie, un essai sur une idée du petit randonneur, pour afficher ses vignettes de sujets en plusieurs pages; la première page est affichée et les suivantes invisibles mais visibles au clic sur chaque bouton.

Certainement beaucoup de choses à reprendre sur ce code mais il peut servir de base...

<div style="position: relative; width: 1602px; height: 750px; text-align: left; border: 1px solid black; background: purple;">
<div style="width: 1090px; height: auto; text-align: left;"><input id="cc1" style="width: 100px; text-align: center;" type="text" value="Page 1" /><input id="cc2" style="width: 100px; text-align: center;" type="text" value="Page 2" /><input id="cc3" style="width: 100px; text-align: center;" type="text" value="Retour" />
<div id="ong0">
<p id="al1" class="al">vignette 1</p>
<p id="al2" class="al">vignette 2</p>
<p id="al3" class="al">vignette 3</p>
<p id="al4" class="al">vignette 4</p>
</div>
<div id="ong1">
<p id="al1a" class="al">vignette 1a</p>
<p id="al2a" class="al">vignette 2a</p>
<p id="al3a" class="al">vignette 3a</p>
<p id="al4a" class="al">vignette 4a</p>
</div>
<div id="ong2">
<p id="al1a" class="al">vignette 1b</p>
<p id="al2a" class="al">vignette 2b</p>
<p id="al3a" class="al">vignette 3b</p>
<p id="al4a" class="al">vignette 4b</p>
</div>
</div>
<div id="rb">Rubriques Lat&eacute;rales</div>
</div>


<style><!--
#rb{position: absolute; z-index: 10; width: 500px; height: 700px; text-align: center; border: 1px solid black; background: beige; transform: translate(1100px,0px);}
#ong0{position:absolute; width: 1090px; height: 700px; text-align: left; border: 1px solid black; background: pink; transform:translate(0px,0px);}
#ong1{position:absolute; width: 1090px; height: 700px; text-align: left; border: 1px solid black; background: lime; display:none;}
#ong2{position:absolute; width: 1090px; height: 700px; text-align: left; border: 1px solid black; background: blue; display:none;}
.al{float:left; width:300px; height:300px; border:1px solid black; text-align:center; margin-left:20px;}
#al1{background:yellow;}
#al2{background:lime;}
#al3{background:blue;}
#al4{background:green;}
#al1a{background:Aqua;}
#al2a{background:Bisque;}
#al3a{background:Burlywood;}
#al4a{background:Cadetblue;}
#al1b{background:Chartreuse;}
#al2b{background:Coral;}
#al3b{background:DarkCyan;}
#al4b{background:GoldenRod;}
#cc1:focus ~ #ong1{display:block;}
#cc2:focus ~ #ong2{display:block;}
--></style>