Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ CSS Navigation bar help requested
Posted by: rosskennedy Aug 12 2012, 08:32 PM
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:
#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 */
Posted by: pandy Aug 12 2012, 08:41 PM
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#dynamic-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.
Posted by: rosskennedy Aug 12 2012, 10:43 PM
http://www.w3.org/TR/CSS2/selector.html#dynamic-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?
Posted by: pandy Aug 13 2012, 12:36 AM
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.
Posted by: rosskennedy Aug 14 2012, 03:38 PM
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
Posted by: pandy Aug 14 2012, 04:46 PM
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.
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.
Posted by: rosskennedy Aug 15 2012, 07:44 PM
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
#services
{...} /* styling for current page */
#services_link
{
color: red
text-transform: upppercase
}
in html page
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
Posted by: pandy Aug 15 2012, 08:12 PM
Nuh. Maybe you aren't familiar with contextual selectors? You must have it like this.
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.
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.
page2 link2 { /* */ }
page3 link3 { /* */ }
page4 link4 { /* */ }
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.
Posted by: Jaycbrf4 Aug 17 2012, 12:55 PM
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>
Posted by: Darin McGrew Aug 18 2012, 02:04 AM
<!-- ... -->
<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>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)