Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Erin Manahan
Erin Manahan
20,413 Points

Stage 2 Active States CSS help

As I was following along, adding the same code to my text editor as in the video, my css started behaving weirdly. After adding the php to the header page

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

it created a large white area around the shirts link in the header that made the entire header longer, but only on the index and contact pages. On the shirts page itself the header is fine. When I took out the php, the styling went back to normal.

I continued and added the php to contact.php and it didn't affect the css.

After completing the video I put the php in again, the white area appeared again, but I hoped to change the css itself as the extra credit for the section was to add another page and fix the css to make it fit. I was able to change the positions to make room for the new link in the header, but I still couldn't figure out how to change the white area from appearing on the index and contact pages.

Does anyone know what would cause this to happen or how to fix it?

2 Answers

Hi Erin,

The $section variable is undefined on the home page but the navigation scripts are still running on that page. A notice error is generated to indicate you're trying to use an undefined variable. This produces the unintended styling you see.

I recommend that you first check if the variable is set first so that you don't generate this notice error on pages that don't need to use the $section variable.

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

This is a minor detail and I don't think it will cause any problems if you don't do this but I have changed where the space is between the class names. This is different from the video. I removed the space after the shirts and contact class names and instead put the space before on This is so you don't have an extra space after the "shirts" or "contact" class when you're not outputting the "on" class.

Erin Manahan
Erin Manahan
20,413 Points

It worked! Thanks so much!