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 james taylor II
james taylor II
2,618 Points

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

james taylor II
james taylor II
2,618 Points

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
Chase Lee
Chase Lee
29,275 Points

Are you sure? It worked for me.

james taylor II
james taylor II
2,618 Points
james taylor II
james taylor II
2,618 Points

.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
Chase Lee
Chase Lee
29,275 Points

So the class for the link is . companyInfo?

james taylor II
james taylor II
2,618 Points
james taylor II
james taylor II
2,618 Points

yes

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Try putting center at the end.

james taylor II
james taylor II
2,618 Points
james taylor II
james taylor II
2,618 Points

no luck

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
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?

james taylor II
james taylor II
2,618 Points
james taylor II
james taylor II
2,618 Points

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

james taylor II
james taylor II
2,618 Points
james taylor II
james taylor II
2,618 Points

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