New course! Every coder should learn Generative AI!
Try a free lesson+ 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
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?
Often have questions like this?
Learn more efficiently, for free:
Hot today
Bash
0 Votes
Why exception is not handled
1 Votes
Links of cmy codes
5 Votes
Please help
0 Votes
Link
6 Votes
Ruby
2 Votes