my entire website shakes when i click on a link and a border is displayed-CodePudding

The issue appears when i add a border through the "active" pseudoclass to my links. It seems as if the page is trying to resize itself because of those new pixels created by the border, but i don't know why it's doing it therefore i can't fix it.

<body>
    <header >
      <nav >
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">STORE</a></li>
          <li><a href="#">ABOUT</a></li>
        </ul>
      </nav>
      <h1>THE ROOMS</h1>
    </header>
</body>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: rgb(222, 221, 221);
}
.upper-part {
  background-color: rgba(0, 0, 0, 0.524);
  background-image: url(../images/bground.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
  color: white;
  text-align: center;
  padding-bottom: 8px;
}
.main-nav {
  border-bottom: solid rgba(255, 255, 255, 0.158) 1.5px;
}
.main-nav li {
  display: inline;
  margin: 2px;
}
.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
}
.main-nav li :hover {
  background-color: rgba(255, 255, 255, 0.142);
}
a:active {
  border: solid white 1px;
}

CodePudding user response：

You can use box-shadow to put a border within the element without creating additional pixels.

a:active {
  box-shadow:inset 0px 0px 0px 1px #fff;
}

I got the idea from this thread: Placing border inside of div and not on its edge

CodePudding user response：

Here is how I work around it:

.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
  margin: 1px;
}
a:active {
  border: solid white 1px;
  margin: 0px;
}

CodePudding user response：

of course, it will because the border before didn't exist, then when active it exists. so it's actually simple to avoid that. just add the borders to the a and make them transparent. border: 1px solid transparent; then when hover or active, you just change border color as long as it's the same size 1px

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: rgb(222, 221, 221);
}
.upper-part {
  background-color: rgba(0, 0, 0, 0.524);
  background-image: url(../images/bground.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
  color: white;
  text-align: center;
  padding-bottom: 8px;
}
.main-nav {
  border-bottom: solid rgba(255, 255, 255, 0.158) 1.5px;
}
.main-nav li {
  display: inline;
  margin: 2px;
}
.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
  border: 1px solid transparent;
}
.main-nav li :hover {
  background-color: rgba(255, 255, 255, 0.142);
}
a:active {
  border: solid white 1px;
}

  <body>
    <header >
      <nav >
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">STORE</a></li>
          <li><a href="#">ABOUT</a></li>
        </ul>
      </nav>
      <h1>THE ROOMS</h1>
    </header>
</body>

CodePudding user response：

There's few options..

Set default border

Only add to .main-nav a default 1px transparent border

.main-nav a {
    /* after all existing styles */
    border: 1px solid transparent
}

This way it wont "sake" as the border width is not changing dimensions

Use outline instead

.main-nav a:active {
  // instead of existing
  outline: 1px solid white
}

outline doesn't "take" any space

Use shadows

.main-nav a:active {
  // instead of existing
  box-shadow: inset 0px 0px 0px 1px white
}

Same as outline