Hi i'm new to learning HTML/CSS, i'm currently struggling to see why my footer is overlapping my webpage, i've tried to use postion: fixed; & bottom:0; to keep it at the bottom but that's not working , the answer is probably obvious to someone, i'll appreciate any help on this, see my html/css code below.
Image of webpage > https://i.sstatic.net/gOX3m.jpg
HTML
<body>
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="text" placeholder="Password" name="" value="">
</div>
<input class="btn" type="button" name="" value="Sign In">
</div>
</section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Log In</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">My Surveys</a></li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</body>
CSS
}
body{
height:100%;
background-color:black !important;
}
/*-------------header-----------*/
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in-out;
}
/*-------------nav-----------*/
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
/*-------------slider-----------*/
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider,.slider ul,.slider ul li
{
height:700px;
width:100%;
color:white;
text-align: center;
padding:0px;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
/*-------------login-----------*/
.login-box
{
width:280px;
position:absolute;
top:1000px;
left:50%;
transform: translate(-50%, -50%);
color:white;
}
.login-box h1
{
width:100px;
font-size:40px;
border-bottom: 6px solid darkorange;
margin-bottom:50px;
padding:13 px 0;
}
.textbox
{
width:100%;
overflow:hidden;
font-size:20px;
padding:8px 0;
margin:8px 0;
border-bottom: 1px solid darkorange;
}
.textbox i
{
width:26px;
float:left;
text-align:center;
}
.textbox input
{
border:none;
outline:none;
background:none;
color:white;
font-size:17px;
width:80%;
float:left;
margin:0 10px;
}
.btn
{
width:100%;
background:none;
border:2px solid darkorange;
color:white;
padding:5px;
font-size:17px;
cursor:pointer;
margin:12px 0;
}
.btn:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
/*-------------footer-----------*/
.footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
position:fixed;
}
footer nav
{
text-align:center;
}
footer nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
footer nav ul li a:hover
{
text-decoration: none;
color:black;
}
The problem is in your CSS outside of the footer. In the selector .slider, .slider ul, .slider ul li, you have height: 700px;. Because you have 3 of these elements, it's essentially being stretched down 2100 px! Because you have the footer set to position: fixed; it wants to stay at that position on the screen, even though there is already content there.
This is how these 2 selectors should look:
.slider, .slider ul, .slider ul li{
width:100%;
color:white;
text-align: center;
padding:0px;
}
footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
}
body{
height:100%;
background-color:black !important;
}
/*-------------header-----------*/
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in-out;
}
/*-------------nav-----------*/
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
/*-------------slider-----------*/
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider, .slider ul, .slider ul li{
width:100%;
color:white;
text-align: center;
padding:0px;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
/*-------------login-----------*/
.login-box
{
width:280px;
position:absolute;
top:1000px;
left:50%;
transform: translate(-50%, -50%);
color:white;
}
.login-box h1
{
width:100px;
font-size:40px;
border-bottom: 6px solid darkorange;
margin-bottom:50px;
padding:13 px 0;
}
.textbox
{
width:100%;
overflow:hidden;
font-size:20px;
padding:8px 0;
margin:8px 0;
border-bottom: 1px solid darkorange;
}
.textbox i
{
width:26px;
float:left;
text-align:center;
}
.textbox input
{
border:none;
outline:none;
background:none;
color:white;
font-size:17px;
width:80%;
float:left;
margin:0 10px;
}
.btn
{
width:100%;
background:none;
border:2px solid darkorange;
color:white;
padding:5px;
font-size:17px;
cursor:pointer;
margin:12px 0;
}
.btn:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
/*-------------footer-----------*/
footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
}
footer nav
{
text-align:center;
}
footer nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
footer nav ul li a:hover
{
text-decoration: none;
color:black;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="text" placeholder="Password" name="" value="">
</div>
<input class="btn" type="button" name="" value="Sign In">
</div>
</section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Log In</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">My Surveys</a></li>
</ul>
</nav>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>