1
Ich mache eine Website, die nur HTML und CSS verwendet. Meine Website sieht derzeit wie folgt aus: this. Ignoriere die kaputten Texte, da sie nicht mein Problem sind.html und CSS responsive Design nicht die Größe der divs die Art, wie ich will
Die Kopfzeile und die Navigationsleiste (die vertikal angeordneten Farbblöcke) sind feste Positionen und das am weitesten rechts befindliche div, das ich .content genannt habe, ist scrollbar.
Das Problem ist, dass, wenn ich versuche, meine Website so zu verkleinern, dass sie kleiner wird, die divs fehl am Platz, nicht so, wie ich es will. Es sieht wie this nach der Größe aus. Vermeiden Sie die gebrochenen Wörter, sie sind nicht das Problem. Das Problem ist, dass die Navigationsleiste (die ich .nav nannte) nicht am Header-Div festhielt (den ich "header" nannte).
Das ist mein HTML-Code:
/* 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>Ich vermute, es hat etwas mit der [Klasse * = "COL-"] { Schwimmer zu tun: right; } Ich habe versucht, es nach links zu ändern, anders als die .content nach links bewegen, das Problem bleibt immer noch.
können Sie den Arbeitscode anzeigen. Bitte benutzen Sie den Code-Editor. – Aslam
Warum legen Sie die. Nav nicht innerhalb der .header div? es wird besser funktionieren in dieser Situation, denke ich :) – M98