How to Style an Unordered List with CSS / Page 2 | WebReference

How to Style an Unordered List with CSS / Page 2


[previous] [next]

How to Style an Unordered List with CSS [con't]

Step 4: Styling the Link Colors

Now we can add a little color to our links:
  • background:#808; - makes the background purple (the same color as the border).
  • color:#eee - makes the text light grey.

‡ Part One/Step 4

The menu now has the correct colors but it look a little squashed.

Step 5: Styling the Link Spacing

The links require a little spacing out:
  • margin:0 0 0.25em 0; - adds a bottom margin of 0.25em to each <li> tag. The order of the four numbers is 'top margin', 'right margin', 'bottom margin', 'left margin', just think of this as clockwise round the box starting from 12 o'clock. This will vertically separate the links.
  • padding:0.25em; - adds 0.25em padding to each link.

‡ Part one step 5

The links styling is now complete.

Step 6

Styling the link hover

This is the style that gives the menu a javascript equivalent of an onMouseOver event.
  • background:#ddd; - makes the background color light grey.
  • color:#808; - makes the font color purple.

‡ Part One/Step 6

As you hover the mouse over each link it will change from light grey text on a purple background to purple text on a light grey background with a purple border. You will also notice that our unordered list still occupies the entire width of the screen.

Step 7: Styling the Unordered List Width

The final step with this basic styling of an unordered list is to reduce the overall width of the list:.
  • width:0; - this will reduce the width to zero in Mozilla, Firefox etc. If you're using Interent Explorer it will reduce to the same width as the links (9em in our case).

‡ Part One/Step 7

If you are using Internet Explorer then you will see the white background of the <ul> tag has shrunk to the same width as the links. In other browsers, the white background won't show as it's been shrunk to zero width.

Now, we can remove the body color and the unordered list color and end up with our basic styled unordered list.

‡ Example List One

Part Two

Step One

Changes to the (X)HTML

With just a little more code and a minor addition to the CSS we can add a pop-up information box that will appear when the mouse is hovered over each link.

The (X)HTML will require the additional information to be held in a span, this information can be text, an image, or both. In this tutorial I add both.

The additional code required is as below:

As you can see, a span has been place in each link following the name of the painter. It is made up of the painter's name, his year of birth and death, next an example image of his painting and finally a small snippet of text about the painter.


[previous] [next]