Solved

CSS and PHP

Posted on 2006-07-21
5
519 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
My first jQuery plugin: is the right tutorial missing? 2 115
cookies analysis tools 2 112
The Best Website Creation Tools 14 122
Problem to copy file 14 92
Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
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 …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

710 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