LIST PLAYGROUND 3

by Florence W Deems

EXAMPLES: DEFINITION LISTS

Definition Lists normally do not have any symbols or numerals in front of each list item. But if we make a small (50x50 pixel) image, then we can use this in front of each of the <dd> items, as seen below:

List Item One
List Item Two
List Item Three
List Item Four

The above Definition List with small images is from Krishna Eydat



Here's a definition list using an image that I made:

I created this image using Photoshop CS3. I also made the size much larger than it appears here.
To get the colors transparent, I used an opacity of 50%. But this effect of colors changing as they cross each other doesn't show very well in this very small size.
As you can see, in a definition list, the little image doesn't stick out in front of the body of the text for each list item, like it does for the ordered and unordered lists.
If we don't like this effect, then we use either fewer words, or try this using one of the other list types.



Definition List with
Embedded Unordered List

This sentence is the start of a definition list. Read on to find out what I have done with this list.
  • Now I'm using an unordered list embedded within each <dd>
  • This is the 2nd <li> within the unordered list, but still as part of the 2nd <dd> of the definition list.
This is now the 3rd <dd> in the definition list. The <dd> list items do not have an image in front of them, but only the list items in the unordered lists.
  • And now this is the first <li> of the embedded unordered list in this 4th <dd> of the definition list.
  • Here's the 2nd <li> of the unordered list
I'm ending the definition list with this final (5th) <dd> so there's no image, as the unordered list has been closed.

I really don't care for the appearance of this mixture of lists. But it was fun to play with. I did, however, discover how to get rid of that annoying bullet (circle or square) in the Unordered List. Please click on the link to the 4th page below.



To List Playground 1 ~ 2 ~ 3 ~ 4

Lists Glossary ~ Unordered Lists ~ Definition Lists



Visit these other Tutorials by Flo

Saturday 20th of October 2018 03:30:24 PM



by Tone By Tone Dot Net

~~~

Tandem Tooters

Arbor Hosting