I've launched a website a while back and successfully used Javascript + CSS to highlight the current page on the navigation. However, it is not working
in Safari and it does not validate well, when using Javascript, so I decided to have
PHP assign the CSS id to the HTML elements. So far, it works fine, compared to the other times where there was two of each link displayed, when it was attempted
in PHP. My problem is that all links look normal and the CSS property is not applied. I have a feeling that it has to do with my
PHP code, but I'm not certain.
The site address is here
As for the
PHP code, here it is:
<?php
echo('<li><span class="bold">Main</span>');
echo('<ul>');
if ($page=="home")
{
echo('<li><a id="current" href="index.shtml">Home</a></li>');
}
else
{
echo('<li><a href="index.shtml">Home</a></li>');
}
if ($page=="faq")
{
echo('<li><a id="current" href="faq.shtml">FAQ</a></li>');
}
else
{
echo('<li><a href="faq.shtml">FAQ</a></li>');
}
if ($page=="about")
{
echo('<li><a id="current" href="about.shtml">About Bryce</a></li>');
}
else
{
echo('<li><a href="about.shtml">About Bryce</a></li>');
}
echo('<li><a href="contact.
php">Contact Bryce</a></li>');
if ($page=="sign guestbook")
{
echo('<li><a id="current" href="sign.shtml">Sign Guestbook</a></li>');
}
else
{
echo('<li><a href="sign.shtml">Sign Guestbook</a></li>');
}
if ($page=="view guestbook")
{
echo('<li><a id="current" href="view.shtml">View Guestbook</a></li>');
}
else
{
echo('<li><a href="view.shtml">View Guestbook</a></li>');
}
echo('</ul>');
echo('</li>');
echo('<li><span class="bold">Info</span>');
echo('<ul>');
if ($page=="projects")
{
echo('<li><a id="current" href="projects.shtml">Projects</a></li>');
}
else
{
echo('<li><a href="projects.shtml">Projects</a></li>');
}
if ($page=="books")
{
echo('<li><a id="current" href="books.shtml">Books</a></li>');
}
else
{
echo('<li><a href="books.shtml">Books</a></li>');
}
echo('</ul>');
echo('</li>');
echo('<li><span class="bold">Misc.</span>');
echo('<ul>');
if ($page=="cover designs")
{
echo('<li><a id="current" href="coverdesigns.shtml">Cover Designs</a></li>');
}
else
{
echo('<li><a href="coverdesigns.shtml">Cover Designs</a></li>');
}
echo('<li><a target="_blank" href="http://www.lulu.com/brycecampbellsbooks">Lulu Store</a></li>');
echo('<li><a href="rss/">RSS</a></li>');
echo('</ul>');
echo('</li>');
?>
In order to give you guys an idea of what the highlighting effect should look like, here is the CSS that is supposed to be applied to the current page:
#current {
font-style: italic;
text-decoration: none;
color: #000000;
}
When looking up what I was doing wrong, it told me that I was implementing it right, but it does not seem that the
PHP is getting the values.
