Ce script permet de construire une table des matières numérotée et paginée.
Toute la magie de l'exercice repose sur l'utilisation des propriétés counter-xxx disponible depuis CSS 2.1 et du sélecteur :before.
Toute la magie de l'exercice repose sur l'utilisation des propriétés counter-xxx
disponible depuis CSS 2.1 et du sélecteur :before
.
counter-reset
counter-increment
counter(xxx)
upper-latin
, upper-roman
, etc. (liste complète ici).xxx:before
Les attributs counter-xxx
sont applicables à pratiquement tous les types de balise : dt
, dd
, ul
, ol
, li
, p
, h
, etc. ce qui rend leur usage particulièrement versatile.
<style>
/* Définitions génériques */
ol, li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ol span {
float: right;
margin-right: 10px;
}
/* Niveau 1 */
ol {
counter-reset: niv1; /* Initiate a counter */
margin-left: 0;
padding-left: 0;
}
ol li {
margin: 1.5em 0 1em 0;
list-style: none;
border-bottom: 2px solid #333;
padding: 4px 4px 4px 0px;
font-weight: bold;
background: #999;
color: #fff;
}
ol li:before {
content: "Section " counter(niv1, upper-roman);
counter-increment: niv1;
padding: 4px 8px 4px 4px;
margin-right: 4px;
background: #333;
color: #fff;
}
/* Niveau 2 */
ol ol {
counter-reset: niv2; /* Initiate a counter */
margin-left: 20px;
padding-left: 0;
}
ol ol li {
margin: 1em 0 0.6em 0;
list-style: none;
border-bottom: 1px solid #aaa;
font-weight: normal;
background: none;
color: #000;
}
ol ol li:before {
content: "Chapitre " counter(niv1, upper-roman) "." counter(niv2, upper-latin) ".";
counter-increment: niv2;
padding: 4px 4px 4px 4px;
margin-right: 4px;
background: none;
color: #333;
}
/* Niveau 3 */
ol ol ol {
counter-reset: niv3; /* Initiate a counter */
margin-left: 20px;
padding-left: 0;
}
ol ol ol li {
margin: 0.5em 0 0em 0;
list-style: none;
border-bottom: none;
font-size: 0.9em;
}
ol ol ol li:before {
content: counter(niv1, upper-roman) "." counter(niv2, upper-latin) "." counter(niv3) ".";
counter-increment: niv3;
padding:4px;
margin-right:8px;
}
/* Niveau 4 */
ol ol ol ol {
counter-reset: niv4; /* Initiate a counter */
margin-left: 20px;
padding-left: 0;
}
ol ol ol ol li {
margin: 0;
list-style: none;
border-bottom: none;
font-size: 0.8em;
}
ol ol ol ol li:before {
content: counter(niv1, upper-roman) "." counter(niv2, upper-latin) "." counter(niv3) "." counter(niv4) ".";
counter-increment: niv4;
padding:4px;
margin-right:8px;
}
</style>
<html>
<head>
<!--
Placer ici les définitions de style
-->
</head>
<body>
<ol>
<li>Niveau 1</li>
<ol>
<li>Niveau 2<span>10</span></li>
<ol>
<li>Niveau 3<span>10</span></li>
<ol>
<li>Niveau 4<span>10</span></li>
<li>Niveau 4<span>11</span></li>
<li>Niveau 4<span>12</span></li>
<li>Niveau 4<span>13</span></li>
</ol>
<li>Niveau 3<span>13</span></li>
<ol>
<li>Niveau 4<span>14</span></li>
<li>Niveau 4<span>15</span></li>
<li>Niveau 4<span>16</span></li>
<li>Niveau 4<span>17</span></li>
</ol>
<li>Niveau 3<span>18</span></li>
<li>Niveau 3<span>19</span></li>
</ol>
<li>Niveau 2<span>20</span></li>
<ol>
<li>Niveau 3<span>21</span></li>
<li>Niveau 3<span>22</span></li>
<li>Niveau 3<span>23</span></li>
<li>Niveau 3<span>24</span></li>
</ol>
</ol>
<li>Niveau 1</li>
<ol>
<li>Niveau 2<span>25</span></li>
<li>Niveau 2<span>26</span></li>
</ol>
</ol>
</body>
</html>