1
私はHTMLとCSSだけを使用するウェブサイトを作っています。私のウェブサイトは現在thisのように見えます。私の問題ではないので、壊れたテキストを無視してください。htmlとcssのレスポンシブルデザインは、私が望むようにdivのサイズを変更していません
ヘッダーとナビゲーションバー（垂直に配置された色のブロック）は固定された位置であり、私が指定した最も右側のdiv .contentはスクロール可能です。
問題は、ウェブサイトのサイズを小さくするようにサイズを変更しようとするたびに、divが適切ではなく、必要な方法で移動することです。サイズ変更後はthisのように見えます。壊れた言葉を避ける、彼らは問題ではありません。問題は、ヘッダーdiv（私が.headerという名前）に固執していないナビゲーションバー（.navという名前の）です。
は、これは私のHTMLコードです：私はそれが に何か持っている疑いがある
/* entire website */
body
{
\t background: #E3AB42;
\t margin-top: 0px;
\t margin-left: 0px;
}
/* box sizing */
* {
box-sizing: border-box;
}
/* all about the header */
.header {
\t background-color: #060606; /*666!!!!*/
\t height: 100%;
\t position: fixed;
}
.header img {
\t margin-left: 25px;
\t margin-top: 20px;
}
.header p {
\t transform: rotate(270deg);
\t color: white;
\t font-family: Optima, "Times New Roman", Georgia, Serif;
}
.header .title {
\t margin-top: 220px;
\t margin-left: -150px;
\t display: inline-block;
\t font-size: 88px;
}
.header .subtext {
\t display: inline-block;
\t text-align: right;
\t margin-top: -300px;
\t margin-right: -55px;
\t font-size: 33px;
\t white-space: nowrap;
}
/* navigation general codes */
.nav {
\t position: fixed;
\t height: 100%;
\t margin-left: 225px;
}
.nav div {
\t height: 20%;
\t padding: 0;
}
.nav p {
\t color: white;
\t font-family: Optima, "Times New Roman", Georgia, Serif;
\t font-size: 33px;
\t transform: rotate(270deg);
\t text-align: center;
\t display: inline-block;
}
a:link {
\t text-decoration: none;
}
/* navigation vertical texts
#verticalnewbie {
\t margin-top: 73px;
}
#verticalskill {
\t margin-top: 65px;
}
#verticalheroes {
\t margin-top: 78px;
}
#verticalmindset {
\t margin-top: 85px;
}
#verticalteam {
\t margin-top: 59px;
}
/* navigation button colours */
.newbie {
\t background: #E3AB42;
}
.skills {
\t background: #FAA02E;
}
.heroes{
\t background: #B17C3B;
}
.mindset {
\t background: #584F4A;
}
.team {
\t background: #2F2526;
}
/* general content */
.content {
\t width: 70%;
\t height: auto;
}
/* .content #examplar {
\t float: right;
\t height: auto;
\t width: 25%;
}
/* page colours */
body#pagenewbie {
\t background: #E3AB42;
}
body#pageskill {
\t background: #FAA02E;
}
body#pageheroes {
\t background: #B17C3B;
}
body#pagemindset {
\t background: #584F4A;
}
body#pageteams {
\t background: #2F2526;
}
/* content texts */
.content h1 {
\t text-align: center;
\t color: white;
\t font-family: Optima, "Times New Roman", Georgia, Serif;
\t font-size: 66px;
}
.content li {
\t color: white;
\t font-family: Optima, "Times New Roman", Georgia, Serif;
\t font-size: 33px;
\t font-weight: bold;
\t list-style-type: none;
}
.content p {
\t list-style-type: none;
\t text-decoration: none;
\t color: white;
\t font-family: Optima, "Times New Roman", Georgia, Serif;
\t font-size: 22px;
}
/* hover */
#dropdown:hover span {
\t display: block;
font-size: 13px;
height: auto;
width: 200px;
color: white;
letter-spacing: 1px;
text-align: left;
padding: 5px 20px;
\t position: absolute;
\t margin-top: -40px;
\t margin-left: 880px;
\t font-family: Optima, "Times New Roman", Georgia, Serif;
}
body#pagenewbie #dropdown:hover span {
background: #E6B355;
border: 5px solid #C19138;
}
body#pageskill #dropdown:hover span {
\t background: #FAAA43;
\t border: 5px solid #D48827;
}
body#pageheroes #dropdown:hover span {
\t background: #B9894F;
\t border: 5px solid #966932;
}
body#pagemindset #dropdown:hover span {
\t background: #69615C;
\t border: 5px solid #4B433F;
}
body#pageteams #dropdown:hover span {
\t background: #443B3C;
\t border: 5px solid #281F20;
}
#dropdown {
\t color: #E6E6E6;
}
#infoone {
\t display: none;
}
/* grid boxes */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: right;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Overtips</title>
\t \t <link rel="stylesheet" type="text/css" href="theme.css" />
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t </head>
\t
\t <body id="pagenewbie">
\t \t
\t \t <div class="row">
\t \t \t <div class="col-1"></div>
\t \t \t <div class="col-2"></div>
\t \t \t <div class="col-3"></div> <!-- 25% -->
\t \t \t <div class="col-4"></div>
\t \t \t <div class="col-5"></div>
\t \t \t <div class="col-6"></div>
\t \t \t <div class="col-7"></div>
\t \t \t <div class="col-8"></div>
\t \t \t <div class="col-9"></div> <!-- 75% -->
\t \t \t <div class="col-10"></div>
\t \t \t <div class="col-11"></div>
\t \t \t <div class="col-12"></div>
\t </div>
\t \t <div class="container">
\t \t
\t \t \t <div class="col-2 header">
\t \t \t \t <div class="logo"><img src="overlogo.png"></div>
\t \t \t \t <div class="title"><p>OVERTIPS</p></div>
\t \t \t \t <div class="subtext"><p>Mainly for beginner and<br>intermediate players</p></div>
\t \t \t </div>
\t \t \t
\t \t \t
\t \t \t <div class="col-1 nav">
\t \t \t
\t \t \t \t <a href="file:///Users/marvin.chong021/Desktop/Website/index.html"><div class="newbie"><p id="verticalnewbie">NOVICE</p></div></a>
\t \t \t \t
\t \t \t \t <a href="file:///Users/marvin.chong021/Desktop/Website/overskill.html"> <div class="skills"><p id="verticalskill">SKILLS</p></div></a>
\t \t \t \t
\t \t \t \t <a href="file:///Users/marvin.chong021/Desktop/Website/overheroes.html"> <div class="heroes"><p id="verticalheroes">HEROES</p></div></a>
\t \t \t \t
\t \t \t \t <a href="file:///Users/marvin.chong021/Desktop/Website/overmindset.html"> <div class="mindset"><p id="verticalmindset">MINDSET</p></div></a>
\t \t \t \t
\t \t \t \t <a href="file:///Users/marvin.chong021/Desktop/Website/overteams.html"> <div class="team"><p id="verticalteam">TEAM</p></div></a>
\t \t \t \t
\t \t \t </div>
\t \t \t
\t \t \t <div class="col-9 content">
\t \t \t
\t \t \t \t <h1>Novice Section</h1>
\t \t \t \t <li>In-game settings</li>
\t \t \t \t <p>Firstly, in <a id="dropdown">game settings<span id="infoone">It is a menu with options to change.</span></a>. Like any other game, you want to check your in game setting before playing the game. Everyone is different and different people prefer different settings. You may need to experiment with your heroes (characters you can play) and play around a little and see what you need to change. Assuming you know what you need to change, you can go to options menu by pressing escape or going to game menu screen and change the setting you want. </p>
\t \t \t </div>
\t \t </div>
\t </body>
</html>[クラス* = "col-"] { フロート：右; } 左に移動する.content以外の左に変更しようとしましたが、問題は残ります。
作業コードを表示できますか。コードエディタを使用してください。 – Aslam
.navを.header divの中に入れてみませんか？それは私が思うその状況でよりうまく動作します:) – M98