CSS Navigation bar help requested, trying to have menu buttons change for active page |
CSS Navigation bar help requested, trying to have menu buttons change for active page |
rosskennedy |
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 */ |
Darin McGrew |
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"> 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.<!-- ... --> <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> |
Lo-Fi Version | Time is now: 23rd April 2024 - 06:26 PM |