CSS Question
- Started
- Last post
- 3 Responses
- lumedia
I have a web page with 2 menus. I want the text of the links on each menu to be displayed each using a unique CSS rule.
How do I do this? I made an a:link psuedo-class selector but that applies to all the text links on the whole page.
I am thinking that I need to have a unique ID for each menu DIV but how do I apply a different CSS rule to each?
I am a web novice. please help me.
- stupidresponse0
use unordered lists for the menus and give each ul an id. or some other form of inheritance. you can target children of specific parents.
- amullins0
yeah, add an id or class to each ul and then use something like:
ul#nav1 a:link {}
- lumedia0
ding ding ding! Thanks guys. Here is what I ended up with:
<div class="blockMenuServices" id="services">
<a href="sub/training.html">Training</a> <br />
<img src="images/lineBreak.gif" width="122" height="1" /><br />
<a href="sub/coaching.html">Coaching</a> <br />
<img src="images/lineBreak.gif" width="122" height="1" /><br />
<a href="sub/keynoting.html">Keynoting</a><img src="images/lineBreak.gif" width="122" height="1" /></div>and the style sheet:
div#services a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14pt;
font-variant: small-caps;
color: #CC9900;
text-decoration: none;
}