CSS – Make your list different

CSS - Cascading Style SheetsIf you have a look at my sidebar, you see that my menu options have little dots (or images) to the left. Thanks to CSS, Cascading Style Sheets, you have many options to style your list, ranging from no style to one of the many default styles. You are even able to use an image of your choice!

So how do you edit and style your list?

Of course you are able to use almost any of the available CSS properties, like borders, background, font and so on.

A list without icons

Let’s assume you want to use the list to create a menu, but you don’t want to have the default list icons added by the browser, because it would break with the design. How do you remove the icons? With a tiny bit of CSS of course:

ul, ol {
list-style:none;
}

This code will remove any list style, leaving you a list without the list icons. It works for both types of lists, order and unordered. If you prefer using in-line editing, just add a style="list-style:none;" to the „ul“ or „ol“ tag and you are set.

A list with one of the default icons

Now let’s have a look at how we can use one of the many default icons. Please keep in mind that some of those icons are show different in different browsers. I recommend testing them before you use them.

Before we can set an icon, we need to know which icons exist. I took the time and compiled you a list:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • lower-greek
  • lower-latin
  • upper-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha

And before you start yelling at me „How does those icons look like“ just have a look at my example and try them all.

To add one of the icons you can use this code:

ul, ol {
list-style-type:liststyle;
}

Replace the liststyle with the name of the icon you want to use. Of course you can also use the in-line style style="list-style-type:liststyle".

Easy so far, isn’t it?

A list with an icon/image of your choice

Now let’s go a step further. I believe you can imagine that the default icons limit you in your design efforts. Fortunately CSS enables you to use an own image by using the code:

list-style-image:url(path-to-image);

Replace the path-to-image with the url to your image. For the image I use in my example the path would be:
http://www.ruelicke.net/wp-content/themes/ruelicke/images/feed-icon.png

You can use any kind of image, but depending on it’s size you need to play with the padding and font size to make it fit with the list.

Wrap up

Congratulation, you are now able to adjust the list style icon to your needs. You no longer need to use the default icon.

If you like it fancy, you could style the list as I did although I would never use that design. Of course I would never use that one on a site, but I think it is always good to play around with the CSS to get an idea about how it works.

Any questions left?

4 Gedanken zu „CSS – Make your list different

  1. Nice tutorial :), although one little comment though. It isn’t recommended to turn list style off from an ordered list, just use an unordered list if you don’t want to show anything whilst you keep your ordered list free for anything you want to have counting up.

    On a side note: The sidebar bottom border doesn’t align completely to the right, not sure if you did this intentionally but if not you probably placed a margin-right rather than padding-right :).

  2. You are right, I should have mentioned the ordered/unordered list show/not show part, but I think, those who worry about styling their lists, do know where you are supposed to use an ordered/unordered list, thus they will show/hide the icons as it applies.

    The border is intended, I can’t explain why I decided to use that, but I think it looks nice 🙂 However, I have a minor bug with the sidebar. If I have a very short page/article (like the Search page) the parts of the sidebar which are below the end of the page/article’s content move a bit to the left and I have no idea why 🙁

  3. Currently don’t have the time to go through your CSS but I think it’s just a little problem with paddings or margins by the looks of it, does the sidebar like float right of a content layer? Does the content layer have an entry layer within it which is bigger than the content layer and therefor pushing the menu towards the right?

    Those are some little things you could check for.

Schreibe einen Kommentar