Vince Cutting Sharing web design and development ideas

  • Fancy Unordered Lists (bullet points) using CSS

    13
    scissors
    March 20th, 2009Vince Cuttingcss, HTML

    Have you ever wanted to add fancy bullet points to your unordered lists in your(x)HTML but never knew how? The truth is, it’s actually really easy to achieve. All you need to do is add a CSS class to your unordered list and then use your CSS to add your chosen image as the bullet points. In this post I’ll walk you through this step by step. First lets take a quick look at the list we’re going to be creating:

    • This is the first list item
    • This is the second list item
    • and this is the third list item

    Step 1: Create your unordered list, ensuring you use a classname for the ul.

    OK the first step is to create your unordered list as normal, and to specify a classname on the ul element. In this example i am using a class name of “tick-list” as I’ll be using a tick image for my bullet point. The HTML code should look something like this:-

    1. <ul class="list-tick">
    2.   <li>This is the first list item</li>
    3.   <li>This is the second list item</li>
    4.   <li>and this is the third list item</li>
    5. </ul>

    Step 2: Add the CSS to specify your image to be used as a bullet point

    With our HTML list in place we now need to use our CSS to control how it will look. The following CSS will remove the default margin and padding for both the ul and li elements, remove the standard unordered list bullet points, indent the list items using some padding on the left, and finally place your chosen image as a background in the padded are at the left of the list item. Your CSS for this particular list should look something like this:-

    1. ul.list-tick {
    2.   margin: 0;
    3.   padding: 0;
    4. }
    5. ul.list-tick li {
    6.   margin: 0;
    7.   padding: 2px 0 2px 16px;
    8.   list-style: none;
    9.   background: url('../images/list_icons/tick1.jpg') no-repeat top left;
    10. }

    Step 3: Dont forget to add your bullet/tick image to your server where your CSS can find it.

    Of course the above HTML and CSS will not work without the image you want to use actually being available, so make sure you have them available on your server where your CSS can find them – you’ll also want to make sure that your image(s) are scaled down appropriately prior to using them, I have scaled down my bullet images to 12px x 12px so they should fit nicely beside standard sized text.

    Step 4: View your fancy new list

    OK, with the first 3 steps now completed, you should be ready to view you fancy new unordered list with customized bullet points, like so:

    • This is the first list item
    • This is the second list item
    • and this is the third list item

    Step 5: Experiment with different images

    You can add as many different customised list classes and images as you like to your website. Below are a few more examples:-
    List with a ‘list-pin1′ CSS class

    • This is the first list item
    • This is the second list item
    • and this is the third list item

    Another list with a ‘list-pin2′ CSS class

    • This is the first list item
    • This is the second list item
    • and this is the third list item

    List with a ‘list-cross’ CSS class

    • This is the first list item
    • This is the second list item
    • and this is the third list item

    List with a ‘list-note’ CSS class

    • This is the first list item
    • This is the second list item
    • and this is the third list item

    List with a ‘list-mark’ CSS class

    • This is the first list item
    • This is the second list item
    • and this is the third list item

    So, use your imagination, you can add bigger images if you’d like, you’ll probabally need uo use bigger li text though or more padding. Let me know if you come up with any stunning lists of your own.

    Tags: , , ,
 

13 responses to “Fancy Unordered Lists (bullet points) using CSS” RSS icon


Leave a reply


Archives

Categories

Designed by AZ Money

Powered by WordPress