CODEWITHSUNDEEP
htmlcss
Domaggoj
Domaggoj

Reputation: 13

Elements of an unordered list move to the right by about 5 pixels when I place my mouse cursor over one of the elements (e.g. Home or Contact)

So, I have this problem when I put my mouse cursor over one of the elements of the unordered list, all the other elements to the right of that element move by about 5 pixels to the right.
I'm new in HTML and CSS, so I came across this obstacle...
Is there a way to solve this problem? Also, I put on "ul li a: hover" that the font is increased by 110%, while in other situations, for example, when I put only "opacity" on "ul li a: hover" none of the above happens, the elements will not move to the right side.

body {
  margin: 0px;
  padding: 0px;
  background-attachment: fixed;
  background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);
}

header {
  margin: 0px;
  padding: 0px;
}

.hhh {
  position: absolute;
  font-family: 'Fredoka One', cursive;
  font-size: 40px;
  left: 8%;
  top: 4%;
}

.hhh a {
  text-decoration: none;
}

.hhh a:active {
  color: black;
}

.hhh a:visited {
  color: black;
}

.hhh a:hover {
  color: black;
  opacity: 0.8;
  font-size: 110%;
}

.hhh a:link {
  color: black;
}

.gm {
  position: absolute;
  display: flex;
  left: 55%;
  top: 7%;
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
}

.gm li {
  margin-left: 35px;
  list-style-type: none;
}

.gm li a {
  text-decoration: none;
}

.gm li a:active {
  color: black;
}

.gm li a:visited {
  color: black;
}

.gm li a:hover {
  color: black;
  font-size: 110%;
  box-sizing: border-box;
}

.gm li a:link {
  color: black;
}
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="Domagoj Šutalo">
  <meta name="description" content="Hello and welcome to my very first responsive website">
  <meta name="keywords" content="Web, Webpage, Portfolio, Responsive">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Responsive webpage | Home</title>
</head>

<body>
  <header>
    <nav>
      <h1 class="hhh"><a href="#"> THIS IS MY WEBPAGE </a></h1>
      <ul class="gm">
        <li><a href="#">Home</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Games</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>


</html>

Thanks in advance for all the answers! (P.S. Sorry if CSS is not 100% okay, I'm just starting out haha ...)

Upvotes: 1

Views: 60

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14433

You can set display: block; on .gm li a and use transform:scale:

body {
  margin: 0px;
  padding: 0px;
  background-attachment: fixed;
  background-image: linear-gradient(-120deg, #f5eeed, #ccaeab);
}

header {
  margin: 0px;
  padding: 0px;
}

.hhh {
  position: absolute;
  font-family: 'Fredoka One', cursive;
  font-size: 40px;
  left: 8%;
  top: 4%;
}

.hhh a {
  text-decoration: none;
}

.hhh a:active {
  color: black;
}

.hhh a:visited {
  color: black;
}

.hhh a:hover {
  color: black;
  opacity: 0.8;
  font-size: 110%;
}

.hhh a:link {
  color: black;
}

.gm {
  position: absolute;
  display: flex;
  left: 55%;
  top: 7%;
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
}

.gm li {
  margin-left: 35px;
  list-style-type: none;
}

.gm li a {
  display: block;
  text-decoration: none;
}

.gm li a:active {
  color: black;
}

.gm li a:hover{  
  transform: scale(1.1);
}
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<header>
  <nav>
    <h1 class="hhh"><a href="#"> THIS IS MY WEBPAGE </a></h1>
    <ul class="gm">
      <li><a href="#">Home</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Games</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>

</main>
<footer>

</footer>

Upvotes: 1

Related Questions