Css - different properties for <a> tag

Wimnat · 17 Jul 2006 at 09:57

Hi,

I have a menu in a <div> tag. The links in this menu are all in <a> tags. I want the links in this menu to look different to my other links. I thought i could do this by adjoining the a tag to my div tag but it doesn't seem to be working. any ideas?

E.g.

<div id="menu">
<a href bla bla>link</a>
</div>

//css file...

a {font-family:Georgia,serif; font-size:16px}
a:link {text-decoration: none; color:#000000;}
a:visited {text-decoration: none; color: #666666;}
a:hover {text-decoration: underline; color: #ff0000;}
a:active {color: red;text-decoration: none}

menu.a {font-family:Georgia,serif; font-size:11px}
menu.a:link {text-decoration: none; color:#ffff00;}
menu.a:visited {text-decoration: none; color: #fafafa;}
menu.a:hover {text-decoration: none; color: #ff0099;}
menu.a:active {color: red;text-decoration: none}

Beansprout · 17 Jul 2006 at 10:33

The period is telling your browser that 'a' is a class of menu - you need a space instead of a period for your browser to realise that you want to apply the style to an element of 'menu'

iCraig · 17 Jul 2006 at 10:50

Ideally your menu shouldn't be a group of <a> links inside a <div>. It should be set out as an unordered list.

Like so:

Code:

<ul id="menu">
  <li class="nav"><a href="home.html">Home</a></li>
  <li class="nav"><a href="about.html">About</a></li>
  <li class="nav"><a href="contact.html">Contact</a></li>
</ul>

Your CSS:

Code:

.nav a:link, .nav a:visited, .nav a:active {
  *style attributes*
}

.nav a:hover {
  *hovered style attributes*
}

Wimnat · 17 Jul 2006 at 10:54

Works a treat. Thanks - it's been bugging me for ages

Al Vallario · 17 Jul 2006 at 17:28

iCraig said:
Ideally your menu shouldn't be a group of <a> links inside a <div>. It should be set out as an unordered list.

Like so:

Or like so, with less repitition:

Code:

<ul id="menu">
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Your CSS:

Code:

ul#menu a:link, ul#menu a:visited, ul#menu a:active {
  *style attributes*
}

ul#menu a:hover {
  *hovered style attributes*
}

av.