Liste sur des <h*> ?

Bonjour,

Je suis soumis à un problème : je dois faire des titres de la manière suivante :

1. Première partie
I. Première sous partie
II. Deuxième sous partie
2. Deuxième partie

etc...

Question : sémantiquement parlant, comment faire "propre" pour affecter des numéros aux titres ? Si je fais ça :

<ul>
<li><h1>Truc</h1></li>
<li><h1>Bidule</h1></li>
</ul>

Ca complique la vie avec le CSS vu que le style appliqué au H1 ne sera pas appliqué à la "puce" (au numéro quoi)... alors y'a-t-il une issue autre que coder le numéro "en dur" en faisant <h1>1. Première partie</h1> ?
Modifié le 23 Nov 2004 - 21:45

Pas de solution, mais des regrets avec ce que nous laisse toucher du doigt css2 avec counter-increment et counter-reset, qui n'est pour l'instant supporté que par Opera (voici capture ci-dessous)


Une numérotation des têtes de chapître gérés par css avec auto-incrément grâce à la pseudo-class :before et aux propriétés content, counter-increment, counter-reset:

H2:before {
    content: "Chapitre " counter(chapitre) ". ";
    counter-increment: chapitre;  /* Ajoute 1 au chapitre */
    counter-reset: section;      /* Remet la section à zéro */
	 margin-left:1em;
	
}
H3:before{
	 content: counter(chapitre) "." counter(section) " ";
    counter-increment: section;
	 margin-left:3em;
}
H4:before{
	 content: counter(chapitre) "." counter(section) " ";
    counter-increment: section;
	 margin-left:4em;
}

et dans le code de la page des h1, h2, h3 etc bien agencés.

J'arrête là mes rêveries ça ne résout pas tes problèmes, mais j'espère que cela te laisse songeur.

Et dire que tout cela est écrit là et là, mais seulement utilisable avec Opera; quel chouette navigateur quand même.

Dommage

Pour les premiers niveaux et les autres tu peux par exemple utiliser des ol:

<ol>
      <li>
        <h2>
          Truc
        </h2>
        <ol>
          <li>
            <h3>
              Encore un truc
            </h3>
          </li>
          <li>
            <h3>
              Pourquoi pas un bidule
            </h3>
          </li>
        </ol>
      </li>
      <li>
        <h2>
          Bidule
        </h2>
        <ol>
          <li>
            <h3>
              Encore un truc
            </h3>
          </li>
          <li>
            <h3>
              Pourquoi pas un bidule
            </h3>
          </li>
        </ol>
      </li>
    </ol>

Ce qui devrait donné cela (image):


Je garderais le h1 pour le titre général du plan à faire.
Modifié le 24 Nov 2004 - 15:26

Ben c'est ce que je disais dans mon premier post :

a écrit :
Ca complique la vie avec le CSS vu que le style appliqué au H1 ne sera pas appliqué à la "puce" (au numéro quoi)...

Je suis pas sûr d'avoir tout saisi de ta demande.

De ce que j'ai compris tu souhaites établir une structure avec des titres de niveaux différents qui introduisent des sections et des sous-sections. Tu souhaites d'autre part que des titres hn donnent la hiérarchie et quelle soit indiquée en plus de la valeur propre des hn, d'où les listes.
En conjugant les listes ordonnées ol imbriquées aux différents niveaux de titre tu peux il me semble arriver à ce résultat comme je l'ai fait dans le dernier post, sans rajouter de "1", "2" dans ton code.
Ceci dit j'ai peut-être rien compris aussi.

Igor a écrit :
Je suis pas sûr d'avoir tout saisi de ta demande.

De ce que j'ai compris tu souhaites établir une structure avec des titres de niveaux différents qui introduisent des sections et des sous-sections. Tu souhaites d'autre part que des titres hn donnent la hiérarchie et quelle soit indiquée en plus de la valeur propre des hn, d'où les listes.
En conjugant les listes ordonnées ol imbriquées aux différents niveaux de titre tu peux il me semble arriver à ce résultat comme je l'ai fait dans le dernier post, sans rajouter de "1", "2" dans ton code.
Ceci dit j'ai peut-être rien compris aussi.

Du point du XHTML, y'a pas de problème. Mais si je veux mettre en forme mes titres avec CSS, les numéros en face des titres ne subiront pas la mise en forme

Et ca te coûte vraiment d'appliquer la même mise en forme aux éléments de la liste ?

Suffit d'appliquer les styles sur les mêmes éléments, en les séparant par des virgules. Un petit exemple :

ol li, ol li hn { mes styles }

Non ?
Modifié le 24 Nov 2004 - 18:14

ElMoustiko a écrit :
Wé mais les numéros sont du contenu, pas la présentation (à mon sens) donc il ne faudrait pas les mettres en place avec CSS.

Je suis bien d'accord, sauf que dans la solution proposée par Igor, c'est les balises ol li qui vont générées la numérotation, donc pas CSS.

EDIT : mais j'imagine que tu parlais de sa solution précédente...
Modifié le 24 Nov 2004 - 18:12

