'Positioning in CSS, when scaling the webpage the text & background shifts

When minimized and scaled to different positions some the text and background shift to different spots making text shift off the screen or on top of other text or links.

body,
html {
  margin: 0;
  padding: 0;
}

.gamepage {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-size: 100%;
}


/* tabbar */

.header {
  position: sticky;
  top: 0px;
  left: 0px;
  height: 10vh;
  width: 100%;
  background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
  background-size: cover;
  z-index: 2;
}

#home {
  position: absolute;
  top: 0px;
  left: 0px;
  border-style: groove;
}

#how2play {
  position: absolute;
  top: 0px;
  left: 47px;
  border-style: groove;
}

#character {
  position: absolute;
  top: 0px;
  left: 137px;
  border-style: groove;
}


/* link format */

a:link,
a:visited {
  color: white;
  text-decoration: none;
  font-weight: bold;
}


/* background */

.background {
  positon: absolute;
  background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
  height: 100%;
  width: 100%;
  top: 72px;
  left: 8px;
  background-size: cover;
  z-index: 1;
}

#title {
  color: white;
  position: absolute;
  top: 90px;
  left: 5px;
  font-size: 35px;
  font-family: Courier New;
}

#text {
  color: white;
  position: absolute;
  top: 125px;
  left: 25px;
}

#playbutton {
  color: black;
  position: absolute;
  top: 360px;
  left: 660px;
  font-size: 55px;
  font-weight: bold;
  transform: rotate(-7deg);
  border: 5px;
  border-style: double;
}
<body>
  <div class="gamepage">
    <div class="header">
      <div id="home">
        <a href="index.html">Home</a>
      </div>
      <div id="how2play">
        <a href="how2play.html">How to Play</a>
      </div>
      <div id="character">
        <a href="characterlist.html">Character List</a>
      </div>
    </div>
    <div class="background">
      <div id="title">Murder Mystery</div>
      <div id="text">Find the murderer, before it's too late...</div>
      <a href="homepage/thegame1.html">
        <div id="playbutton">Play Now</div>
      </a>
    </div>
  </div>
</body>

I've Tried

  • Changing all values to %'s

  • Changing all the values using vh and vw. This fixed some of the problem but not all

  • Played around with the absolute and relative positioning/adding div parent tags

All this is very new to me so there might be a simple solution I don't know of

htmlcsspositioning


Solution 1:[1]

Your HTML and CSS should look something like the example below.

Here I have swapped out your IDs for semantic HTML elements, and absolute positioned elements for modern flexbox/grid

Look into flexbox and grid for single axis and dual axis positioning

body {
  display: grid;
  grid-template-rows: 30% 1fr;
  min-height: 100vh;
  margin: 0;
  color: white;
  background-color: black;
}

header {
  background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
  background-size: cover;
}

header ul {
  display: flex;
  gap: 1rem;
  min-height: 10vh;
  list-style: none;
}

a:link,
a:visited {
  display: inline-block; /* Allows for padding and your rotation of [Play Now] */
  color: inherit;
  padding: .2em .5em;
  background: #000b;
  text-decoration: none;
  font-weight: bold;
}

main {
  background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
  padding: 2rem;
  background-size: cover;
}

h1 {
  font-size: 2.5rem;
  font-family: Courier New;
}

.playbutton {
  color: black;
  font-size: 3.5rem;
  font-weight: bold;
  transform: rotate(-7deg);
  border: 5px;
  border-style: double;
}
<!-- Use semantic HTML instead of divs with IDs -->
<header>
  <nav>
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="how2play.html">How to Play</a>
      </li>
      <li>
        <a href="characterlist.html">Character List</a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <h1>Murder Mystery</h1>
  <p id="text">Find the murderer, before it's too late...</p>
  <a href="homepage/thegame1.html" class="playbutton">Play Now</a>
</main>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions