How to make a button stay down when I click on it in CSS nav bar.

Question

So I have created a horizontal navigation bar, I use the CSS
Sprites/Pixy method to get the hover working with the same image as
the link/in active stage of the buttons.
Now how do I make the button stay down when someone click on
them?
These are the codes for the nav bar.
#nav{
width: 780px;
list-style: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
height: 40px;
#nav li{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
float: left;
padding: 0;
#nav a{
width: 125px;
display: block;
color: #000000;
text-decoration: none;
text-align: center;
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center 2px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
#link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
#nav a:hover{
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center -36px;
color: #FFFFFF;
width: 125px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
Everything works so far, the hover works when you roll the
mouse but when you click the button goes right back.
How can I make it stay down and then go back to normal when
you click on another link/button?
Thanks very much.
Patrick

Answer 1

Read my suggestion again. You are missing a critical point. I
show you
exactly where to put the stylesheet. And it doesn't matter
how many
stylesheets you have on a page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Webethics" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Change this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center -36px;
> color: #FFFFFF;
> width: 125px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> to this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-position: center -36px;
> color: #FFFFFF;
> }
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Webethics" <[email protected]> wrote
in message
> news:[email protected]...
> >
quote:
Originally posted by:
Newsgroup User
> > When they click on a button, do they go to another
page? And is each
> > button
> > uniquely identified?
> >
> > If so, then put a little stylesheet on each such
page that sets the
> > particular button to the down sprite settings,
e.g.,
> >
> > a#link6 { downspritevalues }
> >
> > --
> > Murray --- ICQ 71997575
> > Adobe Community Expert
> >
> >
> > This is the link to the page.
> >
http://www.patrickjudson.com/zitto_web1d.html
> > What state do I use to get this effect? The active
or the visited?
> >
> > I want the buttons to remain down when click or
even better, how do I
> > get
> > the
> > welcome button to appear down when a person visits
the page to show them
> > they
> > are at the home page.
> >
> > Thanks so much. Patrick
> >
> >
> >
>
>
>
> Hey! Murray, thanks very much for the efforts. However
I'm still confused
> as
> to where to insert the individual styles on each page.
>
> The pages already have a style sheet, in fact they all
share the same
> style
> sheet. The following codes below is what you instructed
but I'm confused
> as to
> where to insert them since the page already has a head
opening and closing
> as
> well as a style opening and closing tags. Can you please
add the codes you
> instructed so I can see where they go and how to
implement them?
>
> Thanks - Patrick
>
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
>
>