CSS : Numérotation automatique des titres h2, h3, etc.

Bonjour,

je voudrais automatiser la numérotation des paragraphes de ma page web en CSS gràace aux compteurs. J'utilise les balises <h2> et <h3> comme titres de paragraphes.

Voici la page d'exemple sur laquelle je travaille :
http://ceyquem.free.fr/hfr/exemple.xhtml

Mon problème :
* l'incrémentation des numéros ne se fait pas automatiquement, je reste à 1
* la détection du numéro du compteur de h2 dans les balises de h3 ne se fait pas (j'ai 0).


Voici la feuille de style associée :
http://ceyquem.free.fr/hfr/style.css

Et ici le code qui devrait numéroter les paragraphes :

h1 {
 text-align: center;
 font-family: Helvetica, Arial, sans-serif, Verdana;
}
 
h2:before {
 content: counter(section) ". ";
 counter-increment: section;
 counter-reset: subsection;
}
 
h2 {
 font-family: Helvetica, Arial, sans-serif, Verdana;
 padding-left: 0;
 margin-top: 2em;
 
 padding-bottom: .1em;
 border-bottom: 1px solid #000;
}
 
h3:before {
 content: counter(section) "." counter(subsection) ". " ;
 counter-increment: subsection;
}
 
h3 {
 padding-left: 1em;
 font-family: Helvetica, Arial, sans-serif, Verdana;
 margin-top: 1em;
}

Une idée de l'origine de mon problème ??

Merci de m'avoir lu

Merci d'avoir ouvert ce sujet car je ne connaissais rien du tout aux compteurs (je ne savais même pas que ça existait, mais ça me donne des idées !), et ça va me permettre de me pencher sur le problème.

Avant de me plonger dans de la doc, j'ai fait un petit test en modifiant ta CSS à la volée (j'aime l'extension Web Developper ), et voilà ce qui en sort.

Je me suis dit que si à chaque fois on avait 1, c'est qu'il recommençait le comptage à chaque nouveau titre. J'ai donc tenté d'identifier les instructions qui initient un comptage, et mon choix s'est porté sur :

counter-increment: section;
counter-reset: subsection;

Ensuite, pour que ça s'applique à tous les titres, j'ai placé ces instructions sur l'élément parent des titres, en l'occurence body

body {
	counter-increment: section;
	counter-reset: subsection;
}

Il faut croire que j'ai été bien inspiré, parce que ça marche
Par contre, le h1 est pris en compte (même s'il n'affiche pas de numéro, car il n'a pas de propriété ad hoc), du coup la numérotation commence au numéro 2 pour le premier h2.
La numérotation des titres de troisième niveau a l'air de fonctionner juste comme il faut.

Voilà, je pense que ça peut aider. Si quelqu'un a une source solide sur la question, je suis preneur.

Merci pour cette aide !

Après quelques tests, j'ai réussi à résoudre le problème. Voici le CSS qui va bien :

body {
	background-image: url(clarkwan.com.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top left;
	margin-left: 25px;
}

a {
	color: #B21E1D;
}

a:hover {
	color: #720303;
	text-decoration: none;
}

h1 {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif, Verdana;
	counter-reset: section;
}

h2:before {
	content: counter(section) ". ";
}

h2 {
	font-family: Helvetica, Arial, sans-serif, Verdana;
	padding-left: 0;
	margin-top: 2em;

	padding-bottom: .1em;
	border-bottom: 1px solid #000;

	counter-increment: section;
	counter-reset: subsection;
}

h3:before {
	content: counter(section) "." counter(subsection) ". " ;
}

h3 {
	padding-left: 1em;
	font-family: Helvetica, Arial, sans-serif, Verdana;
	margin-top: 1em;

	counter-increment: subsection;
}

p {
	text-align: justify;
}

pre {
	border-left : 1px solid #999;
	padding: 5px;
	margin-left: 2em;
	margin-right: 2em;
	background-color: #eee;	
}

pre:before {
	content: "Code";
	font-weight: bold;
}

tt {
	background-color: #f0edf5;
}

code {
	background-color: #dedcef;
	color: #444;
	padding-left: 2px;
	padding-right: 4px;
	padding-bottom: 1px;
	border-left: 1px solid #445;
	border-top: 1px solid #445;
}

code:hover {
	background-color: #668;
	color: #eee;
	padding-left: 2px;
	padding-right: 4px;
	padding-bottom: 1px;
	border-left: 1px solid #445;
	border-top: 1px solid #445;
}

- Il faut placer les instruction des compteurs dans les balises elles mêmes et pas dans les "before".
- De plus, il faut rajouter un reset dans la balise pour que les sections commencent à 1
- Enfin, les reset dans le body ne sont aparamment pas nécessaires.

Cdt
Modifié par ceyquem (19 Mar 2006 - 16:42)