CSS Question

[AgaBoogaBoo]

I have a side menu with links, whose background changes when you roll your mouse over it. I want to change it so that if you're on a certain page, it changes the background of that link.

Any thoughts on how to do this? I tried making one active instead of hover, but that doesn't work. I have a feeling that I'm approaching this entirely wrong, any thoughts?

 

[Crusty]

I've always created a separate css class to handle these situations, and use my server side code to choose which class each menu object gets. You could also use javascript to detect which page you are on, and change the css class of the item through the DOM.

 

[aceO07]

The code block thing is just horrible. Hard to read.

To get what you want done easily. Give your body element an unique id for each page. Then use css to style according to the id on the body.

main page
[body id='main'] main content [menu] links [/menu] [/body]

news page
[body id='news'] main content [menu] links [/menu] [/body]

css:
#main menu .home, #news menu .news{background: red}

I hope you can understand the pseudo code in there and get the idea.

 

[AgaBoogaBoo]

Thanks for the replies. AceO07, your method is a bit more appealing because of how it's structured, question though - is there a tag I can put on the page besides an id in the body tag?

The body tag is currently embedded in a header include file, which about 20 or 30 files refer to, and I'd rather not have to change them.

I can just make up a tag like <asdf id="news'>links</asdf>, but I'd assume that browsers would get confused with something like that. I'm not the brightest at these things, and so excuse my mistakes 😛

I do understand programming in general though, just not CSS entirely, I might need to find a good book for reference.

 

[aceO07]

AgaBoogaBoo, I got your PM. I usually forget about my posts.

If you don't have access to the body tag, you need to wrap some element, like a div, around the menu or the entire page contents.
For example:
[div id='main']
[div id='content'] blah blah blah [/div]
[ulist] [listitem id='mainlink'] main [/listitem] [listitem id='newslink'] news[/listitem][/ulist]
[/div]


css:
#main .mainlink, #news .newslink {background-color: red}

This is similar to the example from 'CSS Mastery: Advanced Web Standards Solutions'. It's a great book. Not a reference, but it gives lots of neat useful examples that can be used for all webpages. It does give some basics and examples a few things so you can dive in.

 

[911paramedic]

Look at the menu at the bottom of my old college page, it does exactly what you are asking about. There is also a link so you can download the source and all the images if you want them.

I wrote this so the new (to web design) could figure out how to put up a website of their own as a final project. I know it doesn't validate anymore, I have an extra div tag in there and am too lazy to find it. (At least it validated for the final.)

Look at the menu in the footer as you navigate through the pages.

Hope that helps.

P.S. Instead of changing the main link color, I have an info box the "pops up" when you hover the active pages link. You could use the same method to change the background color instead.

 

[Woosta]

^ You should be using an unordered list for the contents of that *list* at the bottom. And line break elements should not be mis-used for spacing.

 

[911paramedic]

Originally posted by: Woosta
^ You should be using an unordered list for the contents of that *list* at the bottom. And line break elements should not be mis-used for spacing.

I am not in the habit of using lists for my footers when I simply have to deconstruct them to have them in a horizontal line, waste of time.

The breaks are there because I needed to put this up in a day, and I was taking 20 units, so it saved me some time. I know that padding or margins are the way to go, but I was hand coding it and didn't really want to deal with it when I could just add a break and be done with it. (poor coding, I know)

 

[911paramedic]

Double post.