Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP Build a Simple PHP Application Creating the Menu and Footer Adding Active States to the Navigation

Posted by Jerome Obba
Jerome Obba
7,384 Points

Question on “Active States to the Navigation”

I am trying to understand this code taken from the header.php file.

<li class="shirts <?php if ($section == "shirts") { echo "on"; } ?>">
<a href="shirts.php">Shirts</a></li>

I am puzzled as to what "on" is supposed to be? I went through the transcript, which says "on" is a class.

Looking at the header.php file

I can't see any HTML that says anything like

<div class='on'  >

I looked at the CSS file. (called "style.css", which is linked to header.php).

I found this line of code (line no: 527)

.header .nav li.on a {text-decoration: underline;}

I understand that the CSS code is supposed to underline the link (anchor).

This is what I managed to figure out from that line of CSS code.

1) header is a class. 2) nav is a class 3) li is a list element 4) on is ?? 5) a is an anchor (link).

(I worked this out from looking at the header.php file)

“on ” is supposed be a class, but there is no html code to explicitly state that. So how does the CSS code target that element? How does CSS recognise that "on" is a class?

Thanking you in advance for your help.

auchomage Here is the code for the header.php file

<html>
<head>
    <title><?php echo $pageTitle; ?></title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div class="header">

        <div class="wrapper">

            <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

            <ul class="nav">
                <li class="shirts <?php if ($section == "shirts") { echo "on"; } ?>"><a href="shirts.php">Shirts</a></li>
                <li class="contact <?php if ($section == "contact") { echo "on"; } ?>"><a href="contact.php">Contact</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

        </div>

    </div>

    <div id="content">
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I would recommend that you update your if statement to make sure the variable has been set first, before trying to compare it to something.

If you go to the home page after completing this video you will see the problem. The scripts in the nav generate errors and those errors cause unwanted styling to appear in your navigation. The errors are generated because $section is an undefined variable on that page because we're not using it there. Parts of the error message end up matching up with class names in the css and so those styles end up getting applied to those li elements.

<li class="shirts<?php if ( isset($section) && $section == "shirts") { echo " on"; } ?>"><a href="shirts.php">Shirts</a></li>
<li class="contact<?php if ( isset($section) && $section == "contact") { echo " on"; } ?>"><a href="contact.php">Contact</a></li>

4 Answers

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

on is a css class that is added dynamically to the list item depending on the section name.

<li class="shirts <?php if ($section == "shirts") { echo "on"; } ?>">

so in this case if your $section variable was $shirts the html that would be rendered would be:

<li class="shirts on">

and that li would be underlined since thats how the on class is defined in your CSS. it underlines the li so you know which page you are on

Jerome Obba
Jerome Obba
7,384 Points
Jerome Obba
Jerome Obba
7,384 Points

Stone, thank you very much. I can now understand that.

Thank you also for the quick reply, it is much appreciated.

Jeff Busch
Jeff Busch
19,287 Points

Ya that sucker had me goin' for a couple hours.

Jerome Obba
Jerome Obba
7,384 Points
Jerome Obba
Jerome Obba
7,384 Points

@ Jeff Busch, I really have to pay close attention when the languages are mingled, and really work out what is going on at each step. Thankfully you guys have made me aware of that.

Jerome Obba
Jerome Obba
7,384 Points
Jerome Obba
Jerome Obba
7,384 Points

@Jason Anello, many thanks for the answer, I will definitely check to see that the variable is set beforehand.

The answers provided have helped me resolve the problem I was having.

Thank you everyone.