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 Build a Basic PHP Website (2018) Building a Media Library in PHP Adding Active States to the Navigation

Kevin Lothrop
Kevin Lothrop
2,276 Points
Posted by Kevin Lothrop
Kevin Lothrop
2,276 Points

Need Help The underline doesn't turn off.

The active state turns on under the links, but returning to the full category page all the links remain on.

Ahsan Parwez
Ahsan Parwez
3,139 Points
Ahsan Parwez
Ahsan Parwez
3,139 Points

I think you are talking about the link underline is showing? To remove this simply add the below CSS. The CSS will remove underlines and highlight the visited and non-visited links.

<style type="text/css">
a:link    {
  /* Applies to all unvisited links */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            blue;
  } 
a:visited {
  /* Applies to all visited links */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            #f0f;
  } 
a:hover   {
  /* Applies to links under the pointer */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: blue;
  color:            #fff;
  } 
a:active  {
  /* Applies to activated links */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: black;
  color: white;
  } 
</style>
tracythelight
tracythelight
9,973 Points

Hi Kevin,

You may want to post a screen shot of your header.php <ul>... section and the variable assignment section of your: catalog.php, suggest.php, and index.php

The issue may be in one of those places.

1 Answer

Dennis Amiel Domingo
Dennis Amiel Domingo
15,357 Points
Dennis Amiel Domingo
Dennis Amiel Domingo
15,357 Points

Put $section = null; in your catalog.php file, just under $pageTitle = "Full Catalog";.

It should look like this:

<?php 

$pageTitle = "Full Catalog";
$section = null;

if(isset($_GET["cat"])){
    if($_GET["cat"] == "books"){
        $pageTitle = "Books";
        $section = "books";
    } elseif ($_GET["cat"] == "movies"){
        $pageTitle = "Movies";
        $section = "movies";
    } elseif ($_GET["cat"] == "music"){
        $pageTitle = "Music";
        $section = "music";
    } 
}

include("inc/header.php"); ?>

<div class="section page">
    <h1><?php echo $pageTitle; ?></h1>
</div>

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

Since you already have text-decoration set to "none" in your CSS file for your navigation links, it will only change to "underline" when the "on" class is applied to them. And the "on" class is dependent of the $section variable which points to "books, music, etc" when clicked. If there aren't any links clicked, the "on" class is not applied, hence the $section variable is null, defaulting to the initial CSS assignment of text-decoration: none; as shown below:

.header .nav li a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 95px;
    padding: 10px 0 0;
    margin: 28 0 0 35px;
    width: 100px;
    text-align: left;
    background: url('../img/nav5-sprite.png') no-repeat 0px 105px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
}

P.S. I changed the margin and the background url because I was doing the Extra Credit part that time.