Styling Lists 101

This week I’ve been sharing some material I wrote as handouts for a CSS class at UNM Continuing Ed. Here’s the one about styling lists.

Styling Lists

Lists are probably the most useful element on the web. They make things easier to read and they are great for navigation.

Bullet/numeral styles

For list-style-type on an unordered list, the options are square, circle, disc and none.

For list-style-type on an ordered list, the options are lower-alpha, upper-alpha, lower-greek, upper-roman, lower-roman, none, and a few other language types besides English.

With list-style-image you can replace the bullet in an ordered list with an image.

li {list-style-image: url(bullet.gif);}

Position

You can set the list as inside or outside with list-style-position.

ul {list-style-position: inside;}

Lists for navigation

Here’s how to style a list that will display horizontally. First set the list-style-type to none to remove the bullets.

#nav ul {list-style-type: none;}

Next, make the list items display inline and float left. This will make the list items line up horizontally rather than going down the page vertically. You can also add background colors in this step. A little padding between the items is helpful so they don’t run together. You can also set a width here so the menu fits the width of your container.

#nav li {display: inline;
float: left;
padding: 2em;}

Finally make the link (a) elements display as block. You can also add borders, padding, colors and other styling in this step.

#nav ul li a {display: block;
text-decoration: none;}

See also: Selectors 101, Styling Text 101.

4 thoughts on “Styling Lists 101”

  1. Am trying to create drop down menus that are directly below their parent links in the navigation bar. Here is my coding. The problem seems to be the position absolute, but I don’t know how to effectively change it. Right now all the sub menus appear in the same place and cover the parent link.

    test page

    <meta name="generator" content="CoffeeCup HTML Editor (http://www.coffeecup.com)” />

    #nav {
    position: relative;
    margin-top: 0px;
    margin-bottom: 30px;
    margin-left: 30px;
    }

    #nav ul {
    list-style-type: none;
    clear: both;
    background-color: transparent;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 81em;
    }

    #nav ul li {
    display: inline;
    }

    #nav ul li a:link {
    float: left;
    width: 200px;
    color: #008000;
    padding: 3px;
    text-align: center;
    text-decoration: none;
    border-top: 1px solid black;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid black;
    background-color: #e9d5c9; /* #e1c0af; */

  2. I think you’ll find that “display: inline” on the LI elements will get rid of the bullets. UL list-style-type: none not needed. 🙂

Leave a Reply