Html Question posted in
Some basic documentation can be found here.

Html – Hyperlink affects the whole page

I’m new to html and css (self taught)
I’m trying to use a simple grid system with a side bar + content. So for the side bar I want link to internal pages to change the content, I’m making a basic template for a portfolio. But what’s happening now is that when I try to add the internal link, it feels like everything is like a link. I notice that because links are not working, I did a "hover" to change the color and the text to italic, but it appears to be happening in the whole page. Here’s the code:

body {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
  padding: 0;
  margin: 0;
}

.sidebar {
  height: 200vh;
  font-size: 4rem;
  text-align: center;
  color: grey;
  background-color: yellow;
}

.content {
  padding: 2rem;
  color: black;
  background-color: lightblue;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 4rem;
}

body {
  font-family: system-ui, serif;
}

.white {
  font-family: system-ui, serif;
  color: red;
}

 :hover {
  font-family: system-ui, serif;
  color: rgb(255, 199, 209);
  font-style: italic;
}
<div class="sidebar" contenteditable>
  <ul>
    <li><a href="/Break.html" class="white">The River</a></li>
    <li><a href="/Break.html" class="white">The River</a></li>
    <li><a href="/Break.html" class="white">The River</a></li>
    <li><a href="/Break.html" class="white">The River</a></li>
    <li><a href="/Break.html" class="white">The River</a></li>
    <li><a href="/Break.html" class="white">The River</a></li>
  </ul>
</div>
<p class="content" contenteditable>
  cto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?
</p>
Tags:

3

Answers


  1. 0

    Change :hover to a:hover in your css style section.

    :hover is supposed to apply to a specific type of tag, if you do a:hover it will only apply to the anchors.

    The hyperlink is not applying to the whole page just the style, because :hover is supposed to have a prefix, if you don’t provide one it applies to all elements.

    Like this:

    a:hover {
  font-family: system-ui, serif;
  color: rgb(255, 199, 209);
  font-style: italic;
}
    Login or Signup to reply.
  2. 0

    There are two time body defined styled applied. That should be one time only.

    The font size should be reasonable. The links should be of proper website (starting with http) or local file that should also have proper path.

    You can apply css to different html element like a, p, ul, li etc in css and :hover to the element that you want to have a hover property not every element.

    Keep practicing.

    body {
  font-family: system-ui, serif;
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
  padding: 0;
  margin: 0;
  font-size: 16px;
}

a {
  cursor: pointer;
}
a:hover {
  font-family: system-ui, serif;
  color: rgb(255, 199, 209);
  font-style: italic;
}

.sidebar {
  height: 200vh;
  font-size: 2rem;
  text-align: center;
  color: grey;
  background-color: yellow;
}

.content {
  padding: 2rem;
  color: black;
  background-color: lightblue;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 4rem;
}

.white {
  font-family: system-ui, serif;
  color: red;
}
    <div class="sidebar" contenteditable>
  <ul>
    <li><a href="https://google.com" class="white">The River</a></li>
    <li><a href="path to your local html file" class="white">The River</a></li>
    <li><a href="https://google.com" class="white">The River</a></li>
    <li><a href="https://google.com" class="white">The River</a></li>
    <li><a href="https://google.com" class="white">The River</a></li>
    <li><a href="https://google.com" class="white">The River</a></li>
  </ul>
</div>
<p class="content" contenteditable>
  cto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?
</p>
    Login or Signup to reply.
  3. 0

    I just realized you have two questions so I guess I should do two answers?

    <div class="sidebar" contenteditable>

    contenteditable is an attribute for which you must provide a value. Just putting the attribute there without saying contenteditable=true/false is invalid HTML. And I think when it’s true that is what is preventing you from clicking so you’ll probably want it false?

    Change it like this:

    <div class="sidebar" contenteditable="false">

    Then try it again. That will fix the issue of your links not being clickable. Is there a reason you need it to be true? When you specify that contentededitable=true or if you leave it empty, it will be assumed true, which means you are saying to the browser that the user should be able to edit the links.

    Also it’s better to have only one question per post I think.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search