I am trying to create a page that you can scroll down with no side scrolling functions. I’m trying to add a new div container to create an About Me Section on the page but the text keeps going above the IntroDiv and creates a side scroll.
How do I fix it?
I tried using
div.AboutMe { left: 10%; position: absolute; padding: 50px; }
so that the AboutMe section would place underneath the IntroDiv, but it wont work.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/*This section is for the Navigation Bar*/
.navibar {
overflow: hidden;
}
/*Styles the links in the Navigation Bar*/
.navibar a {
float: right;
color: #F1F1F1;
text-align: right;
padding: 5px 10px;
text-decoration: none;
font-size: 15px;
font-family: Poppins;
}
/*Change the colour of the links and transitions on hover*/
.navibar a:hover {
text-decoration: underline #F1F1F1;
text-underline-offset: 0.5em;
transition: 0s;
}
/*Adds decoration, colour, etc. to the active/current link being viewed*/
.navibar a.active {
text-underline-offset: 0.5em;
text-decoration: underline #DB6518;
}
body {
background-color: #070707;
}
div.IntroBox {
top: 25%;
left: 10%;
position: fixed;
padding: 50px;
}
p.greet {
font-size: 30px;
margin: 0;
padding: 0;
color: #F1F1F1;
font-weight: 900;
font-family: Poppins;
}
p.followupgreet {
margin-top: -20;
margin-left: 0;
margin-bottom: 10;
font-size: 50px;
padding: 0;
color: #427FBA;
font-weight: 900;
font-family: Poppins;
transition: 0.4s;
}
p.followupgreet:hover {
-moz-transition: all 0.4s ease-out;
/* Firefox Transition out */
-o-transition: all 0.4s ease-out;
/* Opera Transition out */
-webkit-transition: all 0.4s ease-out;
/* Safari and Google Chrome Transition out */
-ms-transition: all 0.4s ease-out;
/* Internet Explorer Transition out */
transition: all 0.4s ease-out;
/* Transition for All */
color: #DB6518;
}
button.contactme {
color: #000000;
background-color: #070707;
border: 2px solid #F1F1F1;
color: #F1F1F1;
padding: 10px;
transition: 1s;
font-family: Poppins;
border-radius: 10px;
margin-top: -5;
}
button.contactme:hover {
background-color: #427FBA;
border: 2px solid #366DA3;
-moz-transition: all 0.4s ease-out;
/* Firefox Transition out */
-o-transition: all 0.4s ease-out;
/* Opera Transition out */
-webkit-transition: all 0.4s ease-out;
/* Safari and Google Chrome Transition out */
-ms-transition: all 0.4s ease-out;
/* Internet Explorer Transition out */
transition: all 0.4s ease-out;
/* Transition for All */
}
img.icons {
display: inline-block;
width: 20px;
height: auto;
padding: 0px;
margin-top: 0;
vertical-align: middle;
margin-left: 5;
margin-right: 0;
}
img.icons:hover {
filter: invert(50%) sepia(9%) saturate(2890%) hue-rotate(168deg) brightness(90%) contrast(93%);
}
p.followuppara {
margin-top: -20;
margin-left: 0;
padding: -10;
color: #F1F1F1;
font-family: Poppins;
}
div.AboutMe {
left: 10%;
position: absolute;
padding: 50px;
}<DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<!-- script src="?.js"></script -->
<!-- This is the JavaScript file name -->
<!-- link rel="stylesheet" type="text/css" href="portfolio.css" -->
<!-- This is the CSS file name !-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Name Here || Portfolio</title>
</head>
<!-- HEADER BAR HERE !-->
<div class="navibar">
<a class="active" href="">Home</a>
<a href="#link">Projects</a>
</div>
<body>
<!--INTRODUCTION BOX STARTS HERE!-->
<div class="IntroBox">
<p class="greet">Hello, my name is..</p>
<br>
<p class="followupgreet">Name Here</p>
<br>
<p class="followuppara">Welcome to my Journey of Web Development.</p>
<!--INTRODUCTION BOX END HERE!-->
<!-- Button Section Starts Here!-->
<button class="contactme">CONTACT ME</button>
<a href="https://www.twitter.com/link" alt="Twitter"><img class="icons" src="icons/twitter.png"></a>
<a href="https://www.linkedin.com/in/link" alt="LinkedIn"><img class="icons" src="icons/linkedin.png"></a>
<a href="https://www.instagram.com/link" alt="Instagram"><img class="icons" src="icons/instagram.png"></a>
<!-- Button Section End Here!-->
</div>
<div class="AboutMe">
<p><span style_disabled="color:white">ABOUT ME</span></p>
</div>
</body>
</html>
2
Answers
make introBox position:relative
IntroBox position: fixed makes intro box get displayed in a fixed position, independent of other page elements. so when you add AboutMe, its like there is no other div there and it gets rendered at top of page.
to solve this problem you can either use a different style for IntroBox like:
or make AboutMe fixed too (which i don’t really recommand):