Ordered and unordered lists (create a horizontal menu/navi bar)

19 Nov 2006 > 5 Comments

Creating a <div> based Template using CSS (Part: 3)

Lists are used to display a group of List Items (<li>) that are in some way related to each other. The two main list types are Unordered (<ul>), and Ordered (<ol>).

The difference between Ordered and Unordered lists

An unordered list

It’s pretty straightforward. An unordered list consists of items that are in no set order. It’s just a bunch of stuff, like a shopping list:

<ul>
<li>Milk</li>
<li>Cookies</li>
<li>Bread</li>
<li>Coffee</li>
<li>Cookies</li>
</ul>

An ordered list

An ordered list consists of numbered items that are in some kind meaningful order, like the (oh so meaningful) cooking instructions on a packet of instant noodles:

<ol>
<li>Bring Two Cups of Water to The Boil</li>
<li>Insert the noodles and cook for 2 to 3 minutes</li>
<li>Remove from heat, add soup base and stir</li>
</ol>

Adding lists to the Template

I’m going to add an ordered menu list of links to the header (#c1), and the Three vertical columns (#c2, #c3, #c4). Menu lists can be either ordered or unordered. Usually, they follow some kind of orderly pattern like the example below:

<ol>
<li>Home</li>
<li>About</li>
<li>Content</li>
<li>Email</li>
</ol>

I’m also adding an unordered list to the three vertical columns (#c2, #c3, #c4).

<ul>
<li>Star Trek</li>
<li>Lost</li>
<li>Lord of the Rings</li>
<li>Star Wars</li>
<li>Doctor Who</li>
</ul>

In my example, you will notice that ordered and unordered lists both have default margins. We will remove the margin’s as we did with the Headings and Paragraphs in Part 2 of this tutorial.

h1, h2, h3, h4, h5, h6, p, ol, ul {margin:0;}

However, if you do a cross-browser check in IE and Firefox, you will notice that there are inconsistent results.

We need to make two more changes in the CSS to achieve matching results.

First we need to remove the padding.

ol, ul {padding:0;}

The list items in both browsers are now pretty much the same, except the Bullets and numbers, are hidden in IE (for some reason), yet are still visible in Firefox.

To remove them (I’ll style them using images later on), add the li selector to the Stylesheet, with the property list-style-type:, and the value none;.

li {List-style-type:none;}

Lists in both browsers are now identical.

Create a horizontal menu/navigation bar)

The menu list is already inside the header (#c1), it just needs to be horizontal. This can easily be achieved by displaying the list items as inline elements, thus removing the line-breaks common to all block level elements.

First we need to select the <div> id (#)that contains the list, that is #c1, then select the <li> elements contained within #c1. And add the property display:, giving it the value inline;:

#c1 li {display:inline;}

To space out the menu links add some padding (0.5em) to the right of each list Item (see quick guide below):

#c1 li {display:inline; padding: 0 0.5em 0 0;}

And that’s it

A quick guide on removing margin and padding from block elements

Think of the padding as an invisble box that surrounds the content of your HTML element. Margin, on the other hand surrounds the entire HTML element.

All four sides have four values, starting at the top of the box, and surrounding your content in a clockwize direction.

1. Top
2. Right
3. Bottom
4. Left

To remove all of the padding from an element, you could put it like this, using four values, starting with the top value, then the right, bottom, and left values. In this example, we are declaring no value with a row of four zeros.

{padding: 0 0 0 0;}

Because each of the four sides of the box all share the same value, there is no need to repeat it. And you can put it simply like this:

{padding 0;}

< Back to everything
Keep going… >

Related Posts

• Margin and Padding
• Creating a <div> based Template using CSS (part 1 - 12)
• AA: Division based xhtml and css Template
• Easy pixel background tutorial
• Ordered List items all 1 in IE