+ 1

Positioning Issues

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Murder Mystery 1</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <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> </html> part 1/2

html css positioning

29th Mar 2022, 12:08 PM

Johnny Meyer

1 Answer

+ 1

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; } part 2/2 -- the issue is when the web browser is scaled diagonally, horizontally and vertically the text and background is shifted, how would I fix this?

29th Mar 2022, 12:09 PM

Johnny Meyer