Numérotation automatique

Version imprimable

06/01/2011, 10h48
steph_arrow

Numérotation automatique

Bonjour je voudrais publier sur ma page web une structure du type:

1. Introduction

2. Titre

3. Titre
3.1. Sous Titre
3.2. Sous Titre
3.3. Sous Titre
3.4. Sous Titre
3.5. Sous Titre

4. Titre
4.1. Sous Titre
4.1.1 Sous Sous Titre
4.1.2 Sous Sous Titre
4.2. Sous Titre
4.3. Sous Titre
4.3.1 Sous Sous Titre
4.3.2 Sous Sous Titre
4.4. Sous Titre

Je voudrais pouvoir insérer ou retirer des titres ou des sous titres et que l'ensemble se renomme automatiquement, sans avoir besoin de rentrer les nouveaux numéros à la main (car la liste est suceptible d'évoluer au fur et à mesure du temps)
J'ai pensé à une liste à puces ordonnées mais elle ne semble pas supporter des numérotations du style 3.4.5. . Est-ce que c'est possible en javascript et si oui, pouvez vous me donner des pistes de départ ?

Bonjour,
il existe les listes ordonnées

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ol class="niveau1">
  <li>Titre</li>
  <li>Titre
    <ol class="niveau2">
      <li>Sous Titre N2</li>
      <li>Sous Titre N2</li>
    </ol>
  </li>
  <li>Titre
    <ol class="niveau2">
      <li>Sous Titre N2</li>
      <li>Sous Titre N2
        <ol class="niveau3">
          <li>Sous Titre N3</li>
          <li>Sous Titre N3</li>
          <li>Sous Titre N3</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

et le style qui est associé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
ol.niveau1 {
  counter-reset: niveau1;
}
ol.niveau1 li{
  list-style-type: none;
}
ol.niveau1 li:before {
  counter-increment: niveau1;
  content: counter(niveau1) " ";
}
ol.niveau2 {
  counter-reset: niveau2;
  list-style-type: none;
}
ol.niveau2 li:before {
  counter-increment:niveau2;
  content: counter(niveau1) "." counter(niveau2,decimal) " ";
}
ol.niveau3 {
  counter-reset: niveau3;
  list-style-type: none;
}
ol.niveau3 li:before {
  counter-increment: niveau3;
  content: counter(niveau1)"." counter(niveau2,decimal)"."counter(niveau3,decimal) " ";
}

à découvir peut être...

08/01/2011, 17h04
nault

Oui c'est possible en Javascript , je n'ai pas en tête de plugin js qui le fait , mais dependanment de comment ton html est structurer cela peut être relativement simple.

Quel est ton niveau en js? Et si possible envois nous un extrait de ton html qu'on regarde ça
08/01/2011, 17h45
NoSmoking

Citation:

Envoyé par nault

Oui c'est possible en Javascript , je n'ai pas en tête de plugin

pas besoin de tant, un simple fonction récursive de quelques lignes suffit par contre il est impératif, comme toujours d'ailleurs, que la structure du document soit valide.

Le passage par javascript est, me semble t-il ayant eu à traiter le problème, indispensable, IExplorer ne traitant pas le code comme indiqué plus haut de la même façon que ces concurrents.
Mais connaissance en CSS étant des plus juste, je ne doute pas qu'il y ait une solution 100% CSS, je suis d'ailleurs preneur, comme je suis disponible pour livrer la fonction si besoin...
08/01/2011, 19h21
nault
Code:

1 2 pas besoin de tant, un simple fonction récursive ...
Le but serait en autre deviter que le html soit generer en javascript. ce qui est pas la meilleur solution pour le referencement.

ex de mettre la zone de ta page ou tu vx creer cette effet de liste ordonné dans une balise de class x

ex :
Code:

1 2 3 4 <div class"x"> ... <div>
ensuite tu creer un plugin ex orderTitle et appeler la fonction orderTitle dans le onLoad de ton body ou dans le $(window).ready() en Jquery

orderTitle ne va qu'agir sur le contenu des element appartant a la class x

cela permet comme jai mentionné permettre au texte de pas etre générer en js, ce qui permet a google de référencer ta page. et aussi de pouvoir aisément transporter ton script dun projet a lautre en séparant code et html

Citation:

je ne doute pas qu'il y ait une solution 100% CSS

je serait preneur moi aussi mais je suis pas convaincu si ca se fait?

il est possible de coder de facon que ce soit cross-browser compatible, ou sinon prendre un framework comme jQuery qui sen charge a ta place
09/01/2011, 10h40
NoSmoking

cela va effectivement dépendre de la structure du document, l'utilisation des balise H1, H2, H3 etc... peut être une bonne alternative, mais sans information de la part de steph_arrow, il va être difficile de poursuivre.
11/04/2011, 15h53
steph_arrow

problème résolu

Merci beaucoup NoSmoking et nault.

C'est super sympa de votre part,
mon problème a été résolu !
11/04/2011, 19h12
NoSmoking

c'est pas sympa de ta part, tu nous laisses sans nouvelles plus d'un mois, oui 4 c'est plus de 1, et même pas tu partages LA solution...:cry:
24/05/2011, 09h55
steph_arrow

Excusez moi NoSmoking de vous avoir laissé en rade,

en fait le problème a été résolu non pas parce que j'ai trouvé la solution, mais parce que la problématique a disparu.