2 replies [Last post]
Dimitriova
Dimitriova's picture
Offline
newbie
Last seen: 10 years 17 weeks ago
Timezone: GMT+1
Joined: 2010-06-02
Posts: 5
Points: 8

Hi there,

I am trying to make an image gallery with 11 buttons. I want to style my buttons so that they change on hover AND stay selected after I click on them. An example of what I would like to have is: www.prologue.com (check out their buttons).

My css seems to be working fine on Firefox, but my buttons won't stay selected after clicking on Safari.

Any ideas? Please help! I've spent 2 days trying to find a solution and I've ran out of ideas!!!

Thank you..

CSS:

#numbered_button_container a {
width: 200px;
font-family: Helvetica, Verdana, Arial;
color: #666666;
font-size: 9px;
display: inline;
text-decoration: none;
font-weight: lighter;
letter-spacing: 0.1em;
word-spacing: 1em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#numbered_button_container a:link {
width: 200px;
font-family: Helvetica, Verdana, Arial;
color: #666666;
font-size: 9px;
display: inline;
text-decoration: none;
font-weight: lighter;
letter-spacing: 0.1em;
word-spacing: 1em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#numbered_button_container a:visited {
width: 350px;
font-family: Helvetica, Verdana, Arial;
color: #666666;
font-size: 9px;
display: inline;
text-decoration: none;
font-weight: lighter;
letter-spacing: 0.1em;
word-spacing: 1em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#numbered_button_container a:active {
color: #7CB4CD;
text-decoration: underline;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
display: inline;
}
#numbered_button_container a:hover {
color: #7CB4CD;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
display: inline;

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The solution is a mere two

The solution is a mere two clicks away in the 'How To' section of the site where you will find a guide to CSS highlighted current page links.

The problem you are having is a misconception of what the pseudo class :active actually is intended to do it does NOT act as a means of highlighting the current page it's purpose is to highlight the single instance of an action, the click of a link.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Dimitriova
Dimitriova's picture
Offline
newbie
Last seen: 10 years 17 weeks ago
Timezone: GMT+1
Joined: 2010-06-02
Posts: 5
Points: 8

Thank you, Hugo. I'm not sure

Thank you, Hugo. I'm not sure if the is the right approach for me, as I'm not trying to have my buttons react to different pages, but rather an image array with javascript. So that, when I click on Button B, image B shows up (from the array) AND button B stays selected because it recognizes that image B is currently showing?

THANK YOU.

D.