How to Use CSS to Position Horizontal Unordered Lists

home / programming / css_lists /1

[next]

Mac Consultant
The Computer Merchant, Ltd
US-RI-Providence

Post A Job | Post A Resume

Developer News

Google Going Native With Chrome

Mozilla Fixes Firefox Flaws as 3.5 Release Nears

Microsoft and Novell Still Bosom Buddies

How to Use CSS to Position Horizontal Unordered Lists

By Stu Nicholls.

Introduction

Let's say that you've chosen to use a horizontal styled unordered list for your navigation and have followed the generally accepted CSS methods put forward by the many CSS information sites on the web. All's well until you decide that you don't want your menu to be left aligned. You want to be able to position it centrally or to the right and this is where it starts to get tricky.

Fortunately, there's a way to style your horizontal unordered list so that it can be easily positioned where you want it.

Method

The accepted 'normal' method of styling

In this tutorial I'll use the following unordered list throughout.

The (X)HTML

  
    <ul id="menu">
<li><a href="#nogo">Item one</a></li>
<li><a href="#nogo">Item two</a></li>
<li><a href="#nogo">Item three</a></li>
<li><a href="#nogo">Item four</a></li>
<li><a href="#nogo">Item five</a></li>
</ul>

  

..which looks like this before styling.

The normally accepted method of styling this list is as follows.

The CSS

#menu
{
padding:0;
margin:0;
color:#fff;
font-family: arial, helvetica, sans-serif;
white-space:nowrap;
list-style-type:none;
}
#menu li {display:inline;}
#menu li a
{
padding:0.2em 1em;
background:#fc6;
color:#000;
text-decoration:none;
float:left;
border:1px solid #000;
}
#menu li a:hover
{
background:#08c;
color:#fff;
}

#menu - the <ul> tag styling

padding:0; - removes any padding.
margin:0; - removes any margins.
color:#fff; - sets the font color to white.
font-family: arial, helvetica, sans-serif; - sets up the font choices (ALWAYS finish with a generic font).
white-space:nowrap; - ensures that text stays on one line.
list-style-type:none; - removes the bullet from the list (not absolutely necessary).

#menu li- the <li> tag styling

display:inline; - makes the list horizontal.

#menu li a- the <a> tag styling

padding:0.2em 1em; - adds required padding.
background:#fc6; - makes background 'orange'.
color:#000; - makes the font color black.
text-decoration:none; - removes underline from text.
float:left; - keeps the list horizontal.
border:1px solid #000; - adds a black border around each list item.

#menu li a:hover- the <a> tag hover styling

background:#08c; - makes the background light blue.
color:#fff; - makes the font color white.

Using the above styling our unordered list will look like this:

‡ Normal Styling

It all looks ok but as soon as you try to reposition the menu your troubles begin.

If, for instance, we want to center our menu we could try changing the margins of the <ul> tag to margin:0 auto; but this doesn't work. We could try using text-align:center; but this also doesn't work.

To understand why these methods don't work, let's take a closer look at the styled list and ask ourselves: "What is the overall size of the <ul>?" If you guessed that it's the same size as the outer black border you would be wrong.

To show the actual size of the <ul> let's add a red border around it.

home / programming / css_lists /1

[next]