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
>
> [email protected]
>
>
>
> 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 [[email protected]]
> 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 [[email protected]]
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/
