7 replies [Last post]
slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Hello,

I've got a horizontal menu at the following URL:

http://tinyurl.com/29olvq

But I was just trying to add a simple active class to the list items so when I apply it to one of them the user can see which page they are on.

I've added in the active class with styling embedded but it doesn't seem to work.

Any ideas why or how I can get it to work?

Btw - This page passes the W3C CSS & XHTML validation check Smile

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

A couple of points

A couple of points first.

Your general approach to what constitutes a 'active' link item may be a little skewed, CSS itself is not dynamic so as such it cannot know that a element might be in an 'active' state, and for your 'active' class approach to work you would need scripting driving things, which if you can employ does make for some nice touches with things such as navigation where you have the ability to add and remove classes.

In your markup you have the class 'active' placed on the list element in your styles you have separated the class selector from the li selector thus forming a descendant selector group where .active is a nested descendant of a li element rather than belonging to the li element.

A CSS approach to highlighted menu items is to firstly add an ID page name to each page on the html or body tags to uniquely name each page; then on the li or anchors give each a class or id. Describe your properties for the active/highlighted condition then for selectors you use grouping to pair up each li/a elements class/id to a page name id e.g

#about .about,
#index .index {
background:red;
}

The .about class on it's li/a element will only have a red background when the selector pair is matched; when the page that has a body id of #about is viewed the .about class element matches and the background is red, conversely when on the index page the .about element can't have a red background but the .index class can.

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

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Thanks for the pointer Hugo.

Thanks for the pointer Hugo. Yeah I've heard of the page selector approach before but was wandering if it could be done as an alternative way. I've had a tinker around and come up a clean and simple solution to do it either way.

Doing it using an active id (as per my original attempt) I have come up with the following:

http://tinyurl.com/29mbar

With the page selector method I have come up with this:

http://tinyurl.com/2foyy6

Comparing the both, they are exactly the same in terms of the rendered output but with different styling under the hood.

I thought I'd get both working and add a few comments to help out anyone else looking for ways to styling active navigation items in the future.

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

Slippy the first example is

Slippy the first example is not dynamic and is an example of what I have said previously using an 'active' class in this fashion doesn't mean you have a page highlighted link you have simply set a background to a class!

The second example is as I also previously described, and is the only CSS based approach, I'd also add that we have explained that approach quite a few time before, perhaps it's time to retrieve them and polish up and make a sticky.

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

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Hugo, I recognise that they

Hugo, I recognise that they are not dynamic but as I was trying to get at in my original post I don't actually need them to be dynamic as such. It would be nice to later look into a way of using Javascript or PHP but I was basically after a way to simply show an "active" state to the user so they know which page they are on. Yes this has to be added in the code but adding a simple id="active" to each list item isn't too much to do.

The second example is as previously described (as I noted) and is an alternative way of doing it but you still have to set each page to have a body id. For my needs this is fine and it is a CSS forum - not a Javascript forum.

I was merely posting the results of my experiments so others with similar needs can look and compare and so the thread can be closed off rather than just not reply back. Judging by the response maybe I shouldn't have bothered.

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

Don't take it the wrong

Smile Don't take it the wrong way, it's just that you simply describe setting a background to a class, the only reason that wasn't working originally was due to writing the selectors incorrectly.

It's rather tedious to have to set a class each time which is why it's nice to use a simple bit of php if available.

And you were quite right to round the thread off.

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

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Yeah no doubt it is a bit

Yeah no doubt it is a bit tedius but I only have about five main sections so once I set them for each page it should be ok to manage. I think I'll go with your suggested page selector method as this seems to be slightly better practice and can present lots of other options on individual page styling for each main page of the site.

I do now have another question though. Its probably a fair simple one but I've now wrapped the nav list in a container 960px wide and I wish to float it to the right. I can do this but it re-orders the list back-to-front so number one in the list is on the right side instead of the left. Is there a good way to counteract this or shall I just list the markup back-to-front (number five as the first list item, number four as the second list item, etc)?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

floats

Verschwindende wrote:
  • CSS doesn't make pies