WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / programming / css_lists /1

[next]

UNIX System Administrator - SUN Solaris, Veritas, EMC, Shell Scripting, SAN (NYC) Next Step Systems US-NY-New York Post A Job | Post A Resume

Developer News ActiveState Debuts Open Source Business Suite Salesforce Offers Visual App Builder Codesion Steps Out From CVS's Shadow

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.

• Item one
• Item two
• Item three
• Item four
• Item five

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]

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark

Created: March 27, 2003
Revised: August 26, 2005

URL: http://webreference.com/programming/css_lists/1