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 Casey Runnells
Casey Runnells
Courses Plus Student 5,765 Points

Creating the Menu and Footer render error...

Hi Everyone,

I just finished up with the creating the menu and footer in the beginning php lesson for the Shirts 4 Mike website but the shirts button isn't rendering correctly when I'm on the homepage (see below). I need help figuring out where my error is...

What the render error looks like

Here's my header html/php:

<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">```

Here's my index:

```<?php 
$pageTitle = "Unique T-shirts designed by a frog";
include('inc/header.php'); ?>

        <div class="section banner">

            <div class="wrapper">

                <img class="hero" src="img/mike-the-frog.png" alt="Mike the Frog says:">
                <div class="button">
                    <a href="#">
                        <h2>Hey, I&rsquo;m Mike!</h2>
                        <p>Check Out My Shirts</p>
                    </a>
                </div>
            </div>

        </div>

        <div class="section shirts latest">

            <div class="wrapper">

                <h2>Mike&rsquo;s Latest Shirts</h2>

                <ul class="products">
                    <li><a href="#">
                            <img src="img/shirts/shirt-108.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-107.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-106.jpg">
                            <p>View Details</p>
                        </a>
                    </li><li>
                        <a href="#">
                            <img src="img/shirts/shirt-105.jpg">
                            <p>View Details</p>
                        </a>
                    </li>                               
                </ul>

            </div>

        </div>

<?php include('inc/footer.php'); ?>```

Lastly, this is my shirts.php code:

```<?php 
$pageTitle = "Mike's Full Catalog of Shirts";
$section = "shirts";
include('inc/header.php'); ?>

    <div class="section page">

        <h1>Mike&rsquo;s Full Catalog of Shirts</h1>

    </div>

<?php include('inc/footer.php'); ?>```

Any suggestions?

3 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Casey,

I'm at the beginning of the next stage myself and I guess I never went back to the homepage upon completing that menu and footer stage. I just went and checked my local copy of the site and I'm seeing the exact same error on home page as your screenshot.

Another thing to note is that both the "shirts" and "contact" link are underlined as if they were the active page even though we're on the home page.

I'll try to explain why I think this is happening.

Here's the html output that I see in firebug for the navigation section:

<li class="shirts <br /> <b>Notice</b>: Undefined variable: section in <b>C:\xampp\htdocs\shirts4mike\inc\header.php</b> on line <b>17</b><br /> ">
<li class="contact <br /> <b>Notice</b>: Undefined variable: section in <b>C:\xampp\htdocs\shirts4mike\inc\header.php</b> on line <b>18</b><br /> ">

The php scripts where we are checking the $section variable are throwing an error and that error is being inserted where the php script was which is inside the class attribute value. I think that each part of that error message is now being interpreted by the browser as a class name and it's seeing which css rules match up.

Notice near the end of each error message you see the word "on" which is being interpreted as a class name. Since that class name is supposed to indicate the active page this makes both links underlined even though were on the home page.

The reason for the white background on the shirts page is probably because of the following css rule that appears on line 605 of the supplied css file:

.section.shirts {padding-bottom: 42px; background: #fff;}

If you look back at the php error messages you'll also see that the word "section" appears in the error message. I think this causes that rule to match up because it has both a "shirts" and a "section" class. Hence, we get the white background and bottom padding of 42 px applied to the shirts link. I believe that css is probably for another part of the site but it is being applied here due to the php error message.

I'm not sure if this will be fixed later in the course but I think we have two ways to get rid of it now.

The error messages are happening because we're checking the $section variable on the home page and we never defined it. You could just set the section variable to "home" on the index page.

$section = "home";

Then at least it will be defined even though we don't need it on the home page.

Alternatively, and this may be the safer way, is to check if the variable has been set first before we check if it's equal to something:

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

isset() should be added to the contact link too.

This might be preferable to the first method so that we don't have to remember to set the $section variable on pages that don't use it.

Sorry, for the long-winded post. It seemed shorter in my head.

Casey Runnells
Casey Runnells
Courses Plus Student 5,765 Points

Hey Jason,

Thanks for such a thorough response. Per your suggestion, I added the below code to my header in the index and now the page seems to be displaying properly. 

$pageTitle = "Unique T-shirts designed by a frog";
$section = "home";
if ( isset($section) && $section == "shirts") { echo "on"; };
include('inc/header.php'); ?>```

Also added isset() to the contact page below like you mentioned, was this correct? I don't get any errors..

```<?php 
$pageTitle = "Contact Mike";
$section = "contact";
if ( isset($section) && $section == "contact") { echo "on"; };
include('inc/header.php'); ?>```
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I realize my answer was a bit confusing now. I meant to give two separate solutions and you would use one or the other but not both together. I also wasn't clear on where to put that code with the isset() function. Based on Keith's feedback it seems the solution using the isset() function is the better way to go so I'll clarify that here so you can get your code fixed.

The isset() function was supposed to be added to header.php. This is what the nav portion of header.php should look like:

<ul class="nav">
                <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>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

You should not have added anything to your index.php or contact.php pages.

The beginning of index.php should look like:

<?php
$pageTitle = "Unique T-shirts designed by a frog";
include('inc/header.php');
?>

And the beginning of contact.php should look like:

<?php
$pageTitle = "Contact Mike";
$section = "contact";
include('inc/header.php');
?>

I hope that clears it up.

Ben Rubin
PLUS
Ben Rubin
Courses Plus Student 14,658 Points
Ben Rubin
Ben Rubin
Courses Plus Student 14,658 Points

It looks like something's wrong with your style sheet. Check your style.css file for these lines (around line number 527).

.header .nav li.on a {text-decoration: underline;}
.header .nav li a:hover, .header .nav li a:active {color: #FFE200;}
.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.search a {background-position: 0px -419px;}

You could try downloading the style sheet from one of the later lessons and replacing your style.css file with that one.

Keith Monaghan
Keith Monaghan
9,494 Points
Keith Monaghan
Keith Monaghan
9,494 Points

Jason,

That was a well formed answer! You are correct in your reasoning and in the solution to check whether the sections variable is set.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Thanks for your feedback Keith. I feel my answer was a bit confusing with the two solutions. Do you think the first solution where you set $section="home" is bad practice and should be removed? It seems to be more prone to error because it has to be defined on every single page, whether it's used or not, and you might forget to do it.

I can edit my post to make it clearer for any future readers.