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

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 Images/Teen Events/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 >
    <div >
      <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 >
      <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

CodePudding user response：

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 Images/Teen Events/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" >Play Now</a>
</main>