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

Posted by Vadim Abramov
Vadim Abramov
Courses Plus Student 6,771 Points

Creating the Menu and Footer Extra Credit Help

Extra Credit Add another page to the menu for something like "Company Information." You'll need to complete the following steps:

Create a new PHP file for the page, making sure to set the $section variable. Modify header.php to display the new menu item, making sure that it is underlined when someone is on the new page. Create an icon for the menu item. Modify the CSS file to display that new icon, as well as to make room for the extra item in the menu.

I have started this assignment and I am stuck in understanding how to get this done. I have created a new PHP file called information.php

Here is the code for that page:

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

        <div class="Information">

            <h1>Information</h1>

        </div>

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

I have also modified the unordered list in header.php to list information in the nav Here is the code for that:

 <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="Information <?php if ($section == "Information") { echo "on"; } ?>"><a href="Information.php">Information</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

My webpage now displays the link Information next to contact and shirts. However, the link is broken and I am also not able to get my icon positioned underneath it like shirts and contact have. I am lost in the CSS file in terms of where this code should go and what exactly I should tell it to do.

Any help would be much appreciated.

4 Answers

Kazimierz Matan
Kazimierz Matan
13,257 Points

CSS - in style.css file, lines ca. 529-531 (probably), there are declarations of header nav links:

.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 have to add your code here and combine it together to achieve what you expect.

Broken link to information.php (use the same capitalization in all links): Remember that both shirts.php and contact.php are in fact not real files but redirections: shirts.php is a redirect to shirts/index.php and contact.php is a redirect to contact/index.php. Look into .htaccess file:

RewriteRule ^contact.php$ /contact/ [R=301]
RewriteRule ^shirts.php$ /shirts/ [R=301]

You can add a new rule for information.php (if you create informations folder, move the file there and rename it to index.php).

Above suggestions refer to the final version of shirts4mike project. Some of them can be inadequate to your version. You have to figure it out yourself.

Rhys Baker
Rhys Baker
8,200 Points
Rhys Baker
Rhys Baker
8,200 Points

Vadim, how did you add the icon to the sprite? I'm trying to do it with a separate .png and getting nowhere.

Vadim Abramov
PLUS
Vadim Abramov
Courses Plus Student 6,771 Points
Vadim Abramov
Vadim Abramov
Courses Plus Student 6,771 Points

I figured out what was wrong with my broken link. My new PHP file (Information.php) wasn't in the main HTDOCS folder. I transferred it to there and it started working right away.

The problem I have now is that I have added my icon to the sprite that was created for the nav. However, I have no idea how to adjust the images within the sprite via CSS in order to have them positioned in the correct places.

Jackline KInyanjui
Jackline KInyanjui
13,216 Points

@Vadim,kindly do share on how you added your icon to the sprite.I am totally stuck on trying to do that.Thanks

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

I have the same problem as Vadim. Only that I have my Information file in the HT docs and it doesn't work when I click on the link.

The information page is called CompanyInformation.php

<?php
$pageTitle = " Information about the Company";
$section = "Company Information";
include('include/header.php');?> 

<div class = "Information">
    <h1>Information about the company</h1>

</div>
<?php 
include("include/footer.php");
?>

the unordered list that I modified in header.php

<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 nene"){ echo "on"; }?>"><a href="contact.php">Contact</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
                <li class= "information <?php if ($section == "Company Information"){echo "on"; } ?>"><a href="CompanyInformation.php">Company Information</a></li>
            </ul>

In the style.css file, around lines ca. 529-531, I added this for the Company Information Page. I am not sure if it is right

.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.information a {background-position: 0px -105px;}
Elena Paraschiv
Elena Paraschiv
9,938 Points

This is how the page appears. You can see that the Company Information appears Imgur

When I click it, an error appears Imgur

this is how it appears on sublime. As you can see, the file is inside the htdocs: Imgur

Any help is appreciated.