Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I Highlight the Active Tab (from my template)

    I know very little about CSS code and building websites. But I've been able to figure out a bit and change my website that started with a GoDaddy template. Because I haven't built the whole thing I'm having trouble figuring out how to change the color of the current tab. I was able to use the active code to change the color when you click on it but then I'd like it to stay highlighted. Any help is appreciated. I understand if this is too elementary to respond to. Here's the code in my template:

    .sf_navigation_top {
    clear: both;
    height: auto;
    margin: 50px 0px 0px 0px;
    width: 950px;
    background-color: #666666;
    position: absolute;
    text-align: right;
    }

    .sf_navigation_top ul {
    margin: 0 0px 0 0px;
    height: 1%;
    padding-left: 0;
    list-style-type: none;
    }

    .sf_navigation_top ul:after {
    content: ".";
    display: block;
    visibility: visible;
    height: 0;
    font-size: 1px;
    clear: both;
    }

    .sf_navigation_top ul li {
    width: auto !important;
    width: 5px;
    white-space: nowrap;
    float:left;
    }

    .sf_navigation_top ul li.sf_last_nav_item {
    }

    .sf_navigation_top ul li.sf_first_nav_item {
    }

    .sf_navigation_top ul li a {
    text-decoration: none;
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    padding: 10px 19px 10px 19px;
    }


    .sf_navigation_top ul li a:visited {
    }

    .sf_navigation_top ul li a:hover {
    background-color: #424242;
    color: #ffffff;
    }

    .sf_navigation_top ul li a:active {
    background-color: #000000;
    color: #ffffff;
    }


    THANK YOU!

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You can assign a class to the <a> tag when it is the "current" page. You can even assign multiple classes to a single element in the HTML if you need to. Then you just make a CSS rule to style up the "current" link. It can be done any number of ways, but in its most basic form it might look something like this:

    HTML:
    Code:
    <div class="sf_navigation_top">
      <ul>
        <li><a href="">Link Text Here</a></li>
        <li><a href="" class="current">Link Text Here</a></li>
        <li><a href="">Link Text Here</a></li>
        <li><a href="">Link Text Here</a></li>
        <li><a href="">Link Text Here</a></li>
      </ul>
    </div>

    CSS:
    Code:
    .sf_navigation_top ul li a {
    text-decoration: none;
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    padding: 10px 19px 10px 19px;
    }
    
    .sf_navigation_top ul li a.current {
    background-color:#f00;
    }
    If you can provide a link to your test page I can provide a more specific answer to the question.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •