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. |