Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 571
  • Last Modified:

CSS and PHP

Hi,

I'm trying to build a css menu for php page.  I would like to have the current tab of the menu "selected" so that people know what page they're on?
Some how I can't get the CSS part working.  What I'm doing wrong?

Thanks,
-L.



<?
$page="link2.php";

function get_navigation($page) {


$page = str_replace('.php', '', $page);
$nav = array("<a href='link1.php'>One</a>","<a href='link2.php'>Two</a>","<a href='link3.php'>Three</a>");

echo "<ul id='nav'>";
foreach ($nav as $link) {
echo "<li";

if (preg_match("/($page)/i", $link)) {
echo " class='active'";
}
echo ">$link</li> \n";
}
echo "</ul>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>menu activator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body {
      font-family: arial, verdana, sans-serif;
      font-size: 12px;
      background: #eeeeee;
      }

h3 {
      font-size: 130%;
      }

h4 {
      font-size: 100%;
      color: #999;
      margin: 0;
      }

.container {
      width: 500px;
      padding: 15px;
      margin: 3px 0 20px 0;
      border: 1px solid #ccc;
      background: #fff;
      }

/* rounded */

#nav {
      margin: 0;
      padding: 0 0 20px 10px;
      border-bottom: 1px solid #9FB1BC;
      }

#nav li {
      margin: 0;
      padding: 0;
      display: inline;
      list-style-type: none;
      }
      
#nav a:link, #nav a:visited {
      float: left;
      font-size: 12px;
      line-height: 14px;
      font-weight: bold;
      padding: 0 12px 6px 12px;
      text-decoration: none;
      color: #708491;
      }

#nav a:link.active, #nav a:visited.active, #nav a:hover {
      color: #000;
      background: url(tab_rounded.gif) no-repeat bottom center;
      }

ul#nav li.active{
color: #000;
      font-size: 14px;
      background: url(tab_rounded.gif) no-repeat bottom center;


#footer {
      color: #999;
      }
-->
</style>
</head>

<body>



<h4>Menu</h4>

<div class="container">
<?



get_navigation($page);

?>



</div>




<p id="footer">
Lollo test
</p>

</body>
</html>
0
Laurent Belin
Asked:
Laurent Belin
  • 3
1 Solution
 
Mark_FreeSoftwareCommented:

replace

if (preg_match("/($page)/i", $link)) {


with:

if (strpos($link,$page) != 0) {
0
 
Laurent BelinAuthor Commented:
I tried changing the bit of code but nothing changed.  When I am on page link2.php the menu doesn't highlight the menu item.

Looking at the html everything seems correct (the PHP part is working fine) but the CSS part doesn't change the menu item.

Please let me know if you have other ideas on how to fix this.

Thanks,
-L.
0
 
Mark_FreeSoftwareCommented:

this is your new get_naviagation code:

function get_navigation($page) {
      $page = str_replace('.php', '', $page);
      $nav = array("href='link1.php'>One</a>","href='link2.php'>Two</a>","href='link3.php'>Three</a>");

      echo "<ul id='nav'>";
      foreach ($nav as $link) {
            echo "<li><a";
            if (strpos($link,$page) != 0) {
                  echo " class='active' ";
            }
            echo "$link</li> \n";
      }
      echo "</ul>";
}
0
 
Mark_FreeSoftwareCommented:

i think i deserve points because i found the solution he was asking for

i tested it on my own server, and it worked....
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now