Greased Issues

Issue #15.1A November 6th, 2015 Volume 1
 

Azure
Edition

Greased: The Nerd Bacon Newsletter (Logo)


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:


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:

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