PHP Build a Basic PHP Website Building a Media Library in PHP Adding Active States to the Navigation

Sean Flanagan
Sean Flanagan
31,096 Points

Extra credit

Hi.

I'm stuck on the Extra Credit challenge Alena Holligan has given us for this Stage.

https://teamtreehouse.com/library/build-a-basic-php-website

I've created a new file called about.php. Then I went to header.php and added this line:

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

I'm not sure how to create an icon, or to modify the CSS file to display it or make room for it in the menu.

Here's a snapshot of my workspace.

https://w.trhou.se/cz79dng2v3

Thanks in advance for any help.

2 Answers

Alena Holligan
STAFF
Alena Holligan
Treehouse Teacher

To add the word "About" you'll need to add it between the "a" tags.

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

To add an image, you'll have to upload a new image and then change the CSS. In css/styles.css look at the following items for examples:

.header .nav li a {
    ....
}

Because we've use the same image in different position, we changed the position as follows:

.header .nav li.books a {background-position: 8px -5px;}
.header .nav li.movies a {background-position: 13px -105px;}
.header .nav li.music a {background-position: 15px -235px;}
.header .nav li.suggest a {background-position: 35px -340px;}
Sean Flanagan
Sean Flanagan
31,096 Points

So if I put something like

.header .nav .li.about a {background-position: 55px -450px;}

would that work?

Alena Holligan
Alena Holligan
Treehouse Teacher

there isn't an image for the about page, so you'd have to upload your own image if you want one