0

So everywhere i go to this code does something weird with the vertical scrollbar. If you know what it is tell me the error and how i can solve it.

The error is probably in the css but I included all the code just so you can take a look.

I'll just give all the code and you tell me what's wrong. Thx

I need to write some random words so I can post this.

*::selection {
  background: #333;
}
*::-moz-selection {
  background: #333;
}
@font-face {
    font-family: 'watchmen';
    src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
 background-color: red;

 font-family: 'Hind', sans-serif;
}
* {
 padding: 0;
 margin: 0;
}

#titletext {
 font-family: watchmen;
 color: #FEEE2E;
 font-size: 6.5vw;
}
#logo_span {
 color: #146EAD;
}
#linktotwo {
 text-decoration: none;
 color: #146EAD;
}
#title {
 
 position: absolute;
 width: 82vw;
 height: 12vh;
 text-align: center;
 line-height: 12vh;
 top: 50%;
 left: 50%;
 margin-top: -6vh;
 margin-left: -41vw;
}
#one {
 background-color: #030200;
 background-size: cover;
 width:100vw;
    height: 100vh;
}
#two {
 height: 100vh;
 width: 100vw;
 background-color: #0B4F77;
}
#favul {
 list-style-type: decimal;
    font-family: 'Josefin Sans', sans-serif;
    padding-left: 8vw;
    margin: 6.5vh auto;
}
#favul > li {
 margin: 1vw 0;
}
#favtit {
 text-align: center;
}
#fav {
 border: 1px solid #000;
 position: absolute;
 font-size: 48px;
 left: 50%;
 padding: 15px;
 width: 600px;
 height: 50vh;
 margin-left: -316px;
 overflow: hidden;
 top: 150vh;
 margin-top: -32vh;
 background-color: #0A4366;
}

#flash {
 color: #FF4500;
}
#bat {
 color: #000;
}
#arrow {
 color: green;
}
#manh {
 color: #1580c1;
}

#images {
 position: absolute;
 bottom: 0%;
 left: 0%;
}
#images > img {
 width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
 <title>I Love DC Comics</title>
 <meta charset="UTF-8">
 <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
 <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
 <meta name="description"
 content="I just love DC Comics and I write some stuff on this Website"/>
 <meta name="robots" content="index,follow"/> 
 <link rel="stylesheet" type="text/css" href="styles.css">
 <link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet"> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="jumpto.js"></script>
 <script type="text/javascript" src="script.js"></script>
</head>
<body>

<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">&#164;</a></span> COMICS!</p>
</div>
</div>

<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
 <li>The <span id="flash">Flash</span></li>
 <li><span id="bat">Batman</span></li>
 <li><span id="arrow">Green</span> Arrow</li>
 <li>Dr. <span id="manh">Manhattan</span></li>
</ul>

<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>

</div>
</div>
</body>
</html>
Lime
  • 13,400
  • 11
  • 56
  • 88
drstuggels
  • 122
  • 2
  • 12

2 Answers2

1
#one {
 width: 100%;
}

#two {
 width: 100%;
}
Shark
  • 77
  • 1
  • 1
  • 8
1

First of all vw is not the same as %. Have a look at this explanation:

Difference between Width:100% and width:100vw?

So you have to use % instead of vw and also I would give #fav box-sizing: border-box:

*::selection {
  background: #333;
}
*::-moz-selection {
  background: #333;
}
@font-face {
    font-family: 'watchmen';
    src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
 background-color: red;

 font-family: 'Hind', sans-serif;
}
* {
 padding: 0;
 margin: 0;
}

#titletext {
 font-family: watchmen;
 color: #FEEE2E;
 font-size: 6.5vw;
}
#logo_span {
 color: #146EAD;
}
#linktotwo {
 text-decoration: none;
 color: #146EAD;
}
#title {
 
 position: absolute;
 width: 82vw;
 height: 12vh;
 text-align: center;
 line-height: 12vh;
 top: 50%;
 left: 50%;
 margin-top: -6vh;
 margin-left: -41vw;
}
#one {
 background-color: #030200;
 background-size: cover;
 width:100%;
    height: 100vh;
}
#two {
 height: 100vh;
 width: 100%;
 background-color: #0B4F77;
}
#favul {
 list-style-type: decimal;
    font-family: 'Josefin Sans', sans-serif;
    padding-left: 8vw;
    margin: 6.5vh auto;
}
#favul > li {
 margin: 1vw 0;
}
#favtit {
 text-align: center;
}
#fav {
 border: 1px solid #000;
 position: absolute;
 font-size: 48px;
 left: 50%;
 padding: 15px;
 width: 600px;
 height: 50vh;
 margin-left: -302px;
 overflow: hidden;
 top: 150vh;
 margin-top: -32vh;
 background-color: #0A4366;
    box-sizing: border-box;
}

#flash {
 color: #FF4500;
}
#bat {
 color: #000;
}
#arrow {
 color: green;
}
#manh {
 color: #1580c1;
}

#images {
 position: absolute;
 bottom: 0%;
 left: 0%;
}
#images > img {
 width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
 <title>I Love DC Comics</title>
 <meta charset="UTF-8">
 <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
 <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
 <meta name="description"
 content="I just love DC Comics and I write some stuff on this Website"/>
 <meta name="robots" content="index,follow"/> 
 <link rel="stylesheet" type="text/css" href="styles.css">
 <link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet"> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="jumpto.js"></script>
 <script type="text/javascript" src="script.js"></script>
</head>
<body>

<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">&#164;</a></span> COMICS!</p>
</div>
</div>

<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
 <li>The <span id="flash">Flash</span></li>
 <li><span id="bat">Batman</span></li>
 <li><span id="arrow">Green</span> Arrow</li>
 <li>Dr. <span id="manh">Manhattan</span></li>
</ul>

<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>

</div>
</div>
</body>
</html>
Huelfe
  • 1,776
  • 16
  • 25