28173 sujets

CSS et mise en forme, CSS3

<ol> liste ordonnée

Bonjour,

ma question est simple : est-il possible de faire le résultat suivant en imbriquant les balises ol et li

1.
1.1
1.2
1.3
1.4
2.
2.1
2.2
...

j'en doute car je n'ai vu que des solutions avec mélange de chiffres et lettres ou chiffres romains Smiley decu
Je ne précise pas que j'aimerais éviter de numéroter "en dur" dans le code...
Modifié par Noisequik (08 Jan 2008 - 11:38)
Tiens, 2e sujet où je débarque avec mes compteurs en quelques jours, fait rarissime! Smiley ravi
Plus sérieusement, la solution suivante est fiable mais malheureusement, Internet Explorer n'implémente toujours pas les contenus générés par pseudos-classes. Tu peux néanmoins adresser un script correctif pour ce dernier via commentaires conditionnels.

[#black][b]XHTML[/b][/#]

<ol>
	<li>Élément de liste
		<ol>
			<li>Élément de liste</li>
			<li>Élément de liste</li>
			<li>Élément de liste</li>
		</ol>
	</li>
	<li>Élément de liste
		<ol>
			<li>Élément de liste</li>
			<li>Élément de liste</li>
			<li>Élément de liste</li>
		</ol>
	</li>
</ol>



[#black][b]CSS[/b][/#]

ol {counter-reset:listItem;}
li:before {content:counters(listItem, "."); counter-increment:listItem; margin-right:8px;}
li { display:block;}
ahhh excellent, je ne connaissais pas du tout ceci !!

Il faut que je me penche un peu plus sur ces compteurs !!!
Noisequik a écrit :
ahhh excellent, je ne connaissais pas du tout ceci !!
Hé bien voilà, on en apprend tous les jours… Smiley ravi

Noisequik a écrit :
Il faut que je me penche un peu plus sur ces compteurs !!!
Oui enfin en même temps, à part des cas précis comme celui-ci, ils ne servent pas souvent nos braves compteurs… Mais si ça t'intéresse, pourquoi pas! Smiley cligne
hello, je viens de constater qu'il ne faut pas mettre cette règle dans la feuille principale, car IE ne lira pas les règles qui suivent ??!

Il faut donc que je la place dans un autre fichier externe qui ne sera appelé que par commentaires conditionnel...
Noisequik a écrit :
hello, je viens de constater qu'il ne faut pas mettre cette règle dans la feuille principale, car IE ne lira pas les règles qui suivent ??!

Tu es sûr de ne pas avoir fait d'erreur de syntaxe? Tu as validé ta feuille de styles?
Florent V. a écrit :

Tu es sûr de ne pas avoir fait d'erreur de syntaxe? Tu as validé ta feuille de styles?


oui, j'ai fait un copier-coller de Benjamin D.C. et j'ai validé la feuille Smiley confus

c'est apparement ce passage qui pose problème :

	content: counters(listItem, ".");

Modifié par Noisequik (08 Jan 2008 - 13:34)
Ben IE ne comprend ni :before, ni la propriété content, donc c'est l'ensemble des déclarations pour ce sélecteur qui ne seront pas prises en compte.

La seule chose qui sera prise en compte par IE dans le code CSS proposé par Benjamin, c'est ceci: 
li {display:block;}


Et les règles suivantes dans ta feuille de style devraient être prises en compte également.
- 1

Essaie le code suivant sous Firefox puis IE(7)




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
ol li:before
{
	content: counters(listItem, ".");
}
body
{
	background-color:#000;
}
-->
</style>
</head>
<body>
</body>
</html>
Au passage, counter-reset ne fonctionne pas correctement sur FF2 et Safari3 (surement sur IE7 aussi) et ne fonctionne bien que sous Konqueror (comme toujours, comme quoi webkit est un fork pourrave) et Opera.

Donc numéroter une liste ordonnée, ok (il n'y a qu'un compteur), mais pas des titres (compteurs multiples).
Réduire quoi ? content: counters(listItem, "."); ?

Si c'est bien ça, on peut utiliser une autre syntaxe :

content: counter(listItem) ".";


Mais qui oblige à créer des compteurs supplémentaires.

D'ailleurs, suite à mon message précédent, j'ai trouvé le moyen de numéroter correctement des titres sous FF et Safari (les exemples donnés dans la spec de CSS2 ne fonctionnent pas) : en fait, le counter-reset ne doit pas se trouver dans la pseudo-classe.
talvins a écrit :
Si c'est bien ça, on peut utiliser une autre syntaxe :

On peut aussi utiliser la même syntaxe, mais sans l'espace central:
content: counters(listItem, ".");
(J'ai fait une page de test qui détaille ça, ça peut être utile de la lire. Smiley cligne )

talvins a écrit :
En fait, le counter-reset ne doit pas se trouver dans la pseudo-classe.

Je crois que je me souviens d'un truc comme ça, effectivement.
Sujet clos
Aller à