Solved

CSS and PHP

Posted on 2006-07-21
5
474 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:lollodev
  • 3
5 Comments
 
LVL 13

Expert Comment

by:Mark_FreeSoftware
Comment Utility

replace

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


with:

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

Author Comment

by:lollodev
Comment Utility
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
Comment Utility

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
Comment Utility

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
RSS Feeds--IE 13 150
Removing Flash from Website 6 38
RSS Feed Validation 2 49
Getting attribute Values using xslt 4 34
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now