Re: Syntax query on styles

by "Hilma" <Hilma(at)hilma.freeserve.co.uk>

 Date:  Sun, 21 Apr 2002 08:00:09 +0100
 To:  "Darrell King" <darrell(at)webctr.com>,
<hwg-basics(at)hwg.org>
 References:  S0026260871 bert S00262608712 S00262608713 hilma king
  todo: View Thread, Original
Thanks Pamela and Darrell for your answers;
I've been through them, and i see the approach :-)

But i still don;t see the answer to my problem (at least, not this one)

Whilst i am never too bothered about knowing where I've been, i like to know
where I am :-)
Therefore, i don;t always use the "a:visited" attribute, but i really would
like an "a:active" attribute, for links.

To get that effect, i have 2 styles of Nav button, one for use for the
"current" page, one for all the others.
(and some neat DHTML to swap them, til i realised i didn't need it as i
don;t use frames - duh, lots of unnecesary code!)

So in each page, i use "class=NavButton" for other buttons, and
class=NavButtonActive for my current page.

The css looks like:
============================================================================
========

a:link
{text-decoration: none; font-weight: bold; color:linen; }
a:visited
{text-decoration: none; font-weight: bold; color:linen; }
a:hover
{text-decoration: none; font-weight: bold; color:#407846;
background:linen; }


.NavButton  {padding: 2px; border:3px outset #99cc99; display:block;
margin:10px;
font-size: small;
text-align: center;
background:#71ad78
}

.NavButtonActive  {padding: 2px; border:3px outset #99cc99; display:block;
margin:10px;
font-size: small;
text-align: center;
background:#2BB039;
}

a.NavButtonActive:link
{text-decoration: none; font-weight: bold; color:black; }
a.NavButtonActive:visited
{text-decoration: none; font-weight: bold; color:black; }
a.NavButtonActive:hover
{text-decoration: none; font-weight: bold; color:#407846;
background:linen; }

============================================================================
========


Which has, as you see, lots of repeated code, which i don;t like.

The only difference between the  button styles is the background-color
attribute, and the pseudo-class "a.link" appearance (and possibly
"a.visited" which is currently the same as "a.link").
The button-definition (bar its colour), and the "a.hover" attributes, are
the same.

What i'd like is a NavButton class for all, and some way of changing just
those attributes that do change, for the NavButtonActive class.

I hope this makes sense!

many thanks-

h.

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA