The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> CSS Navigation bar help requested, trying to have menu buttons change for active page
rosskennedy
post Aug 12 2012, 08:32 PM
Post #1





Group: Members
Posts: 7
Joined: 5-March 12
Member No.: 16,640
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 */
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Darin McGrew
post Aug 18 2012, 02:04 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
QUOTE
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
rosskennedy   CSS Navigation bar help requested   Aug 12 2012, 08:32 PM
pandy   Visited seems to work, but active doesn't. Tha...   Aug 12 2012, 08:41 PM
rosskennedy   Visited seems to work, but active doesn't. Th...   Aug 12 2012, 10:43 PM
pandy   You misunderstand what :active means. It doesn...   Aug 13 2012, 12:36 AM
rosskennedy   You misunderstand what :active means. It doesn...   Aug 14 2012, 03:38 PM
pandy   An easy way to do that is to give each link their ...   Aug 14 2012, 04:46 PM
rosskennedy   An easy way to do that is to give each link their...   Aug 15 2012, 07:44 PM
pandy   Nuh. Maybe you aren't familiar with contextual...   Aug 15 2012, 08:12 PM
Jaycbrf4   You need to assign the class of "current...   Aug 17 2012, 12:55 PM
Darin McGrew   That's one way to do it. The way that pandy wa...   Aug 18 2012, 02:04 AM

« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 09:56 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC