Horizontal List Demo

Style a list to appear horizontally with a hover colour on each list item.

20 October 2004 · Last updated: 11 December 2006

Comments

This demo shows how to style an HTML list to appear horizontally, complete with a hover colour on each list item. It's based on the demos at Listamatic which I have improved to allow for current browsers.

Comments (7)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Jens Grochtdreis:
    Although I am not a native English-speaker I recognize, that you must either mean "horizontically" or uploaded the wrong example!
    Greetings from Germany,

    Jens Grochtdreis

    Posted on 22 October 2004 at 7:34 am
  2. Chris Hester:
    Oooops! That's what happens when you spend too long on a new layout! What can I say? Gulp... I'll change the title later - thanks for the post! What a silly mistake I made there!

    Posted on 22 October 2004 at 9:45 am
  3. manu:
    geile sache! das sieht echt klasse aus.

    Posted on 23 October 2004 at 6:30 pm
  4. Chris Hester:
    Vielen Dank!

    Posted on 23 October 2004 at 9:07 pm
  5. Hunox:
    The list items appear without vertical separators in IE5.1/WinXP.

    Posted on 30 October 2004 at 7:53 pm
  6. Chris Hester:
    Probably due to the infamous broken box model in IE5. Upgrade to IE6 if you can, there are many improvements.

    Posted on 30 October 2004 at 9:10 pm
  7. Scott:
    Literally, JUST getting started with the idea of NoFrames / NoBorders / CSS & XHTML. Like the liquid design, cross-browser support, separation of design-content, CSS rollover, non-java menus ... etc. that CSS/XHTML offers.

    Really liked your improvements on the orig Listmatic submission (noticed the weird gaps on rollover - MSIE6).

    RE: Liquid design - when you squish down your menu till it wraps, I noticed some overlap because of the line-height/padding/margin choices. I don't know if this issue can be resolved if you want to use 'background color' for the 'navbox ul' (use a simple background image instead?)

    One can change "Item Nos" to "Item&nbsp;Nos" to keep the menu 'buttons' together (don't forget to add breaking spaces between </li> <li> tags for proper wrapping)

    Also - I don't quite understand the issue with font-size:100%. What happens in what browser (I changed size in both MSIE6 & Moz/FireFox1 w/out an apparent issue?) Would using an em size designation help?

    Thanks for the demo - a great jumping off spot for a CSS newbie like me!

    Posted on 18 December 2004 at 10:20 pm

Useful Info

EMAIL: www.designdetector.com (replace the 1st dot with "@")

RSS NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 11 December 2006.

What's New

Recent Finds


View previous finds

Current Book Reading

Recently Read Books