Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Styling Page Navigation (Lists)

There are numerous ways to style the unordered lists that we use for page navigation on our sites. In this exercise, we will look at an online resource that will simplify this process and at the same time give us some creative input. Some students have asked me about using images for navigation elements. While I won't tell you you can't use them, I will say that using text-based navigation is more accessible and easier to maintain. You are not required to use these styles for the navigation elements on your page.

  1. Visit the following site:
    http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/
  2. Follow the instructions to create the navigation.
  3. Open the index.html file located in the Personal Web site Directory
  4. Paste the generated html in the navigation <div>
<div id="navigation">Paste HTML Here</div>
  1. Open the text.css file located in
    Personal Website/assets/style
  2. Paste the generated CSS into the text.css file
  3. Save both files