Solved

CSS and PHP

Posted on 2006-07-21
5
529 Views
Last Modified: 2010-04-06
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
Comment
Question by:Laurent Belin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 13

Expert Comment

by:Mark_FreeSoftware
ID: 17157886

replace

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


with:

if (strpos($link,$page) != 0) {
0
 

Author Comment

by:Laurent Belin
ID: 17159345
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
 
LVL 13

Accepted Solution

by:
Mark_FreeSoftware earned 500 total points
ID: 17159715

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
 
LVL 13

Expert Comment

by:Mark_FreeSoftware
ID: 17471774

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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question