Sent by Zoe M. Gillenwater on 30 March 2005 17:05
Cameron Lissner wrote:
>I want to have 2 styles of links.. one for buttons and other for links in
>the main content box..
>
>
Then descendant selectors are your best bet. They say "if an 'a'
element is inside this div, make it look like this, but if it's inside
that div, make it look like that."
>The menu styles work fine, but when I add an other set of rules for links it
>changes the menu's appearance.
>how do I get around this...
>
>thanks in advance
>
>
>/* START - nav menu */
>div.menubar {
> color :#000000;
> width :660px;
> margin-top: 0px;
> }
>
>a.menu{
> width :110px;
> height: 50px;
> text-align : left;
> font-family: Verdana;
> font-size : 9pt;
> color : white;
> text-decoration : none;
> background-color :#666666;
> padding: 30px 0 0 5px;
> border: solid 1px white;
> margin: 0px;
> }
>
>a.menu:hover {
> color :CCCC99;
> background-color :#333333;
> }
>/* END - nav menu */
>
>
>
Get rid of the classes on your links in the menu and just use descendant
selectors, like so:
div.menubar a { ... }
div.menubar a:hover { ... }
>
>/* START - link styles */
>a:link {
> font-weight: bold;
> text-decoration: none;
> color: #B7A5DF;
> }
>a:visited {
> font-weight: bold;
> text-decoration: none;
> color: #D4CDDC;
> }
>a:hover, a:active {
> text-decoration: underline;
> color: #9685BA;
> }
>/* END - link styles */
>
>
Either your rules for the a's inside menubar need to overwrite all of
these default values, or you need to change these selectors so they only
apply to a's within your main content div. Something like this:
#content a:link { ... }
etc.
Zoe
--
Zoe M. Gillenwater
Design Specialist
Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
