Informatique


Les listes

Aller à

Le style des puces

Il s'agit de choisir le type de puces, voici les différentes possibilités

disc disque plein, valeur par défaut
armenian nombres en écriture arménienne
circle cercle
cjk-ideographic nombres idéographiques
decimal nombres décimaux
decimal-leading-zeronombres décimaux avec zéro en première position
georgian nombres en écriture géorgienne
hebrew nombres hébreux
hiragana nombres hiragana
hiragana-iroha nombres hiragana-iroha
katakana nombres katakana
katakana-iroha nombres katakana-iroha
lower-alpha lettres minuscules
lower-greek mettres minuscules grecques
lower-latin idem mower-alpha
lower-roman idem mower-alpha
none pas de puce
square carré
upper-alpha lettres majuscules
upper-latin lettres majuscules
upper-roman lettres majuscules
inherit puces héritées de son parent direct

Démo
	<style>
		.maliste	{
			list-style-type:upper-roman;
		}
	</style>
	</head>
	<body>
		<h2>Un exemple, trois apôtres bien connus</h2>
			<ul class="maliste">
				<li>Pierre</li>
				<li>André</li>
				<li>Jacques</li>
			</ul>
	</body>

Utiliser une image comme puce

Il s'agit de choisir une image comme puce.

Démo
	<style>
			.maliste	{
				list-style-image:url(../../image/trex4_pt.jpg);
			}
	</style>
	</head>
	<body>
		<h2>Un exemple, trois apôtres bien connus</h2>
			<ul class="maliste">
				<li>Pierre</li>
				<li>André</li>
				<li>Jacques</li>
			</ul>
	</body>

Position des puces

Deux valeurs possibles: outside (la valeur par défaut) et inside (provoque u retrait à gauche)

Démo
	<style>
		.maliste	{
			list-style-image:url(../../image/trex4_pt.jpg);
			list-style-position: inside;
		}
	</style>
	</head>
	<body>
		<h2>Un exemple, trois apôtres bien connus</h2>
			<ul class="maliste">
				<li>Pierre</li>
				<li>André</li>
				<li>Jacques</li>
			</ul>
	</body>

Regroupement des propriétés

Il faut préciser dans l'ordre:list-style-type, list-style-position, list-style-image.

Comme d'habitude, si une propriété est absente, la valeur par défaut est appliquée.

Si toutes les propriétés sont présentes, la première propriété sera appliquée si on ne trouve pas l'image précisée dans la troisième propriété.

Démo
	<style>
		.maliste	{
		list-style:decimal inside url(../../image/trex4_pt.jpg);
		}
	</style>
	</head>
	<body>
		<h2>Un exemple, trois apôtres bien connus</h2>
			<ul class="maliste">
				<li>Pierre</li>
				<li>André</li>
				<li>Jacques</li>
			</ul>
	</body>