10 replies [Last post]
cmode
Offline
newbie
Last seen: 6 years 9 weeks ago
Joined: 2008-05-22
Posts: 1
Points: 0

I've designed the nav bar using CSS (with div tags).
I've set the hover state, but I can't do the active
state so that users know which page they have selected.
thanks for your help.

Here's the html:

Here's the CSS:

.nav{ width:717px; height:30px; background:url(images/navbg.gif) repeat-x top; } .nav ul { margin:0; font-size:11px; font-weight:bold; padding-left:50px; padding-top:5px; list-style:none; } .nav li { float:left; background:url(images/navleft.gif) no-repeat left top; margin-right:10px; padding:0 0 0 15px; } .nav a { float:left; display:block; background:url(images/navright.gif) no-repeat right top; padding-top:5px; padding-right:20px; padding-bottom:3px; padding-left:6px; text-decoration:none; color:#85a157; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ .nav a {float:none;} /* End IE5-Mac hack */ .nav a:hover{ color:#A8AC9C; text-decoration:none; }

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 2 years 17 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 327
Points: 114

add a li #active with the

add a li #active with the conditions to your CSS and add an id="active" to the li tag in your html

.nav li #active { /* whatever condition is different to the regular li */ }

  • ...
  • You can keep the link in the active li being functional or delete it. That's a question of preference, I think

    kesav
    Offline
    Regular
    Chennai, India
    Last seen: 5 years 16 weeks ago
    Chennai, India
    Timezone: GMT+5.5
    Joined: 2008-05-21
    Posts: 11
    Points: 0

    More flexible option!

    You can add id to the body of each page.
    Now you can write CSS rules to any element of the page.

    For example,

    you can change the look of the active tab, (body#aboutUS li#aboutUS{...})

    additionally you can also show different banner images for different tab (body#aboutUS #bannerImg{...})

    Cheers!
    Kesav

    ifohdesigns
    ifohdesigns's picture
    Offline
    Enthusiast
    Providence, RI
    Last seen: 2 years 44 weeks ago
    Providence, RI
    Timezone: GMT-4
    Joined: 2008-02-22
    Posts: 269
    Points: 0

    actually you would probably

    actually you would probably want to use a different unique ID for the body, not the same as the "li" you have there Kesav.

    mattrossidesigns.com

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 2 days ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    To clarify that: ID's are

    To clarify that: ID's are unique; you may not use the same ID twice on the same page!

    The technique (and we have covered it a few times) is to ensure that all pages carry a unique named identifier you may place this ID on either the body or html tags (I prefer to name the page regardless of whether it's used and generally select the html tag for this ) all links then have a class either placed on the list element or the anchor.

    Using descendent selectors we then build a ruleset that applies the properties we require for an active/highlight link state; the selectors then are a set of groups that match the link class and page ID in sets of pairs e.g:

    #about .about,
    #services .services {
    background:red;
    color:white;
    }

    If you are on the services page the rules are applied and the 'services' link will be highlighted, on the other hand 'about' could not be highlighted as the services page does not carry the ID #about so that selector group is false and ignored. You would add to this selector group all the links that you have.

    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

    kesav
    Offline
    Regular
    Chennai, India
    Last seen: 5 years 16 weeks ago
    Chennai, India
    Timezone: GMT+5.5
    Joined: 2008-05-21
    Posts: 11
    Points: 0

    id is always unique

    ifohdesigns wrote:
    actually you would probably want to use a different unique ID for the body, not the same as the "li" you have there Kesav.

    Hugo wrote:
    To clarify that: ID's are unique; you may not use the same ID twice on the same page!

    I said "ID" and I meant it is unique... a known fact...

    Cheers!
    Kesav

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 2 days ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    kesav wrote:ifohdesigns

    kesav wrote:
    ifohdesigns wrote:
    actually you would probably want to use a different unique ID for the body, not the same as the "li" you have there Kesav.

    Hugo wrote:
    To clarify that: ID's are unique; you may not use the same ID twice on the same page!

    I said "ID" and I meant it is unique... a known fact...

    Then why did you write:
    body#aboutUS li#aboutUS{...}

    if you knew that an ID is unique Smile

    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

    kesav
    Offline
    Regular
    Chennai, India
    Last seen: 5 years 16 weeks ago
    Chennai, India
    Timezone: GMT+5.5
    Joined: 2008-05-21
    Posts: 11
    Points: 0

    I agree

    Hey that was my fault... I agree :bigoops:

    Cheers!
    Kesav

    bcoadmin
    bcoadmin's picture
    Offline
    newbie
    Last seen: 5 years 46 weeks ago
    Joined: 2007-12-10
    Posts: 5
    Points: 0

    Hi, as a relatively newcomer

    Hi, as a relatively newcomer to CSS/HTML I think I am missing something with regards to have a menu item change , for example, the background colour and text colour, when it is the currently displayed page - i.e. when it is active.

    I have read this thread and many others which use the class or ID of ACTIVE.

    However in the examples the CSS sets one LI as ACTIVE

    Let's assume a simple menu of 5 LI items - one, two, three, four and five

    If the CSS has set LI one as ACTIVE and I click on LI two, how does that become ACTIVE - i.e. overide the CSS?

    I was going down the route of auto-naming each page using the template function body id="@@(id)@@" but got to thinking there must be a more simplistic way?

    Can anyone point me in the direction of a good tutorial that will show me just how stupid I have been?

    Many thanks

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 28 weeks 2 days ago
    London
    Joined: 2004-06-06
    Posts: 15650
    Points: 2788

    When one sees the class or

    When one sees the class or ID 'active' it generally means a scripting approach is in use, it's the script that takes care of determining the page that is being viewed and sets the class on the correct anchor or li element.

    There is a pure CSS approach which requires that you give each anchor or LI element a unique class or ID and name the page with a class or ID on the html or body tag then it's simply a case of setting your preferred active state CSS properties i.e background:red; and then grouping selector pairs so that the page id 'about' is matched with the anchor or li class 'about' or id 'index' matches with class 'index'.This is explained in more detail earlier and in several other posts that are to be found in the archives.

    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

    bcoadmin
    bcoadmin's picture
    Offline
    newbie
    Last seen: 5 years 46 weeks ago
    Joined: 2007-12-10
    Posts: 5
    Points: 0

    Ah, it is becoming clearer...

    ...well, less obscured is probably a better description!

    I think I was attempting to mix the two - scripts and page IDs.

    As I want to avoid scripting for the moment, I will concentrate on giving each page a unique ID and parsing this to each LI. That way I should be able to format the properties of the active page using the unique ID.

    I will also visit the archives here to get a few more hints.

    Many thanks for your help and understanding