CODEWITHSUNDEEP
htmlcss
Piratenlulatsch
Piratenlulatsch

Reputation: 75

CSS a.active not working

I have a Navigationbar at the top of my Page and the active Page should have another background color. I have the color and red right now, so its obvious to see. But no red on the Page.

My HTML:

<body>

<ul>
  <li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="index.php">Login</a></li>
  <li class="<?= ($activePage == 'Login') ? 'active':''; ?>"><a href="Login.php">Profil</a></li>
  <li class="<?= ($activePage == 'Profilchange') ? 'active':''; ?>"><a href="Profilchange.php">Profil bearbeiten</a></li>
  <li class="<?= ($activePage == $Profilkennungbasename) ? 'active':''; ?>"><a href='http://localhost/PHPOrdner/Login/<?php echo $Profilerow; ?>'>öffentliches Profil</a></li>
  <li style="float:right;" class="<?= ($activePage == 'Logout') ? 'active':''; ?>"><a style="background-color:#002b80" href="Logout.php">Ausloggen</a></li>
</ul>
<br>

My CSS:

    <style>

  body {
    font-family: "Arial", Sans-serif;
  }

  input[type=submit] {
    background-color: #000099;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    width: 13.5%;
    cursor: pointer;
  }

  input[type=submit]:hover {
    background-color: #000066;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000099;
  }

  li {
    float: left;
  }

  li:last-child {
    border-left: 1px solid #bbbbbb;
  }

  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 1px solid #bbbbbb;
  }

  li a:hover {
    background-color: #000066;
  }

  li a.active {
    background-color: #FF0000;
  }

  a:link, a:visited {
    background-color: #000099;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    width:200px;
  }

  a:hover {
    background-color: #000066;
    cursor: pointer;
  }

</style>

I am still very new to HTML, CSS and PHP, so i guess it's obvious. :D

Upvotes: 1

Views: 2838

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

You are adding active class on the li element and not on the a so the selector should be

li.active a {
  /* styles goes here */
}

In the above selector, I select the li element having a class of active and then we select the a nested inside this li

One more thing I see in your code is that you are using inline styles like style="background-color:#002b80", so if you are going to use inline styles, they will override your CSS rule declarations as inline styles are most specific.

You either need to override them using !important or you need to move them to a class and append the class to the respective element.

So avoid using inline styles.

Read more on the specificity here

Upvotes: 2

Related Questions