Changing menu color

rocdred

Greetings all!

I am sure this has been asked and answered many times, but searches gave me so many things to look at, i could be here a month!

Probably quicker to ask my own version..

Webpage has a top menu bar that's got simple silver bg images. The active page is blue, and hover changes to blue.

I created a simple php link to import the menu, but i'm not sure how to make the blue carry from one page to another. For now i simply made 5 pages and moved the code that makes it blue.. Now, how can i make it follow the correct page?

Based on being on the products page: home... top sellers ... products (blue)

how can i make "home" blue when on home and 'top sellers' blue when on top sellers, retc..

Here's the code I have.:

      <li style="width:175px;">
        <div align="center"><a href="index.php" >Home</a></div>
      </li>
      <li><img src="images/nav-line.jpg" width="2" height="37" /></li>
      <li style="width:227px;">
        <div align="center"><a href="top-sellers.php" >Top Sellers&nbsp;</a></div>
      </li>
      <li><img src="images/nav-line.jpg" width="2" height="37" /></li>
      <li style="width:215px;">
        <div align="center"><a href="products.php" style="background-image:url(images/nav-bg-hover.jpg); background-repeat:repeat-x; color:#FFFFFF;">Products &nbsp;</a></div>
      </li>
      <li><img src="images/nav-line.jpg" width="2" height="37" /></li>

this is from the products page.. how can i set up something that would move the 'style='baground-image...' to move from home to top sellers to products etc based on the page clicked?

Thanks for your help! 🙂

djp122

You can use cascading style sheets (CSS) to get the layout you want for your menu bar. All you need to do is make a css page and put a link to that page on the pages.
This is how you would do it:

Make a CSS Page (to learn how go here:http://www.w3schools.com/css/)

Make a link on all the pages you want that style to be on.
Like this:

<link rel='stylesheet' href='styles/styles.css' type='text/css' media='screen' />

That will make all of you headers the same.