LIST PLAYGROUND

by Florence W Deems

EXAMPLES: UNORDERED LISTS

  • The color of the text of this first List Item is red.
  • This 2nd List Item is blue
  • I have put the font color tags blue and green AFTER each <li> and then closed the font tag.
  • It doesn't seem to matter whether the closing font tag is BEFORE or AFTER the </li>.
  • Note that only the red List Item above and this orange List Item have colored squares. This is because the font color tag is placed BEFORE the <li>. The other font color tags are placed AFTER the <li>. Color doesn't show in squares when the color tag is placed AFTER the <li>.



What I wanted in this next Unordered List was a large square followed by normal sized text. That isn't possible. We must have the first letter of the List Item in the large size, too, or the square color defaults to the page text color. Also the smaller size text won't be colored. I used the old font tags instead of the span tags for the text sizes and colors.

If we cancel the font color right after the <li> then the color is voided for all the text in the List Item. So I put both the size and color before the <li> tag. Then after the first capital letter, I put in another size tag.

Strangely, it's necessary to use a separate closing font size and a separate closing color tag after each List Item, even if we have combined the size and color in a single font tag. If we don't close the font tags, then the last one in the last list item will affect the next paragraph of plain text that is not within a List, even though we have closed the whole list! Perhaps if I had used span tags instead of font tags, this would not be necessary.

This size and color effect ought to work for the default bullet lists as well as the circle type Unordered Lists. It also works with Ordered Lists.

  • The color of this first item is red.
  • Comments:
  • Line spacing controlled by lg font size.
  • See textarea box correct tag order.



Next up is an experimental page I made using text in a Definition List, with an embedded Unordered List with images instead of text. Some funny things happened with this page, too.



To List Playground 1 ~ 2 ~ 3 ~ 4

Lists Glossary ~ Unordered Lists ~ Definition Lists



Visit these other Tutorials by Flo

Monday 26th of June 2017 09:52:57 AM



by Tone By Tone Dot Net

~~~

Tandem Tooters

Arbor Hosting