Compteurs dans FirefoxRésolu/Fermé

Question

Bonjour,

J'ai un document technique écrit en HTML et je voudrais que les titres soient précédés d'une numérotation hiérarchique:

1 - Chapitre AAA
1.1 Section BBB de AAA
1.1.1 Sous-section CCC de BBB de AAA
etc.

J'ai utilisé le code suivant dans mon css:


body { counter-reset: t1 }
h1:before { content: counter(t1) " - ";  counter-increment: t1; counter-reset: t2; }
h2:before { content: counter(t1) "." counter(t2) " - "; counter-increment: t2; counter-reset: t3 }
h3:before { content: counter(t1) "." counter(t2) "." counter(t3) " - "; counter-increment: t3; counter-reset: t4 }
h4:before { content: counter(t1) "." counter(t2) "." counter(t3) "." counter(t4) " - "; counter-increment: t4; }


Mais ça ne fonctionne pas correctement dans Firefox 3.04 ou Google Chrome 0.4.154.29. Une numérotation hiérarchique incorrecte s'affiche.

Dans Internet Explorer 7, aucune numérotation hiérarchique ne s'affiche. Pour moi, c'est préférable è une numérotation erronée.

Opera 9.6, lui, affiche tout correctement.


Il faut noter que mes titres H1 à H4 ne sont pas emboîtés. Ils sont toujours sous la racine de l'élément BODY.

Sur un site (  https://www.sitepoint.com/html-css/css/

joël · Answer

Désolé les aminches. Mon message précédent a été envoyé avant que j'aie terminé de l'écrire (d'où la fin abrupte).

Entre-temps, j'ai trouvé la solutoin. Pour ceux que ça intéresse, il ne faut pas faire la remise à zéro dans le pseudo-élément hi:before, mais dans hi.

Voici donc la solution (qui fonctionne dans Firefox 3.04, Opera 9.62 et Google Chrome 0.4.154.29, et qui se dégrade de façon acceptable dans Internet Explorer 7:


h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { color: silver; font-size: 80% }
h1:before { color: rgb(166,166,166); }
body { counter-reset: t1; }
h1:before { counter-increment: t1; content: counter(t1) " - "; }
h1 { counter-reset: t2; }
h2:before { counter-increment: t2; content: counter(t1) "." counter(t2) " - "; }
h2 { counter-reset: t3; }
h3:before { counter-increment: t3; content: counter(t1) "." counter(t2) "." counter(t3) " - "; }
h3 { counter-reset: t4; }
h4:before { counter-increment: t4; content: counter(t1) "." counter(t2) "." counter(t3) "." counter(t4) " - "; }
h4 { counter-reset: t5; }
h5:before { counter-increment: t5; content: counter(t1) "." counter(t2) "." counter(t3) "." counter(t4) "." counter(t5) " - "; }
h5 { counter-reset: t6; }
h6:before { counter-increment: t6;
            content: counter(t1) "." counter(t2) "." counter(t3) "." counter(t4) "." counter(t5) "." counter(t6) " - "; }

Compteurs dans Firefox

1 réponse

Discussions similaires

Newsletters