CSS Navigation bar help requested, trying to have menu buttons change for active page Options

[rosskennedy]

Hi, I am trying to have my menu change based on whether a page is active, visited or hover. My problem is that the active and visited coding does not seem to work for me: As I am a noob at this any help would be appreciated. Note: I do plan on placing all the css in it's own file and linking to it in the html when everything is working correctly

Here is my website
www.stewiackeholytrinitychurch.ca

Here is the code I am using:

CODE

#nav-menu
{
float:left;
width:100%;
overflow:hidden;
position:relative;
}  

#nav-menu ul
{  
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
}

#nav-menu ul li
{
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

#nav-menu li a
{
background: url(images/menubackground.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;  
margin-left: auto;  
margin-right: auto;  
width: 9em;  
display: block;  
border: 0.1em solid #dcdce9;  
color: #0d2474;  
text-decoration: none;  
text-align: center;
}

#nav-menu li a:active
{
background: url(images/menubackgroundactive.gif) bottom left repeat-x;
height: 2em;  
line-height: 2em;  
margin-left: auto;  
margin-right: auto;  
width: 9em;  
display: block;  
border: 0.1em solid #dcdce9;  
color: #FF0000;  
text-decoration: none;  
text-transform:uppercase;  
text-align: center;  
}

#nav-menu li a:visited
{
background: url(images/menubackgroundvisited.gif) bottom left repeat-x;
height: 2em;  
line-height: 2em;
margin-left: auto;
margin-right: auto;  
width: 9em;  
display: block;  
border: 0.1em solid #dcdce9;  
color: #708090;  
text-decoration: none;  
text-transform:uppercase;  
text-align: center;  
}

#nav-menu li a:hover
{
background: url(images/menubackgroundhover.gif) bottom left repeat-x;
height: 2em;
line-height: 2em;
margin-left: auto;  
margin-right: auto;  
width: 9em;
display: block;  
border: 0.1em solid #dcdce9;  
color: #008000;  
text-decoration: none;  
text-transform:uppercase;  
text-align: center;
}
  /* Hide from IE5-Mac \*/
#nav-menu li a
{  
float: none
}
/* End hide */

[pandy]

Visited seems to work, but active doesn't. That's because the order the rules come in is important. See towards to bottom of this chapter.
http://www.w3.org/TR/CSS2/selector.html#dy...-pseudo-classes .
More in depth here: http://meyerweb.com/eric/css/link-specificity.html .

Something to remember the usual order by is LVHA (LoVe HaTe). Link, Visited, Hover, Active.

[rosskennedy]

Visited seems to work, but active doesn't. That's because the order the rules come in is important. See towards to bottom of this chapter.
http://www.w3.org/TR/CSS2/selector.html#dy...-pseudo-classes .
More in depth here: http://meyerweb.com/eric/css/link-specificity.html .

Something to remember the usual order by is LVHA (LoVe HaTe). Link, Visited, Hover, Active.

Thanks for that info Pandy, I was not aware of this. After making the changes though, I still find that the Visited and the Active don't seem to work. the Active will only momentarliy flash red (when you click on it) I want it to stay red when until you leave that page, then have the Visited take over (where it will turn slate grey with all uppercase letters)

What else am I missing?

[pandy]

You misunderstand what :active means. It doesn't mean the link to the current page. It's the state just when the link is clicked, that is a very brief moment. If you want to style the link to the current page differently you have to use other means.

I think :visited works. I've tried with several browsers. All buttons have a dark gray border now.

[rosskennedy]

You misunderstand what :active means. It doesn't mean the link to the current page. It's the state just when the link is clicked, that is a very brief moment. If you want to style the link to the current page differently you have to use other means..

You're right Pandy, I did misunderstand what "active" meant. What I want is to have the button change to red to indicate the current page the user is viewing and when user clicks on another page, then the button for that page will become red and the previous button will then go to the "visited" state.

thanks
Ross Kennedy

[pandy]

An easy way to do that is to give each link their own id. Then you give BODY of each page an id. Let's say you call the body IDs services, events and so on and the links services_link, events_link and so on. Then you can make up selectors that only match the services link if it is in the services page and the same for all the others. Then group them all together in one rule.

CODE

#services #services_link, #events #events_link    { /* styling for link to current page */ }

I'm a little old fashioned, so I think the link to the current page actually shouldn't be a clickable link at all, but not many care about that nowadays, so go ahead and do it with CSS.

[rosskennedy]

An easy way to do that is to give each link their own id. Then you give BODY of each page an id. Let's say you call the body IDs services, events and so on and the links services_link, events_link and so on. Then you can make up selectors that only match the services link if it is in the services page and the same for all the others. Then group them all together in one rule.

CODE

#services #services_link, #events #events_link    { /* styling for link to current page */ }

I'm a little old fashioned, so I think the link to the current page actually shouldn't be a clickable link at all, but not many care about that nowadays, so go ahead and do it with CSS.

Ok, let me see if I understand this correctly Pandy. Each page will have its own unique ID, and then each page will have one unique id for the link (so that I can style the active link and it will only apply when they are on this page) but all other links will remain the same for the menu.

css styling

CODE

#services
{...} /* styling for current page */
#services_link
{
color: red
text-transform: upppercase
}

in html page

CODE

Body id=services
.  /* rest of html*/
.
menubuttonactive.services_link  /* Here I am creating a selector and using the services_link ID,*/
                                              /* which if I understand this correctly will now turn the text red and */
                                             /* make it uppercase for as long as the user is on this page */

If this is right then I would do this for all the other menu buttons each in their own page

[pandy]

Nuh. Maybe you aren't familiar with contextual selectors? You must have it like this.

CODE

#services #services_link    { /* */ }

The selector means any element with the id 'services_link' that's contained in any other element with the id 'services'. A bit down the page here (Contextual Selectors) http://htmlhelp.com/reference/css/structure.html or here http://www.w3.org/TR/CSS2/selector.html#descendant-selectors (descendant and contextual selectors are two names for the same thing)

Then you create similar selectors for all the other links and pages. But you don't need to write out separate rules as you can group all the selectors together so one rule is all you need.

CODE

page1 link1, page2 link2, page3 link3, page4 link4
{ /* */ }

The above does the same job as if you had written separate rules for each of the selectors, as in the example below, only much shorter and easier to maintain.

CODE

page1 link1    { /* */ }
page2 link2    { /* */ }
page3 link3    { /* */ }
page4 link4    { /* */ }

CODE

Body id=services
.  /* rest of html*/
.
menubuttonactive.services_link  /* Here I am creating a selector and using the services_link ID,*/
                                              /* which if I understand this correctly will now turn the text red and */
                                             /* make it uppercase for as long as the user is on this page */

Not sure I follow. The links will all have their IDs on all the pages (that's part of the beauty of it, you don't have to keep track, you just give the links IDs once and for all and then repeat the same markup on every page). The only thing that must differ between the pages is the id of BODY.

[Jaycbrf4]

You need to assign the class of "current" to the nav item for that page. and remove the <a>tag from that item.

Define "current" as the state you want the active link to look like:

<ul>
<li class="current">Home</li>
<li><a href="services.html">Services</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="history.html">History</a></li>
</ul>

This post has been edited by Christian J: Aug 17 2012, 01:58 PM

[Darin McGrew]

Define "current" as the state you want the active link to look like:

That's one way to do it. The way that pandy was suggesting wouldn't be that different, for example:

CODE

<body id="pagehome">
<!-- ... -->
<ul>
<li id="linkhome">Home</li>
<li id="linkservices"><a href="services.html">Services</a></li>
<li id="linkevents"><a href="events.html">Events</a></li>
<li id="linkphotos"><a href="photos.html">Photos</a></li>
<li id="linkhistory"><a href="history.html">History</a></li>
</ul>
<!-- ... -->
</body>

Then, instead of having your CSS select the "current" class, it selects the "linkhome" id inside the "pagehome" id, the "linkservices" id inside the "pageservices" id, etc.