[Article] Créer des listes ordonnées attrayantes en CSS

**Bovino** · 26/04/2011, 19h24

Je vous propose la traduction de l'article anglophone Sexy Ordered Lists with CSS, pas Soh Tanaka : Créer des listes ordonnées attrayantes en CSS.

Cet article vous montre comment personnalise des listes ordonnées et les rendre attrayantes avec un peu de style et si besoin, une petite touche de jQuery.

N'hésitez pas à poster vos remarques, commentaires voire vos propres solutions allant dans le même sens.

Créer des listes ordonnées attrayantes en CSS

**danielhagnoul** · 28/04/2011, 22h14

Bonsoir

J'aime bien !

À toutes fins utiles, voici le code d'une variante, testée sur C10, F4 et IE9.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body {background-color:#dcdcdc; color:#000000; font-family:serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; font-size:1.1em; line-height:1.4em; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; font-size:1.1em; line-height:1.4em; }
        li {padding-bottom:6px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		article {display:table-cell; }
		article:nth-of-type(1) {width:450px; }
		article:nth-of-type(2) {width:550px; }
		article:nth-of-type(3) {width:500px; }
 
		/* ol */
		ol.steps {list-style-type:decimal; margin:6px; padding-left:34px; border:1px dotted grey; font-weight:bold; color:#fff; background:#111; }
		ol.steps li {padding-right:9px; color:#cbff78; background: #111; }
		ol.steps li h4 {padding:6px; background:#222; }
		ol.steps li p {font-weight:normal; color:#fff; background:#222; word-wrap:break-word; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<article>
			<ol class="steps">
				<li>
					<h4>Quisque mattis</h4>
					<p>Quisque mattis, nisi at venenatis scelerisque, lectus tortor rutrum quam, at venenatis orci dui rhoncus massa. Nullam imperdiet, eros non auctor ornare, nisi lacus dictum mauris, ut pretium tellus mauris id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus, velit vel tristique faucibus, libero quam rutrum nibh, eget scelerisque urna odio vel sem. Mauris in enim.</p>
				</li>
				<li>
					<h4>Suspendisse et nibh</h4>
					<p>Suspendisse et nibh at sem scelerisque malesuada. Morbi nec turpis. Fusce ac ligula in risus ornare imperdiet. In hac habitasse platea dictumst. Integer lacinia eleifend dolor. Quisque sit amet mi vel lacus pulvinar condimentum. Duis tempor dignissim augue. Aenean vitae metus id nisl venenatis varius. Nulla sodales interdum nibh. Phasellus aliquam lorem vitae libero. In non nunc id arcu pellentesque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec lorem sed mauris adipiscing eleifend. Morbi vitae felis. Curabitur egestas convallis elit. Suspendisse scelerisque aliquam leo. Maecenas mi.</p>
				</li>
				<li>
					<h4>Etiam at augue</h4>
					<p>Etiam at augue. Cras ac lorem. Vestibulum tempus est sit amet urna. In auctor libero. Sed hendrerit, augue et mollis bibendum, elit eros fringilla erat, at tempor risus dolor a tellus. Vivamus id odio eu risus pharetra rutrum. Ut id felis. Ut porttitor aliquet ante. Aenean nibh est, accumsan eu, sollicitudin in, vulputate a, ipsum. Duis vitae tellus a neque tempus tristique. Suspendisse vel felis ullamcorper nunc dignissim dictum.</p>
				</li>
			</ol>
		</article>
		<article>
			<ol class="steps">
				<li>
					<h4>Praesent egestas</h4>
					<p>Praesent egestas, ante sed sagittis fermentum, ligula nulla viverra tortor, at lacinia massa felis quis arcu. Mauris malesuada neque. Maecenas sed justo. Aliquam dui libero, consectetur at, iaculis eu, aliquam vitae, eros. Nullam lorem felis, iaculis eget, tincidunt eget, mollis ac, arcu. In pellentesque mauris eget quam. In non magna. Maecenas vulputate eleifend purus. Sed imperdiet malesuada augue. Sed dolor purus, faucibus non, elementum feugiat, condimentum et, elit. Vestibulum vitae felis.</p>
				</li>
				<li>
					<h4>Sed porta</h4>
					<p>Sed porta. Sed non magna. Suspendisse ullamcorper pretium enim. Fusce iaculis vulputate lacus. Nulla facilisi. Etiam tincidunt dui ut erat. Donec non est. Maecenas sagittis, sem vitae dictum hendrerit, mi tellus ornare dolor, in euismod sapien diam a ante. Donec ullamcorper mollis lacus. Morbi sed arcu. Curabitur nec purus. Proin ut mauris. Quisque orci. Phasellus enim felis, faucibus in, placerat et, sagittis id, tellus. In eu sapien.</p>
				</li>
				<li>
					<h4>Ut sagittis</h4>
					<p>Ut sagittis lobortis dolor. Sed aliquam velit. Nulla ultrices, nisi ut ultrices ullamcorper, arcu erat auctor ante, a malesuada elit enim vel neque. Cras imperdiet lacus non lectus. Nulla sodales, diam id fermentum pellentesque, dolor urna interdum quam, et lacinia turpis dui vitae diam. Integer ut mauris. Nam ligula. Morbi lobortis, lectus ut dictum elementum, justo tortor rutrum erat, nec fringilla eros nisi in nisl. Sed quis quam a est accumsan congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempor. Integer vestibulum, justo vel suscipit lacinia, erat urna aliquet nulla, ac malesuada nunc neque vitae dolor. Ut vel nisi. Vivamus urna ligula, molestie scelerisque, congue quis, venenatis non, urna. Praesent mi ipsum, vulputate ac, pharetra eu, interdum eu, urna. Nullam felis nunc, aliquet a, eleifend a, mollis id, nunc. Phasellus sodales. Aliquam consectetur leo non odio.</p>
				</li>
			</ol>
		</article>
		<article>
			<ol class="steps">
				<li>
					<h4>Vivamus eu ante</h4>
					<p>Vivamus eu ante. Morbi tristique augue quis magna. Nullam tristique lorem id neque. Nam nibh elit, lobortis ac, euismod eu, feugiat id, diam. Etiam dui est, fringilla eget, dictum faucibus, ultrices ut, massa. Duis tempor. In eu elit quis urna eleifend ultrices. In sollicitudin. Phasellus laoreet. Sed aliquet diam vel nibh. In aliquet pharetra mi. Ut et sem. Phasellus ultrices libero sit amet ipsum.</p>
				</li>
				<li>
					<h4>Pellentesque quam</h4>
					<p>Pellentesque quam. Morbi ornare. Sed sodales laoreet felis. Maecenas adipiscing fermentum lorem. Aenean sed odio et nisl cursus dignissim. Pellentesque laoreet lacus a tortor. Vivamus sem risus, venenatis non, pretium a, tincidunt et, sem. Ut tincidunt velit cursus lorem. Aliquam fringilla mauris. Nunc sit amet diam. Fusce ullamcorper. Aliquam tempor, erat volutpat convallis tristique, ligula sapien pellentesque neque, vitae vulputate velit augue sodales ante. Mauris dapibus. Donec laoreet turpis eu dolor. Nam at sem quis justo vehicula venenatis. Phasellus tincidunt vestibulum ipsum.</p>
				</li>
				<li>
					<h4>Donec in ligula</h4>
					<p>Donec in ligula. Cras semper. Fusce semper. Phasellus sit amet tortor id sapien aliquam vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt elementum turpis. Suspendisse ac ligula. In vitae nisi. Praesent non lacus et mi ornare tempus. Phasellus faucibus volutpat nisi. Aliquam vel lorem eget nisl malesuada ultrices. Vivamus orci augue, scelerisque in, ornare nec, tempus commodo, diam. Nam a augue in risus pellentesque auctor. Nulla adipiscing mauris in justo. Sed eu diam. Vestibulum elementum, eros non porta tristique, velit ipsum euismod enim, quis tempus elit felis in ipsum. Etiam facilisis ante id tellus. Nulla facilisi. Pellentesque sem.</p>
				</li>
			</ol>
		</article>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-04-28T22:10:00.000+02:00" pubdate>2011-04-28</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
</body>  
</html>

**Bovino** · 28/04/2011, 22h28

Intéressant

Résultat visible ici : http://sohtanaka.developpez.com/tuto...rs/daniel.html

[Article] Créer des listes ordonnées attrayantes en CSS

CSS

Discussions similaires

Partager

Partager