Issue #15.1A | November 6th, 2015 | Volume 1 |
Edition
Greased 1.15.1A - Quick Reference
November 6th, 2015
For those of you who wish to play around with these lists but don't wish to wade through my verbosity in the original guide, this is intended to be a quick at-a-glance reference for what tags to use and when. This is only going to be a quick "this tag does that" listing. If you need more of an explanation, refer back to the original guide. If you're still stuck, all you got to do is ask and I'll be happy to help.
This will not be covering a majority of the material presented in the advanced section or the tables piece. There is just way too much information, both necessary and incidental, included in those documents for a guide. Plus I'm not trying to build a complete HTML/CSS reference as there are already plenty of great ones out there. This is just here to tell you what does what when it comes to the basics of list making and manipulation.
Ordered Lists
<ol>
HTML tag. Opens (begins) an ordered (numbered/lettered) list.
</ol>
HTML tag. Closes (ends) an ordered (numbered/lettered) list.
<li>
HTML tag. Indicates a discrete item/entry on the list. Closing tag (</li>
) must be used after content and before adding another item. Only used within ol
or ul
tags.
value
ex: <li value="14">
HTML attribute (with value). Used within li
to set a specific value for the item. By default, ordered lists start at "1" and ascend. Items following an item with a value will continue in ascending order. Can be combined with reversed
, start
, and list-style-type
.
reversed
ex: <ol reversed>
HTML attribute. Used within ol
tag to denote that the list should advance in descending order. Can be combined with value
, start
, and list-style-type
.
start
ex: <ol start="37">
HTML attribute (with value). Used within ol
to set a starting value for the list. Can be combined with value
, reversed
, and list-style-type
.
list-style-type
ex: <ol style="list-style-type: χ">
Inline CSS. Used within ol
to specify the numbering scheme for an ordered list. Default value is decimal
(regular numbers). Can be combined with value
, reversed
, and start
.
Values include:
upper-alpha
as in<ol style="list-style-type: upper-alpha;">
for uppercase letters (A, B, C, D, E)lower-alpha
for lowercase letters (a, b, c, d, e)upper-roman
for uppercase Roman numerals (I, II, III, IV, V)lower-roman
for lowercase Roman numerals (i, ii, iii, iv, v)lower-greek
for lowercase Greek letters (α, β, γ, δ, ε)decimal-leading-zero
for numbers with leading zero (up to 10) (01, 02, 03, 04, 05)decimal
for numbers (this will be the default setting) (1, 2, 3, 4, 5)
Unordered Lists
<ul>
HTML tag. Opens (begins) an unordered (bulleted) list.
</ul>
HTML tag. Closes (ends) an unordered (bulleted) list.
<li>
HTML tag. Indicates a discrete item/entry on the list. Closing tag (</li>
) must be used after content and before adding another item. Only used within ol
or ul
tags.
list-style-type
ex: <ul style="list-style-type: χ">
Inline CSS. Used within ul
to specify type of bullet or no bullets at all. Default for most browsers is disc
.
Values include:
none
as in<ul style="list-style-type: none;">
for no bulletsdisc
for small, solid circlescircle
for small, open circlessquare
for small, solid squares
list-style-image
ex: <ul style="list-style-image: url('χ')">
Inline CSS. Used to replace bullets with images. The URL of the image is put in place of χ.
That should cover everything in the basic guide. If you have any questions about some of the more advanced stuff, I would first encourage you to play around with it some yourself and if you're still having trouble, let me know exactly a) what you're trying to do, b) how you're trying to do it, and c) what's going wrong. Have fun with it and don't forget to check out the other supplemental sections: Advanced Lists: Horizontal Meus, Advanced Styling Explained, Doing It with Tables, and Menu Variations.
NerdBerry NerdBerry@NerdBacon.com |
The Cubist TheCubist@NerdBacon.com |
Doc Croc DocCroc@NerdBacon.com |
Issue #15.1A | November 6th, 2015 | Volume 1 |