Lists come in three forms:
There are three list style properties that control the list item labels (bullets / alphanumeric characters).
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:
NOTE: Because we are using more than one bullet list in this tutorial, specific class has been create for each example to avoid confusion and rules conflicts.
IMPORTANT NOTE: Even though we will be naming our classes to target <l1> element, we will actually applied the rules to the <ul> tags so that they can "cascade" automatically to the <li> elements. This way, we don't have to applied the rule individually the each <li> element.
OUTSIDE:
CSS rule in <style> element: .outside li { list-style: url(arrow.gif) outside; }
Code View:
<ul class="outside">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Design View:
INSIDE:
CSS rule in <style> element: .inside li { list-style: url(arrow.gif) inside; }
NOTE:
Notice the subtle indention in the list below
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;}
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 in <style> element: custom_li li { background: url(custombullet.gif) no-repeat 0 50%;
padding-left:30px;}
CODE VIEW:
<ul class="custom_li" >
<li>HOME</li>
<li>PRODUCTS</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
DESIGN VIEW:
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%).
INCORRECT WAY IF YOU HAVE TWO OR MORE LINES: (Notice the second bullet)
CORRECT WAY: (Notice we also included a padding-bottom to add space between the list items)
CSS in <style> element:
.correct li {
background: url(images/ArrowRight.gif) no-repeat 10px top;
padding-left:30px;
list-style: none;
}
CODE VIEW:
<ul>
<li class="correct_li">HOME</li>
<li class="correct_li">PRODUCTS - 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%).</li>
<li class="correct_li">SERVICES</li>
<li class="correct_li">CONTACT US</li>
</ul>
DESIGN VIEW: