CSS 'active' does not work when converting HTML to PHP include

Question

I realize a 'similar' question was asked but the other user is using a much different approach than I am. I am simply trying to include an HTML navigation on my PHP pages for easier modification down the road. When you hover over a button, it is highlighted while the 'active' page is always highlighted. The hover works on both the html and php pages.

When my index page is coded as index.html, the 'active' state works. When i run it as index.php, it does not.

Header.html

  <div class="header_resize">
    <div class="header">
      <div class="logo"><a href="index"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index.php"><span>Home Page </span></a></li>         
          <li><a href="portfolio.php"><span>Services</span></a></li>
          <li><a href="portfolio.php"><span>Portfolio</span></a></li>          
          <li><a href="about.php"><span> About Us </span></a></li>
          <li><a href="contact.php" class="active"><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>

CSS:

/*menu*/
.menu { padding:38px 0 0 0; margin:0; width:480px; float:right; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:right; }
.menu ul li { float:left; margin:0; padding:0 5px; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(../images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(../images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(../images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(../images/l_menu.gif) no-repeat left; }

As I mention above, if the link above in header.html are coded as (page.html), the "active hover" works. What gives?

RESOLUTION

For those interested, thanks to Kirkby's help, I recreated the Header.html file, saved it as PHP and utilized Request_URI functionality. The changes look like:

  <div class="header_resize">
    <div class="header">
      <div class="logo"><a href="index"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index" <?php if($_SERVER["REQUEST_URI"] == "/index") { echo 'class="active"';} ?>><span>Home Page </span></a></li>
          <li><a href="about" <?php if($_SERVER["REQUEST_URI"] == "/about") { echo 'class="active"';} ?>><span> About Us </span></a></li>          
          <li><a href="portfolio" <?php if($_SERVER["REQUEST_URI"] == "/portfolio") { echo 'class="active"';} ?>><span>Services</span></a></li>
          <li><a href="enroll" <?php if($_SERVER["REQUEST_URI"] == "/enroll") { echo 'class="active"';} ?>><span>Enroll</span></a></li>
          <li><a href="contact" <?php if($_SERVER["REQUEST_URI"] == "/contact") { echo 'class="active"';} ?>><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>

Answer 1

How do you add the class="active" to the correct button when you're including an HTML file in a PHP page? From your example, it looks like the HTML header file you're including has the Contact Us button active, and it would be that way for all pages.

You'll either need to have some PHP code in your header to add the class="active" to the correct button, or use javascript in the browser to add the class to the correct button for each page. When I write a header in an include file, I usually create a function with a parameter for selecting the current tab in the navigation section. Then I call that function from the appropriate place in the main page.