Beautify Resource List

Anchor Block Hover

Styled Ordered List

Visited Status Image

Expanding Liquid Layout

Below is an example of a cross-browser ordered list. It's styled nicely, uses a block-hover technique, employs a visited-link status indicator, can be used on either a liquid or fixed-width layout, is pure and valid CSS and XHTML, doesn't rely on javascript and beats what we had before!

Read the accompanying article for: a tutorial, the code, a description, a dynamic-generated example and download the ZIP file to use, play and/or modify.

As with all the stuff at Randsco, you're free to use this on your personal website. Those using it on a commercial website need to donate, which helps keeps it free for others. Learn more on our copyright page. If you have any questions regarding usage, deployment or technical issues, please contact me.

  1. checkCSS-Styled Lists: This Noupe.com website article covers more than 20 demonstrations, tutorials and best practices for styling lists, using CSS.
  2. checkListutorial This classic site takes you through basics of building background image lists, rollover lists, nested lists & horizontal lists.
  3. checkBeautify a Resource List We styled an "additional resources" ordered list of links and thought others might like to learn, play and use it for their website. (Tutorial, demo and ZIP files included).
  4. checkThe Misunderstood CSS "Clip" PropertyThe CSS clip property is one of the least used. Most people don't know when and how to use it. Learn more.(Clip is used for the :visited status image in this demonstration page).