5 replies [Last post]
michaeljohannes
Offline
newbie
Last seen: 13 years 32 weeks ago
Joined: 2007-09-30
Posts: 2
Points: 0

Hello All!

I'm relatively new to CSS and am hoping that someone can help me with a minor detail.

I have a website with a ul list with 7 li items. When users hover over the list, there is a padded hover over the text so the user knows they have scrolled over something that will send them to that linked page. And it works as expected!

My question is this: How can I make the same type of padding, hover stay over that link when they are on that page? For example, if the user is "Home" and they click to a "Contact Us" page, when they arrive at that page, the menu on the left remains highlighted (with the padding and hover from the CSS). Does that make sense? Here's the code I have so far:

#side_menu li a:hover { text-decoration: none; color: #000000; background-color: #f7d143; padding: 5px; border: 1px solid #000; }

As I said, it works as expected and I like the look of each item when it's highlighted. I just want to keep it when the user is on that page.

Thank you kindly!

Mike

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 43 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

there are multiple ways of

there are multiple ways of doing it, some use javascript, others server side scripting such as php or asp.

You can do it with just html and css, but it leads to quite a bit of code... but still possible.

give your body an id for each page
home - <body id="home">
contact - <body id="contact">

etc

and on your #sidebar give each li an id for the page id="homenav" id="contactnav" etc

then in your css do

#home #side_menu ul li#homenav, #contact #side_menu ul li#contactnav, #otherpage #side_menu ul li#otherpagenav { text-decoration: none; color: #000000; background-color: #f7d143; padding: 5px; border: 1px solid #000; }

and that should do it.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Give each page a unique ID

Give each page a unique ID on the body element, eg

<body id="contactus">
<body id="home">

and give the list-items unique IDs:

then in your CSS:

#home li#nav-home li a, #contactus li#nav-contact li a { text-decoration: none; color: #000000; background-color: #f7d143; padding: 5px; border: 1px solid #000; }

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Ack

Argh too slow!

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 43 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

(No subject)

}:)
I may have forgotten the anchor elements in my post though.
I'm tired and just woke up, maybe not the best time to try and help ppl.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

michaeljohannes
Offline
newbie
Last seen: 13 years 32 weeks ago
Joined: 2007-09-30
Posts: 2
Points: 0

Thanks! It worked:)

Thanks! It worked:)