0
問題を見つけるのに1時間を費やしましたが、まだそれを見つけることはできません。 ブラウザでズームイン/ズームアウトすると、一部の要素が動いていて、一部が大きくなっています。私のために、動いている要素は、67％のズームで彼の意図した位置にあります。ざっと見から私のページはどのように見えるのですか？
#structure {
\t background-color: blue;
\t height: 640px;
\t width: 1136px;
}
/* Starting the left side menu */
#select {
\t background-image: url('http://image.prntscr.com/image/876c2fde408443e0969559dfb4130848.png');
\t height: 640px;
\t width: 100px;
\t border-right: 4px solid rgba(69, 39, 28, 0.9);
\t float: left;
}
.menu {
\t height: 40px;
\t width: 40px;
\t margin-left: 30px;
\t margin-bottom: 34px;
}
.menu img {
\t height: 100%;
\t width: 100%;
}
#menu1 img, #menu7 img {
\t height: 120%;
\t width: 100%;
}
#menu1 {
\t height: 120px;
\t width: 40px;
\t margin-bottom: 50px;
\t margin-left: 37px;
\t margin-bottom: 30px;
}
#menu1 img {
\t margin-top: 7px;
\t height: 95px;
\t width: 28px;
}
#menu7 {
\t height: 40px;
\t width: 40px;
\t margin-top: 85px;
\t margin-left: 30px;
\t margin-bottom: 25px;
}
/* Closing the left side menu */
/* Starting slideshow Images */
#slideImg img {
\t position: relative;
\t height: 640px;
\t width: 683px;
\t float: left;
}
/* Closing slideshow Images */
/* Starting the quests side */
#quests {
\t background-image: url('http://image.prntscr.com/image/46c0de9e96474d5686b175d7cc343516.png');
\t height: 640px;
\t width: 350px;
\t float: left;
}
#seasonLevel {
\t height: 62px;
\t width: 62px;
\t z-index: 60px;
\t float: left;
\t position: relative;
\t top: 8px;
\t left: 10px;
}
#seasonLevel div {
\t position: relative;
\t top: 4px;
\t border: 3px solid white;
\t border-radius: 50%;
\t height: 60px;
\t width: 60px;
}
#seasonLevel div div {
\t border: 1px solid white;
\t border-radius: 50%;
\t height: 50px;
\t width: 50px;
\t margin: auto;
}
#seasonLevel div div p {
\t text-align: center;
\t font-family: sans-serif;
\t font-size: 30px;
\t color: rgba(255, 255, 255, 0.8);
\t position: relative;
\t bottom: 22px;
}
#seasonDesc {
\t width: 220px;
\t height: 65px;
\t position: relative;
\t left: 23px;
\t top: 12px;
\t float: left;
\t font-family: sans-serif;
}
#seasonDesc p:first-child {
\t font-size: 32px;
\t font-weight: bold;
\t position: relative;
\t bottom: 30px;
\t color: white;
\t font-weight: 600;
}
#seasonDesc p:last-child {
\t font-size: 23px;
\t font-weight: 600;
\t position: absolute;
\t top: 25px;
\t color: #DEDEDE;
\t opacity: 0.7;
}
#sunCont {
\t background-color: rgba(0, 0, 0, 0.3);
\t z-index: 50px;
\t height: 47px;
\t width: 314px;
\t position: relative;
\t right: 8px;
\t top: 33px;
\t z-index: 30px;
\t float: right;
}
.sun {
\t background-color: black;
\t opacity: 0.4;
\t width: 28px;
\t height: 28px;
\t border-radius: 50%;
\t margin-left: 0.01px;
\t margin-top: 9px;
\t display: inline-block;
\t position: relative;
\t left: 5px;
\t border: 1px solid white;
}
.rs {
\t height: 145px;
\t width: 331px;
\t position: relative;
\t background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
\t display: inline-block;
\t background-size: 100%;
\t margin-bottom: 14px;
\t border: 0.2px solid black;
\t box-shadow: 0px 2px 0px black;
\t float: right;
}
/* Closing the quest side */<!DOCTYPE html>
<html>
\t <head>
\t \t <title>VainGlory</title>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <link href='style.css' rel = 'stylesheet' type = 'text/css'>
\t </head>
\t <body>
\t \t <div id = 'structure'>
<!--LS-->
\t \t \t <div id = 'select'>
\t \t \t \t <div id = 'menu1'> <img src = 'http://image.prntscr.com/image/ddc0c251ac4d4ca6970047e49f575ff4.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/421e8f797e5e4af5abd56e2c84c48884.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/4cb6887febbd4bc7a6f8242688165a9c.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/64bf74940f2449de99f8eedd0115dc55.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/10dd330b566d4b1d9cedc7793c67460b.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/2f4fdfd4a3964536a84689e5316c04e8.png'> </div>
\t \t \t \t <div id = 'menu7'> <img src = 'http://image.prntscr.com/image/ac57c5f7b73f44b8aa92c58a2289cff8.png'> </div>
\t \t \t </div>
<!--MID-->
\t \t \t <div id = 'slideImg'>
\t \t \t \t <div> <img src = 'http://image.prntscr.com/image/1025277995cb442a950a05fe3b168614.jpg'> </div>
\t \t \t </div>
<!--RS-->
\t \t \t <div id = 'quests'>
\t \t \t \t <div class="rs">
\t \t \t \t \t <div id="seasonLevel">
\t \t \t \t \t \t <div>
\t \t \t \t \t \t \t <div>
\t \t \t \t \t \t \t \t <p>10<p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div id = 'seasonDesc'>
\t \t \t \t \t \t <p>Autumn 2016</p>
\t \t \t \t \t \t <p>Remaining: <span id='time'></span></p>
\t \t \t \t \t </div>
\t \t \t \t \t <div id="sunCont">
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="rs">
\t \t \t \t </div>
\t \t \t \t <div class="rs">
\t \t \t \t </div>
\t \t \t \t <div class="rs">
\t \t \t \t </div>
\t \t \t </div>
<!--CLOSE-->
\t \t </div>
\t \t <script src="javas.js"></script>
\t </body>
</html>
ありがとうございます！また、あなたが好きで十分な時間を持っているなら、そのことが本当にどのように機能するかを理解することは素晴らしいでしょう。 –