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

Html – how do I stop the div areas from moving?

I relatively new to html and css and wanted to code my own website.
When I hover over the div areas, the whole website beneath them moves a bit and I don’t know how to fix it.

I tried moving the div areas when I hover over them to fix it but it didn’t work.

Html {
  /*max-width:75%;*/
  font-family: "Arial Black";
}

div {
  margin-bottom: 30px;
}

.film {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  /*unteres zum zentrieren des Textes*/
  display: flex;
  justify-content: center;
  /* Horizontal zentrieren */
  align-items: center;
  /* Vertikal zentrieren */
}

.film:hover {
  border-right: 5px solid black;
  border-bottom: 5px solid black;
  position: relative;
  right: 5px;
  bottom: 5px;
}

.buch {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
}

.buch:hover {
  border-right: 5px solid black;
  border-bottom: 5px solid black;
  position: relative;
  right: 5px;
  bottom: 5px;
}

.games {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: right;
}

.games:hover {
  border-right: 5px solid black;
  border-bottom: 5px solid black;
  position: relative;
  right: 5px;
  bottom: 5px;
}

.portfolio {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
}

.blog {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: right;
}

p {
  font-size: 45px;
  line-height: 80%;
}

.hallo {}

.container {
  display: flex;
}

.container2 {
  border: 3px solid black;
  height: 200px;
  width: 500px;
  /*margin-left:150px; gleiche px wie div width*/
  margin-left: 240px;
}

a {
  text-decoration: none;
}

a:hover {
  /*font-family:Arial;*/
}

a:visited {
  color: black;
}
<html lang="de">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    @import url("CSS_2.css");
  </style>
</head>

<body>
  <div class="container">
    <a href="">
      <div class="film">
        <p>MOVIES</p>
      </div>
    </a>
    <div class="container2">
      <p href="" style="line-height:100%">Hello</p>
    </div>
  </div>
  <a href="">
    <div class="buch">
      <p>BOOKS</p>
    </div>
  </a>
  <div class="games">
    <p>GAMES</p>
  </div>
  <div class="portfolio">
    <p <!--style="font-size:65px" -->PORTFOLIO</p>
  </div>
  <div class="blog">
    <p>BLOG</p>
  </div>
</body>

</html>
Tags:

3

Answers


  1. 0

    Check css property box-sizing. You should add box-sizing: border-box to the divs with borders.

    Login or Signup to reply.
  2. 0

    Have you try box-sizing: border-box;

    * {
  box-sizing: border-box;
}

    html {
  /*max-width:75%;*/
  font-family: "Arial Black";
}

* {
  box-sizing: border-box;
}

div {
  margin-bottom: 30px;
}

.film {
  outline: 3px solid black;
  width: 300px;
  height: 300px;
  /*unteres zum zentrieren des Textes*/
  display: flex;
  justify-content: center;
  /* Horizontal zentrieren */
  align-items: center;
  /* Vertikal zentrieren */
}

.film:hover {
  border-right: 5px solid black;
  border-bottom: 5px solid black;
  position: relative;
  right: 5px;
  bottom: 5px;
}

.buch {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
}

.buch:hover {
  border-right: 5px solid black;
  border-bottom: 5px solid black;
  position: relative;
  right: 5px;
  bottom: 5px;
}

.games {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: right;
}

.games:hover {
  border-right: 5px solid black;
  border-bottom: 5px solid black;
  position: relative;
  right: 5px;
  bottom: 5px;
}

.portfolio {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
}

.blog {
  border: 3px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: right;
}

p {
  font-size: 45px;
  line-height: 80%;
}

.hallo {}

.container {
  display: flex;
}

.container2 {
  border: 3px solid black;
  height: 200px;
  width: 500px;
  /*margin-left:150px; gleiche px wie div width*/
  margin-left: 240px;
}

a {
  text-decoration: none;
}

a:hover {
  /*font-family:Arial;*/
}

a:visited {
  color: black;
}
    <div class="container">
    <a href="">
        <div class="film">
            <p>MOVIES</p>
        </div>
    </a>
    <div class="container2">
        <p href="" style="line-height:100%">Hello</p>
    </div>
</div>
<a href="">
<div class="buch">
    <p>BOOKS</p>
</div>
</a>
<div class="games">
    <p>GAMES</p>
</div>
<div class="portfolio">
    <p <!--style="font-size:65px"-->PORTFOLIO</p>
</div>
<div class="blog">
    <p>BLOG</p>
</div>
    Login or Signup to reply.
  3. 0

    Just remove these parts: position:relative;right:5px;bottom:5px;
    They move the elements around

    Html {
    /*max-width:75%;*/
    font-family:"Arial Black";
}
div {
    margin-bottom:30px;
}
.film {
    border:3px solid black;
    width:300px;
    height:300px;
/*unteres zum zentrieren des Textes*/
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
}
.film:hover {
    border-right:5px solid black;
    border-bottom:5px solid black;

}
.buch {
    border:3px solid black;
    width:300px;
    height:300px;

    display:flex;
    justify-content:center;
    align-items:center;

    float:right;
}
.buch:hover {
    border-right:5px solid black;
    border-bottom:5px solid black;

}
.games {
    border:3px solid black;
    width:300px;
    height:300px;

    display:flex;
    justify-content:center;
    align-items:center;

    clear:right;
}
.games:hover {
    border-right:3px solid black;
    border-bottom:3px solid black;

  
}
.portfolio {
    border:3px solid black;
    width:300px;
    height:300px;

    display:flex;
    justify-content:center;
    align-items:center;

    float:right;
}
.blog {
    border:3px solid black;
    width:300px;
    height:300px;

    display:flex;
    justify-content:center;
    align-items:center;

    clear:right;
}
p {
    font-size:45px;
    line-height:80%;
}
.hallo {
}
.container {
    display:flex;
}
.container2 {
    border:3px solid black;
    height:200px;
    width:500px;
    /*margin-left:150px; gleiche px wie div width*/
    margin-left:240px;

}
a {
    text-decoration:none;
}
a:hover {
    /*font-family:Arial;*/
}

a:visited {
    color:black;
}
    <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @import url("CSS_2.css");
    </style>
</head>
<body>
    <div class="container">
        <a href="">
            <div class="film">
                <p>MOVIES</p>
            </div>
        </a>
        <div class="container2">
            <p href="" style="line-height:100%">Hello</p>
        </div>
    </div>
    <a href="">
    <div class="buch">
        <p>BOOKS</p>
    </div>
    </a>
    <div class="games">
        <p>GAMES</p>
    </div>
    <div class="portfolio">
        <p <!--style="font-size:65px"-->PORTFOLIO</p>
    </div>
    <div class="blog">
        <p>BLOG</p>
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search