- Item one
- Item two
- Item three… etc.
OK for those of you who got an email about this… My apologies this is a CSS technique page one of many I’ve posted but normally do not display. Apparently I hit the publish page when I started it and my subscriber software took it upon itself to send out a notice to everyone…. Anyway mea culpa. I normally would not publish anything this dry but if your interested this is a basic tutorial about ordered lists in CSS, I’ll be updating this page with descriptions of how to use images and custom text next. So stay tuned to the thrilling conclusion…
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ol>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ul>
These two basic styles of lists can be further customized as follows:
For Unorderd List:
disc
Filled circle marker (●).
circle
Circle marker (○).
square
Square marker(■). [Example A]For Ordered List:
decimal
Decimal numbers, beginning with 1.
decimal-leading-zero
Decimal numbers padded by initial zeros (e.g., 01, 02, 03, …, 98, 99).
lower-roman
Lowercase roman numerals (i, ii, iii, iv, v, etc.).
upper-roman
Uppercase roman numerals (I, II, III, IV, V, etc.). [Example B]
lower-greek
Lowercase classical Greek alpha, beta, gamma, … (α, β, γ, …)
lower-latin
Lowercase ascii letters (a, b, c, … z).
upper-latin
Uppercase ascii letters (A, B, C, … Z).
armenian
Traditional uppercase Armenian numbering.
georgian
Traditional Georgian numbering (an, ban, gan, …, he, tan, in, in-an, …).
lower-alpha
Lowercase ascii letters (a, b, c, … z).
upper-alpha
Uppercase ascii letters (A, B, C, … Z).
none
Specifies no marker
inherit
Takes the same specified value as the property for the element’s parent.
You can use :
list-style-position:
- inside- Indents the marker and the text. The bullets appear inside the content flow
- outside- Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default
- inherit- List style is inherited from parent object
Or use standard positioning: e.g.
#sampleContent ol {
padding: 0 0 1em 1.75em; }
Require a bit more coding to effect the change say you want to use 1-, 2-, 3-,.. or 1) , 2) , 3) ,… to sequentially display your data this is the base code you would use.
#sampleContent ol {
counter-reset: item; /*sets a counter*/
padding: 0 0 1em 2em; /* good ol’ padding */
}
#sampleContent li {
display: block; /*makes the item display like a paragraph or heading */
}
#sampleContent li:before { /*note the before pseudo-class, pseudo-classes are cool…*/
display: inline-block; /* the item is displayed on the same line as a block level item */
content: counter(item) “) “; /*you set the counter to item above now your defining it as the counter with a “) ” after it */
counter-increment: item; /* now you increment it without this you just get zeros or whatever you initially defined*/
width: 1.5em; /* this specifies the width between the list item counter item and text*/
}
What you will get is something like this:
There are two ways to do custom graphic lists the easy way and the not so easy way. The easy way only requires one line of code (and a suitable graphic file) the hard way takes a bit more but offers better control over the images placement.
#sampleContent2 ul#listStyleImage {
padding: 0 0 1em 1em;
list-style-image: url(https://www.armandgilbert.com/wp-content/uploads/2013/04/ring.png); /* this is basically it folks… */
}
Which should give you something that looks like this:
/* background image rules */
ul#backgroundImage {
padding: 0 0 1em 0; /* notice no left padding on this one */
}ul#backgroundImage li {
list-style-type: none; /* this removes the unordered list image */
background-image: url(https://www.armandgilbert.com/wp-content/uploads/2013/04/ag-list-item.png); /*assigns a background image*/
background-position: bottom left; /*centers it left on the line */
background-repeat: no-repeat; /*its a background if you set it to repeat it would fill the space*/
padding: 0 0 0 2em; /* and this adjusts the positioning to your hearts content*/
}
What you get is something like this:
/* Main items */
#legalContent ol {
padding: 0 0 1em 1em;
counter-reset: item;
}
#legalContent li {
display: block;
margin-left: 1em;
}
#legalContent li:before {
display: inline-block;
content: counter(item) “) “;
counter-increment: item;
width: 1.5em;
margin-left: -2em;
}/* Sub items */
#legalContent ol ol { /*notice how this defines the subitem unordered list*/
padding: 0;
counter-reset: subitem;
}
#legalContent ol li ol li {/*this is really important to understand it defines the list element inside a list element… The list element inside that would be ol li ol li ol li (I kid you not!)*/
display: block;
margin-left: 1em;
}
#legalContent ol li ol li:before {
display: inline-block;
content: counter(item) “.” counter(subitem) “: “;
counter-increment: subitem;
width: 2em;
margin-left: -1.5em;
}