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

creating the header and footer in PHP

how to add a background image to the nav for new nav link for shirts 4 mike?

Im trying to do the extra credit for the "creating the header and footer badge"

any suggestions?

12 Answers

Chase Lee
Chase Lee
29,275 Points

In this case you'll want to give your link a class, (making sure nothing else in the site has that class), and then give it a background image like this:

.new_page{
    background: url('img/image_name.jpg, png, etc') repeat or not and position
}

Does that make any sense or even answer your question?

I just tried that method but it didnt work. Idk if you have done this excercise or not but if youare then you know that i'm trying to add an icon similar to how the shirt image is with the shirts link and how the phone/device image is with the contact link. I honestly dont understand how treehouse got those icons to work.

Chase Lee
Chase Lee
29,275 Points

Are you sure? It worked for me.

.companyInfo {background: url('../img/info_icon_.jpg') no-repeat; } Here is the code i tried to use. does it look okay?

Chase Lee
Chase Lee
29,275 Points

So the class for the link is . companyInfo?

yes

Chase Lee
Chase Lee
29,275 Points

Try putting center at the end.

no luck

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

Try adding a color to it to see if the CSS rule is being applied:

.companyInfo {background: green url('../img/infoicon.jpg') no-repeat; } 

Any luck?

Yeah the css rule isn't being recognized, i'm not sure what i'm doing wrong

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

Are any of the rules in the CSS file getting applied? (If you have you added this new line of CSS to the existing style.css, then it should be.) If so, would you mind pasting the whole HTML file and the specific CSS rule that is not working here? I suspect that your selector isn't quite matching the element for some reason.

Take care, ~randy

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

    </div>

</div>

<div id="content">;

<!--The header php -->

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

    </div>

</div>

<div id="content">;
Chris Dziewa
Chris Dziewa
17,781 Points

I hope that you were able to figure this out. Otherwise, it appears that in your third < li > tag, where the class says "info", the class attribute should be typed just as you declared it in the css file, but without the period, like this:

html
<li class="companyInfo <?php if ($section == "companyInfo") {echo "on";} ?>"><a href="../companyInfo.php">Company Info</a></li>