Recently the HTML

&
• tags have been revived, they are no longer just used for lists but for menu’s too. Its with this that I am going to try and bring back their original purpose and show you how you can funk them up a little, firstly lets have a look at how they are used;

  Using Lists

  * List Item 1

  * List Item 2

  * List Item 3

  This renders as this;

  * List Item 1
  * List Item 2
  * List Item 3

  Boring right, but with a little css we can make them look more interesting, firstly lets remove the those boring bullets;

  ul {
  list-style:none;
  }

  List Item 1
  List Item 2
  List Item 3

  Next we will remove the indent;

  ul {
  list-style:none;
  list-style-position:inside;
  }

  List Item 1
  List Item 2
  List Item 3
  Adding some Style!

  Looking better already right, well ok maybe not quite yet, so lets add a more interesting bullet. For this I’m going to use a beautiful tick icon from the Sweetie Icon Set created by Joseph North

  Now there are 2 ways in which we can add this as a bullet firstly we can reference the image to be the new bullet;

  ul {
  list-style:none;
  list-style-image:url(*/directory of your images*/);
  list-style-position:inside;
  }

  list_example

  There you go much better right?
  Restricting the Lists

  OK so we have established that we can now add some interesting bullets to our lists, but what if we want to restrict the width of the list items, we may want to have 2 lists side by side, or in a column. Lets take a look;

  ul {
  list-style:none;
  list-style-image:url(*/directory of your images*/);
  list-style-position:inside;
  width:200px;
  }

  list_example

  Hey! No problem right? This works well because our list items are very short, lets make them a little longer shall we

  * List Item 1 but a little longer than before

  * List Item 2

  * List Item 3

  list_example_long

  There are a number of ways we can combat this, the easiest would be to put a text-indent rule on the

  item, however problems arise if the user decides to resize the text. So instead we are going to look at styling the
  • element, lets remove the list-style-image: rule and add some rules for the
  • element;

    ul {
    list-style:none;
    list-style-position:inside;
    width:200px;
    }

    li {
    background-image:url(images/16-em-check.png);
    background-repeat:no-repeat;
    padding-left:20px; */At least the width of the image*/
    }

    list_example_long_li1

    There you have it, now you can make your list items as long as you want to and they stay nice and aligned!