LIST TYPES
Lists come in three forms:
- Ordered — In the print world, it is called a number list
- Unordered — In the print world, it is called a bullet list
- Definition — In the print world, there is no equivalent
STYLING LISTS WITH LIST-STYLE IMAGE PROPERTY
While you can use the list-style-image property to add an image to a list instead of the boring list styles [disc, circle (used above), square, etc.], you only have control over the outside or inside positionings of the bullets or numbers:
Outside: li { list-style: url(custombullet.gif)outside; } See list above
Inside: li { list-style: url(custombullet.gif) inside; } Notice the subtle indention in the list below
- Ordered
- Unordered
- Definition
NOTE: Because some browsers use left margin and others use left padding to control list indention, it is best practice to zero out the padding and margin on the list parent container (the <ul> or <ol> tag) and set the list-style-type to none. Then later, as we will see, you can add padding back to the children containers (the <li> tags) instead.
ul{margin:0; padding:0; list-style-type:none;}
STYLING LISTS WITH BACKGROUND PROPERTY
Instead of using the list-style-image property, it is best practice to use the background property so that you can have finer control over the image positioning.
li {background: url(custombullet.gif) no-repeat 0 50%; padding-left:30px;}
NOTE: You can use relative (i.e., percentage) or absolute (i.e., px) units of measurement to position the image and add a left padding to your liking.
EXAMPLE:
CSS: li {background: url(custombullet.gif) no-repeat 0 50%; padding-left:30px;}
CODE VIEW:
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
DESIGN VIEW:
- HOME
- PRODUCTS
- SERVICES
- CONTACT US
NOTE: If your list items have the potential of expanding multiple lines, position the image at or near the top of the list item. Otherwise, if the list items will be single line items, you can vertically center the image by using either a keyword (middle) or a relative value (50%).
SHOW EXAMPLE HERE....