Table des matières en CSS

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.

Les balises CSS utiles

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
Permet d'initialiser un ou plusieurs compteurs et de le nommmer par une variable. Par défaut l'initialisation débute à 0, mais il est possible de choisir le nombre de départ.
counter-increment
Permet d'incrémenter un compteur spécifié par son nom de variable. L'incrément par défaut est 1, mais il est personnalisable.
counter(xxx)
La valeur du compteur. Le deuxième paramètre permet de spécifier un format d'affichage : upper-latin, upper-roman, etc. (liste complète ici).

xxx:before
Permet de définir un format d'affichage précis, notamment avec l'attribut content.

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.

Le code CSS

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

Exemple de mise en œuvre

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

Voir un exemple

Qui suis-je ?

Mon incapacité à rester oisif est aussi le gage d'un dynamisme réel et permanent.

Découvrir est une motivation permanente qui explique mes voyages vers des lieux et cultures différentes, que ce soit sur terre... ou sous l'eau !

Mon parcours professionnel volontairement diversifié me permet aujourd'hui d'aborder de nombreux sujets avec, parfois, des vues décalées et des réflexes ou points différents des classiques.

Des articles plubliés dans la presse, des conceptions de sites Web, des plaquettes et flyers réalisés, sans oublier l'animation de formations, sont les preuves d'une capacité à communiquer établie.


Contact

Une proposition d'emploi ? Envie de dire Bonjour ? Contactez-moi !

contact@ahounou.com
LinkedIn Viadeo
FaceBook Google +
YouTube


Ce qu'ils disent de moi

I'm glad to endorse Ismael. It was a real pleasure to work with someone has smart and efficient as Ismael. In a difficult context, Ismael is one person you can rely on. Above everything, Ismael has an amazing ability to see the big picture and keep focus on what does matter.

RKE, Project Manager on LinkedIn

D'autres recommandations sont visibles sur LinkedIn  ou Viadeo .

© Ismaël Ahounou - http://www.ahounou.com