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
Erin Manahan
20,413 PointsStage 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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
20,413 PointsIt worked! Thanks so much!