www.webdeveloper.com
Results 1 to 6 of 6

Thread: How do i change tab colour

  1. #1
    Join Date
    Jun 2009
    Posts
    26

    How do i change tab colour

    www.elitetradesmen.com

    Above is a link to my site, in respects of design i think its pretty much done. The one thing i'm struggling with is that i want the tabs at the top which show the links to pages to change colour depending on what page your on. So lets say i'm on the area page the area tab at the top will be a dark grey the same as the page and all other tabs will be a lighter colour.

    One problem i see though is that not all my pages have a tab at the top. How do i get round this as when i'm on when of these pages i'm not sure what to do with the tabs.

  2. #2
    Join Date
    Jun 2009
    Posts
    111
    Just apply a .current class to the tab that matches the page you're on, and style it with a different background image.

    By the way, those links should be in a list! A List Apart: Taming Lists

    EDIT: And if you're on a page that doesn't really fall under any of the tab categories, just don't use .current on any of the tabs.

  3. #3
    Join Date
    May 2009
    Posts
    27
    add to styles.css
    Code:
    #nav a.current {
    	background-image:url(./images/current.gif);
    	color:#918A70;
    }
    
    #nav  a.current:hover {
    	color:#918A70;
    }
    add to each of your pages:
    Code:
    	<div id="nav">
    		<a href="index.html">Home</a>
    		<a href="quotes.html">Submit Quote</a>
    		<a href="registration.html">Registration</a>
    		<a href="quotes.html">Our Policies</a>
    		<a class="current" href="contact.html">Contact Us</a>
    </div>
    Where class="current" is on the page that you are adding.

    Put this image in your images directory:
    http://icandobetter.110mb.com/images/current.gif

  4. #4
    Join Date
    May 2009
    Posts
    27
    Also, not sure if you have noticed, but your NAV links are not in good shape. Should be the same 5 tabs up there on each page.

    http://www.elitetradesmen.com/searchtrades1.html
    Has "Our policy" tab linked to trades.html

    It is very confusing for users to have those tabs changing.

    And just a design fyi, the graphic in the bottom left should not be black on such a dark background. Would look better if the whole graphic was the same color as the "I" in that graphic.

  5. #5
    Join Date
    Jun 2009
    Posts
    26
    Still trying to work out how to make my tabs stand out when i'm on a certain page. Here is the code i've come up with but i've clearly done something wrong as it doesn't work.

    css.

    #nav a {
    background-image:url(images/menu.gif);
    width:90px;
    height:19px;
    display:inline;
    float:left;
    font-family: Verdana;
    font-size: 10px;
    text-align:center;
    padding-top:6px;
    text-decoration:none;
    color:#e9e4d0;
    font-weight:bolder;
    }

    #nav a.current {
    background-image:url(images/menu2.gif);
    color:#918A70;
    }

    #nav a.current:hover {
    color:#918A70;
    }


    html.

    <div id="wrapper">
    <h1>Elite tradesmen</h1>
    <div id="nav">
    <a href="index.html">Home</a>
    <a href="quotes.html">Submit Quote</a>
    <a class="menu2" href="registration.html">Registration</a>
    <a href="policies.html">Our Policies</a>
    <a href="contact1.html">Contact Us</a>
    </div>

  6. #6
    Join Date
    May 2009
    Posts
    27
    Code:
    <div id="wrapper">
    <h1>Elite tradesmen</h1>
    <div id="nav">
    <a href="index.html">Home</a>
    <a href="quotes.html">Submit Quote</a>
    <a class="menu2" href="registration.html">Registration</a>
    <a href="policies.html">Our Policies</a>
    <a href="contact1.html">Contact Us</a>
    </div>
    Change menu2 to current

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles