0

I'm pretty new to this stuff, but I'm creating a website for a project and currently I've been trying to fix my active link and nothing so far has worked. I am also using W3school spaces.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="navbar"> 
<ul> 
    <li id="link1"><a href="home.html">Home</a></li>
    <li id="link2"><a href="info.html">Info</a></li>
    <li id="link3"><a href="photo.html">Photos</a></li>
    <li id="link4"><a href="credit.html">Credits</a></li>
</ul> 
</div>
</body>
</html>

CSS:

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

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navbar ul #link1 a:hover { 
    background-color: #C62222; 
}

#navbar ul #link2 a:hover { 
    background-color: #0000ff; 
}

#navbar ul #link3 a:hover { 
    background-color: #BB29BB; 
}

#navbar ul #link4 a:hover { 
    background-color: #28C622; 
}

a:active {
  background: #29abe2;
}

The reason for the multiple links and colors is the rubric required for all links on the navbar to be assigned a different color.

These are what i've tried:

.navigation a:active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

Sadly none of these have worked for me

TylerH
  • 20,799
  • 66
  • 75
  • 101
needhelpforschool
  • 1

2 Answers2

0

You can use !important (see this question for more concise information about this keyword: What does !important mean in CSS?). This is not the best solution but it'll works with low-effort.

Snippet:

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

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar ul #link1 a:hover {
  background-color: #C62222;
}

#navbar ul #link2 a:hover {
  background-color: #0000ff;
}

#navbar ul #link3 a:hover {
  background-color: #BB29BB;
}

#navbar ul #link4 a:hover {
  background-color: #28C622;
}

a:active {
  background: #29abe2 !important; /* <-- NOTICE THE !important HERE */
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="navbar">
    <ul>
      <li id="link1"><a href="home.html">Home</a></li>
      <li id="link2"><a href="info.html">Info</a></li>
      <li id="link3"><a href="photo.html">Photos</a></li>
      <li id="link4"><a href="credit.html">Credits</a></li>
    </ul>
  </div>
</body>

</html>

Why:

Your CSS selectors #navbar ul #linkN a:hover are too specific and they override the :active style. The other (cleaner, btw) solution is to get more specific in your selectors for the :active, or rather less specific for the :hover ones (they are currently very very specific!)

indyteo
  • 350
  • 2
  • 13
0

ID's in CSS have a very high specificity loading, for this reason they should be used with caution. I've replaced these with the attribute selector.

You also need to make your active selector more specific.

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

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar ul [id=link1] a:hover {
  background-color: #C62222;
}

#navbar ul [id=link2] a:hover {
  background-color: #0000ff;
}

#navbar ul [id=link3] a:hover {
  background-color: #BB29BB;
}

#navbar ul [id=link4] a:hover {
  background-color: #28C622;
}


/*Make the selector more specific*/
#navbar ul li[id] a:active {
  background: #29abe2 ; 
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
https://stackoverflow.com/questions/75585706/how-do-i-fix-my-css-active-link-not-working#</head>

<body>
  <div id="navbar">
    <ul>
      <li id="link1"><a href="home.html">Home</a></li>
      <li id="link2"><a href="info.html">Info</a></li>
      <li id="link3"><a href="photo.html">Photos</a></li>
      <li id="link4"><a href="credit.html">Credits</a></li>
    </ul>
  </div>
</body>

</html>

Note that :active responds to user action, not the actual page (https://developer.mozilla.org/en-US/docs/Web/CSS/:active). If you want to highlight the current page you will need to use a class.

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

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar ul [id=link1] a:hover {
  background-color: #C62222;
}

#navbar ul [id=link2] a:hover {
  background-color: #0000ff;
}

#navbar ul [id=link3] a:hover {
  background-color: #BB29BB;
}

#navbar ul [id=link4] a:hover {
  background-color: #28C622;
}


/*This rule will highlite an elment with the class active, while the ul is not "active"*/
#navbar ul:not(:active) li.active a,
/*This rule will highlight the class undergoing class action*/
#navbar ul li[id] a:active {
  background: #29abe2;
}
<div id="navbar">
  <ul>
    <li id="link1"><a href="home.html">Home</a></li>
    <li id="link2"><a href="info.html">Info</a></li>
    <li id="link3"><a href="photo.html">Photos</a></li>
    <li id="link4" class="active"><a href="credit.html">Credits</a></li>
  </ul>
</div>
Jon P
  • 19,442
  • 8
  • 49
  • 72
  • I tried this code out, and when I click the link on the navigation bar it seems to slightly turn to the active link color, but then switches back to the hover color if hovering on it of course, or just the background black. – needhelpforschool Feb 27 '23 at 23:18
  • That is what `:active` does it only is active on mouse down. – Jon P Feb 27 '23 at 23:50