Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member Karloff's Avatar
    Join Date
    Oct 2005
    Posts
    744
    Member #
    11702
    i'm trying to get this page to have the 'active' link (ie 'home 'in this case) to have a white background but i can't seem to get it. been messing about with the code but getting nowhere. here's the link.....



    I basically want to achieve having li background color = white for whatever page ur on.

    heres the code
    HTML Code:
      <div id="navcontainer"> 
        <ul id="navlist">
          <li id="active"><a href="home2.htm">Home</a></li>
          <li id="enquiries"><a href="Enquiries.php">Enquiries</a></li>
          <li id="aboutus"><a href="About.htm">About us</a></li>
          <li id="findus"><a href="find.htm">Find Us</a></li>
          <li id="history"><a href="history.htm">History</a></li>
          <li id="thearea"><a href="area.htm">The Area</a></li>
          <li id="tariff"><a href="tariff.htm">Tariff</a></li>
          <li id="offer"><a href="offer.htm">Special Offer</a></li>
        </ul>
      </div>
    and the css
    HTML Code:
    #navcontainer {
               width : 675px;
               height : 24px;
               background-color : #336600;
    }
    #navcontainer UL {
               list-style : none;
               margin : 0;
               padding : 0;
               border : none;
    }
    #navcontainer LI {
               display : block;
               margin : 0;
               padding : 0;
               float : left;
    }
    #home {width: 60px;}
    #enquiries {width: 85px;}
    #aboutus {width: 90px;}
    #findus {width: 72px;}
    #tariff {width: 65px;}
    #thearea {width: 90px;}
    #history {width: 70px;}
    #offer {width: 105px;}
    
    #navcontainer A {
               color : white;
               display : block;
               height : 20px;
               width : auto;
               text-decoration : none;
               background-color : #336600;
               margin : 0;
               padding : 2px 10px;
    }
    #navcontainer A:hover{
               color : #336600;
               background-color : #fff;
               background-repeat : repeat-x;
    }
    #navcontainer active {
               color : #336600;
               background-color : #fff;
               background-repeat : repeat-x;
    }
    btw i'm sorry if the code is really messy, any suggestions would be great, hitting a brick wall with this 1...... and i thought it would be easy
    Last edited by Karloff; Sep 12th, 2013 at 12:25 PM.

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Here is a simple solution, but I am going to suggest something, in case it gets more complicated:

    Code:
    #navcontainer li #active{
       color: #360;
       background-color: #fff;
    }
    Where it will get complicated:
    Each of your buttons is defined by a width, so if you remove the id="home" and replace it with id="active" the background will only go as wide as the word, not extend to the widths of your defined layout.

    Solution:
    Make "active" a class. You'd might have to play with the location. If it does weird things with the rollover on the <li> it may have to go on the <a> to overwrite the a styles.

    CSS:
    Code:
    #navcontainer li .active{
       color: #360;
       background-color: fff;
    }
    HTML Code:
    <div id="navcontainer">
      <ul id="navlist">
          <li id="home"><a class="active" href="home2.htm">Home</a></li>
          <li id="enquiries"><a href="Enquiries.php">Enquiries</a></li>
          <li id="aboutus"><a href="About.htm">About us</a></li>
          <li id="findus"><a href="find.htm">Find Us</a></li>
          <li id="history"><a href="history.htm">History</a></li>
          <li id="thearea"><a href="area.htm">The Area</a></li>
          <li id="tariff"><a href="tariff.htm">Tariff</a></li>
          <li id="offer"><a href="offer.htm">Special Offer</a></li>
      </ul>
    </div>
    Unsolicited CSS tips:
    - Avoid using uppercase letters, XHTML is about all lowercase, so it's a good habit to get into.
    - Any "Web-Safe" colors can take a three character color (#360=#336600)
    - If you are using a background color, there is no need for a repeat. Background-repeat is applied to background images.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Senior Member Karloff's Avatar
    Join Date
    Oct 2005
    Posts
    744
    Member #
    11702
    hey,

    sorry for the delay in the reply.

    That worked a treat! thanks!

    i'll take on board the CSS tips you left me aswell.

    Cheers


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com