css question

August 12, 2006 10:45 AM

Probably an easy CSS question, just not for me.

I've got a page at http://www.lifeseeds.org/temp/ that I'm trying to build out with additional pages. I'm having trouble making a "permanent hover state" on the nav items across the top and down the left, so that if you click on "pricing," for instance you get to a page where that pricing link now displays in the hover state for this UL items. I surrounded the LI with a

[bracket]style="background: #458023 url(../images/readmore_over.gif) 97% center no-repeat; color: #FFF;"[bracket]

which is the style for hovered links in the left nav, and the background property works (stays even when not hovered on) but the color property has no impact on the text color. Any ideas?

posted by stupidsexyFlanders to Computers & Internet (11 answers total)

You'd be better off defining a CSS class that has the same styles as the hover state. When you're on the pricing page, you'll want to do:
<li class="classname"> ... </li>

You might try using the full color definition:
color: #FFFFFF;
posted by beerbajay at 11:03 AM on August 12, 2006

Could you link to the page where you actually have this code inline?

I have seen this done successfully where the navigation HTML is the same on every page (as an include, perhaps), but each navigation LI has a unique ID. Then you set the ID of the body tag for each page. so your CSS looks like:

body#about #nav li#navAbout,
body#home #nav li#navHome,
body#contact #nav li#navContact {
/* insert styles here */
}

If we can see the actual code in question, it will be easier to diagnose. but don't worry about #FFF vs. #FFFFFF -- the abbreviation is just fine.
posted by misterbrandt at 11:35 AM on August 12, 2006

Response by poster: Sure.
posted by stupidsexyFlanders at 12:23 PM on August 12, 2006

Response by poster: Whoops. You can see the problem.
posted by stupidsexyFlanders at 12:23 PM on August 12, 2006

The text color in the style tag is probably being overridden by the one in the stylesheet. Move the style attribute onto the li itself:

<li style="...">..</li>

The other thing you could do is add this to the selected link:

<li class="selected">

and add the "selected" class to the place in your stylesheet where you define the hover, like so:

li:hover, .selected {
...
}

This makes the selected link look exactly the same as a hovered link.
posted by cillit bang at 12:28 PM on August 12, 2006

Flanders, which of those links is meant to be selected? Is there a page where one of them is?
posted by cillit bang at 12:48 PM on August 12, 2006

Flanders, http://www.lifeseeds.org/temp/ doesn't have any "selected" nav item. I think we need to see a child page.
posted by misterbrandt at 12:56 PM on August 12, 2006

Response by poster: No, there's not one yet. It would be exactly the same as the main page, except I wanted one of the nav items to be permanently selected, so I was just looking for ideas on what to do to the stylesheet and the index.html (which would then be a child page) Any reason why beerbajay's solution wouldn't work? That seems simplest, to create class for the selected nav item that retains the hovered state.
posted by stupidsexyFlanders at 1:17 PM on August 12, 2006

misterbrandt's solution is the correct and logical one.

You give the body of each page an ID, give each link an ID and then put contextual selectors into the CSS:

#seminars #seminarlink {background-color: #458023; color:#fff;}
#camps #camplink {background-color: #458023; color:#fff;}

Here's your camps page with camps highlighted, and here's your seminars page with seminars highlighted. The context means that #seminarlink only has those attributes when it's inside another tab with the id "seminars" and so on.

A couple of points:

• you can of course combine the two statements above into one
• only tested in FireFox
• your HTML is invalid because you've got an XHTML declaration, but your standalone tags like <link> and <img> aren't closed in the XHTML way.

posted by AmbroseChapel at 2:12 PM on August 12, 2006

Flanders - I did this the (hard) easy way.

You start with a main page with a menu. All of the child pages will have the exact same HTML code for the menu.

Set your desired "permanent highlight" as a style class rule. Then set all menu items to a second default setting class rule. (I used a "menu" class for all items and a "selected" class for the highlighted one).

For the main page, leave all menu items set as the default ("menu") class. On the child pages, using the same linked CSS sheet, change the class of the appropriate menu item from the default ("menu") to the highlighted ("selected") class.

It isn't a CSS trick, it's just manually setting a different class rule on each page for specific items. I made a set of default templates for each subsection of my site, with the menu settings in place, and then add content and save as new child pages as necessary.

misterbrandt's solution is probably more elegant, sure, but mine is simple, it works, and it has been working for me for several years now.
posted by caution live frogs at 8:28 PM on August 12, 2006

Response by poster: Thanks all for your help. I learned a lot here.
posted by stupidsexyFlanders at 4:26 AM on August 13, 2006