Multi-colored links

by Joe Gillespie — Nov 1, 2002

I'll just show the top, .home class to show how it's done, the others only differ in the 'color' spec.

.home a:link
      {
      color:#06f;
      background-color:transparent;
      text-decoration:none
      }

.home a:visited
      {
      color:#06f;
      background-color:transparent;
      text-decoration:none
      }

.home a:hover
     {
      color:gray;
      background-color:transparent;
      text-decoration:none
      }

As this is a main menu and used often, the 'visited' state is not very relevant so I have made the a:visited and a:link colors the same.

There is a main #content box (cream) centered on the page that holds everything else together. It has a top margin of 65px to keep it from banging its head on the ceiling.

#col1 is pale blue and holds the menu items. It has a right margin of 20px to keep it away from #col2.

#col2 holds the central image.

#col3 is pale lavender and has a block of text. It has a left margin of 20px to form a gutter between it and the picture.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float