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

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

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>

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
13,403 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.