Andrea Andrea - 11 days ago 5
CSS Question

I've created vertical divs and want to show each div to fill the entire page before scrolling

I am new to coding and am stuck trying to fit each div to the screen (see the triangle buttons that move to the next section - ideally I want those to move to a "new page" or "new screen" if that makes sense). Thanks!

<!DOCTYPE html>
<html>
<head>
<title>Budget</title>
<style>
h1 {font-family: "Footlight MT Light";
font-size: 52px; color: white; font-weight: bold; }
h2 {font-family: "Footlight MT Light";
font-size: 42px; color: white; font-weight: bold; }
h3 {font-family: "Footlight MT Light";
font-size: 32px; color: white; font-weight: bold; }
h4 {font-family: "Footlight MT Light";
font-size: 22px; color: white; font-weight: bold; }
h5 {font-family: "Footlight MT Light";
font-size: 16px; color: white; font-weight: bold; }
h6 {font-family: "Footlight MT Light";
font-size: 12px; color: white; font-weight: bold; }
p {font-family: "Footlight MT Light";
font-size: 20px; color: white; font-weight: none; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}

li {
float: right;
}

li a {
display: block;
color: #FC4A1A;
font-family: "Footlight MT Light";
font-size: 22px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #062f4f;
}
p {
margin: 0;
}
h1{
margin: 0;
}
</style>
</head>
<body>
<div style=background-color:#f7b733;">
<ul><strong>
<li><a href="#contact">Contact</a></li>
<li><a href="#ideas">Ideas</a></li>
<li><a href="#work">Our Work</a></li>
<li><a href="#us">About Us</a></li></strong>
</ul>
<h1><center>Let's Make Your Budget Experience Extraordinary</center></h1><br>
<p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p>
<h1 style="text-align: center;"><strong><a href="#section2" style="text-decoration:none"><font color="#4abdac">&#128315</font></a></strong></h1><br>
</div>

<div style="background-color:#4abdac;">
<h1 id="section2"><h1 style="text-align: left;">Making budget offices better</h1>
<p>Here's a caption on making budget offices better.</p><br>
<h1 style="text-align: center;"><strong><a href="#section3" style="text-decoration:none"><font color="#062f4f">&#128315</a></strong></h1><br>
</div>

<div style="background-color:#062f4f;">
<h1 id="section3"><h1 style="text-align:right;">Learn All About Budget</h1>
<p style="text-align:right;">Here's a caption on learning about budget processes.<h1 style="text-align: center;"><strong><a href="#section4" style="text-decoration:none"><font color="#9c9b9b">&#128315</a></strong></h1> <br>
</div>

<div style="background-color:#9c9b9b;">
<h1 id="section4"><h1 style="text-align:left;">We Make Technology Accessible</h1>
<p>Here's a caption about how we can use technology to improve your processes.</p><br>
<h1 style="text-align: center;"><strong><a href="#section5" style="text-decoration:none"><font color="#FC4A1A">&#128315</a></strong></h1><br>
</div>

<div style="background-color:#FC4A1A;">
<h1 id="section5"><h1 style="text-align:right;">Grow Your Career</h1>
<p style="text-align:right;">Here's a caption on career development.</p><br>
</div>

<div>
<div id="column1" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Get in touch
</span></h3>
<p style="padding: 2px; color: #062f4f;">B
and SOCIAL MEDIA ICONS</p>

</div>
<div id="column2" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Sign Up </span></h3>
<p style="padding: 2px; color: #062f4f;">sign up here.</p>

</div>
<div id="column3" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Send Us Your Ideas
</span></h3>
<p style="padding: 2px; color: #062f4f;">Link to detailed use case form.</p>

</body>
</html>

Answer

You could do something like this: https://jsfiddle.net/uorwdwzc/1/

a{
  color: #fff;
  font-size: 25px;
}
#slide1{
  width: 100%;
  height: 100vh;
  background-color:blue;
}
#slide2{
  width: 100%;
  height: 100vh;
  background-color:red;
}
#slide3{
  width: 100%;
  height: 100vh;
  background-color:green;
}
<div id="slide1">
  <h1>
  Page 1
  </h1>
  <a href="#slide2">Next Page</a>
</div>
<div id="slide2">
    <h1>
    Page 1
    </h1>
    <a href="#slide3">Next Page</a>
</div>
<div id="slide3">
    <h1>
    Page 1
    </h1>
    <a href="#slide1">Back to Top</a>
</div>

I just made this quickly but you could add triangular buttons and additional styling to suit your needs.

If you want to make it slide to instead of jump you will need to add JS.

Comments