Wé j'ai bien compris mais

e-t172 a écrit :

Mais si je veux mettre en forme mes titres avec CSS, les numéros en face des titres ne subiront pas la mise en forme

Et là je disais que CSS pour cette utilisation etait peu adapté
Donc on est d'accord !

a écrit :
Suffit d'appliquer les styles sur les mêmes éléments, en les séparant par des virgules. Un petit exemple :

ol li, ol li hn { mes styles }

Oh ! J'avais proposé ca un peu rapidement. C'est un peu trop incomplet !

Tu peux utiliser les différents niveaux pour appliquer les styles, du genre :

ol li,ol li h2 {styles du titre h2}
ol li li,ol li li h3 {styles du titre h3}

Tu vois ce que je veux dire ?

Je crois que ce serait une bonne solution étant donné que tu vas utiliser une hiérarchie qui sera identique pour tes hn et li.
Modifié le 24 Nov 2004 - 18:26

Merkel a écrit :
Tu peux utiliser les différents niveaux pour appliquer les styles, du genre :

ol li,ol li h2 {styles du titre h2}
ol li li,ol li li h3 {styles du titre h3}

Tu vois ce que je veux dire ?

Je crois que ce serait une bonne solution étant donné que tu vas utiliser une hiérarchie qui sera identique pour tes hn et li.

Il y a un énorme problème dans les deux versions de ton code : il suffit que je fasse <ol><li> sans mettre de <h2> pour qu'il y applique la mise en forme... des éléments de liste normaux présentés comme des titres, bof bof

Les numéros, du contenu ou de la présentation ? C'est discutable... mon point de vue personnel est qu'un numéro devant un titre relève de la présentation (qu'il y ait le numéro ou pas, ou que les numéros soit 1. ou I., la structure et le contenu reste inchangés).
Modifié le 24 Nov 2004 - 19:41

e-t172 a écrit :

Il y a un énorme problème dans les deux versions de ton code : il suffit que je fasse <ol><li> sans mettre de <h2> pour qu'il y applique la mise en forme... des éléments de liste normaux présentés comme des titres, bof bof

Je me suis basé sur le fait qu'il s'agissait d'une liste de titres de chapitre, et qu'il n'y aurait que des titres dans la liste, et non pas des éléments normaux. J'ajouterais aussi que s'il existe d'autres listes ol dans le site, il faut bien sûr utiliser un ID ou une Class pour la liste des chapitres.

Dans le cas où il y a autres choses que des titres dans la liste des chapitres, il reste la solution d'utiliser des class.
Modifié le 24 Nov 2004 - 19:55

Bah moi je trouve ça plutot du contenu les numéros, ça définit un enchainement (comme des chapitres par exemple), le I devant être lu avant le II parceque le II utilise des notions expliquées dans le I (par exemple)

En effet, c'est du contenu, mais en utilisant la balise ol + CSS, je me dis que l'utilisateur pourra décider le type de numérotation qu'il désir : alphabétique, numérique, chiffres romains etc... via un fichier CSS personnalisé ou via son navigateur.

Oui, comme vient de le dire Merkel, le fait d'utiliser une liste ordonnée <ol> ou une liste désordonnée <ul> peut affecter la manière avec laquelle le document va être lu. En revanche le type de numérotation d'un <ol> n'a qu'un aspect purement esthétique. Je cherche donc toujours à ne pas coder en dur le numéro dans mon <h*>.

Merkel, on peut effectivement utiliser les class, mais ça devient très redondant : soit on utilise les class pour le titre, soit on utiliser les class pour les <_l> normaux... dans les deux cas c'est pas parfaitement propre (et je suis un perfectionniste )

L'utilisation des class pour un cas comme celui-la ne me semble pas si impropre. Aurais-tu un exemple concret d'une liste telle que tu la veux? Si la hiérarchie est toujours semblable (titres versus éléments normaux), on peut peut-être y arriver sans utiliser des class.

Donc, donne-nous un exemple exacte en (x)HTML de ta liste pour nous permettre de trouver la meilleure façon d'en faire la mise en forme. Utilise la solution des ol et li pour ton exemple.

Merci

Ouais d'accord, mais sémantiquement, si tu utilise seulement une liste ol pour ajouter une numérotation à tes titres, je ne crois pas que ca soit correct, surtout si dans ta liste ol, tu ajoute des paragraphes, des images, d'autres listes etc...

L'impression que j'ai, c'est que tu veux diviser ta page en sections et sous-sections en utilisant les hn, et tu veux seulement pouvoir leur mettre facilement une numérotation. La liste ol n'a rien à voir sémantiquement dans ton cas. Elle a été conçu pour faire l'énumération ordonnée d'éléments, et non pas séparer différentes parties d'un document. Cette solution me paraissait bien au départ car je croyais que tu voulais seulement énumérer des titres de chapitre.

Bref, j'écrirais les numérotations en brutes dans le document html. Sinon, tu peux toujours bricoler un truc en javascript qui ajouterais les numérotations aux titres mais ce, uniquement si la numérotation des titres n'est pas très importante pour la personne ou le robot consultant le document !