On Mon, 2 Aug 2010, Shortie Designs wrote: > Hi All - I'm new to CSS and would love some help with styling my navigation > links. > > I'm trying to keep the current page navigation link a different colour to > the rest of the navigation link - this way users will know what page they > are on. Ie: if the user is on the 'ABOUT US' page - then the About US link > in the navigation bar is a different colour. I don't want to use JavaScript.
Why do you want a link to the current page? Remove the <A> tags and style it differently. > I tried adding a:active but this just made all the navigation links a > different colour - any clues would be greatly appreciated.! > > Thanks > > Sofia > > shortiedesi...@gmail.com > > > > CSS > > } > > #nav { > > width: 740px; > > height:48px; > > margin: 0px 0px 0px 20px; > > background-image:url(../images/Layout/nav_bar.gif); > > background-repeat:no-repeat; > > display:inline; > > float:left; > > font-family: Verdana, Geneva, Arial, sans-serif; > > color: #FFF; > > > > } > > #nav a{ > > font-size:14px; > > font-style:normal; > > font-family:Verdana, Geneva, Arial, sans-serif; > > display:inline; > > float:left; > > margin-top: 12px; > > margin-right: 0px; > > margin-bottom: 10px; > > margin-left: 0px; > > padding-top: 0px; > > padding-right: 16px; > > padding-bottom: 0px; > > padding-left: 20px; > > border-right-width: 2px; > > border-right-style: inset; > > border-right-color: #FFF; > > color: #FFF; > > } > > > > > > > > #nav a:focus { > > color: #600; > > } > > > > > > #nav a:hover { > > color:#600; > > text-decoration:none; > > } > > > > > > ..lastchild { > > border-right: none 0px !important; > > } /*to keep the border off the last navigation item*/ > > > > > > HTML: > > <div id="nav"> > > <a href="index.html" class="link-two">Home</a> > > <a href="about_viva.html">About VIVA</a> > > <a href="#">Mat Classes</a> > > <a href="#">About Pilates</a> > > <a href="#">Osteoporosis Classes</a> > > <a href="index.html" class="lastchild">Contact</a> > > ______________________________________________________________________ > css-discuss [cs...@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Chris F.A. Johnson, <http://cfajohnson.com> Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/