Here is my problem. The footer is overlapping when it should be at the bottom of the page.
Here the HTML code
Here is the CSS
The footer in the other pages works fine. The problem with this particular page is that the content is larger than the screen. I want the footer to be always on the bottom and disappear when the content is too large for the screen and only appear when you scroll down(As should be in this particular page).
Here the HTML code
Code:
<!DOCTYPE HTML>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="description"
content="Apparel for the young and reckless">
<meta name="kerwords"
content="Tshirts, sales, new, creation, sports, hats">
<title>The New Creation Company</title>
<link href="w3.css" rel="stylesheet" type="text/css">
<link href="website.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="w3-container w3-teal w3-large">
<ul class="w3-navbar w3-teal">
<li><a href="website.html"><i class="fa fa-home"></i></a></li>
<li><a href="team.html">Team</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="w3-dropdown-hover">
<a class="w3-green" href="#">Shop</a>
<div class="w3-dropdown-content w3-teal w3-card-4">
<a href="tshirts.html">T-Shirts</a>
<a href="#">Shorts</a>
<a href="#">Hats</a>
</div>
</li>
<li><h1>New Creation</h1></li>
</ul>
</header>
<div class="w3-row-padding w3-margin-top">
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t1.jpg">
<div class="w3-container">
<p class="bold">Long Sleeve Shirt</p>
<p class="bold">Price: $19.99</p>
</div>
</div>
</div>
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t2.jpg">
<div class="w3-container">
<p class="bold">Compression Long Sleeve Shirt</p>
<P class="bold">Price: $15.99</p>
</div>
</div>
</div>
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t3.jpg">
<div class="w3-container">
<p class="bold">Full Zip Fleece</p>
<p class="bold">Price: $10.99</p>
</div>
</div>
</div>
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t4.jpg">
<div class="w3-container">
<p class="bold">T-shirt</p>
<p class="bold">Price: $9.99</p>
</div>
</div>
</div>
</div>
<div class="w3-row-padding w3-margin-top w3-margin-bottom">
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t5.jpg">
<div class="w3-container">
<p class="bold">Hoodie</p>
<p class="bold">Price: $29.99</p>
</div>
</div>
</div>
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t6.jpg">
<div class="w3-container">
<p class="bold">Sweatshirt</p>
<p class="bold">Price: $35.99</p>
</div>
</div>
</div>
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t7.jpg">
<div class="w3-container">
<p class="bold">Base Layer Shirt</p>
<p class="bold">Price: $44.99</p>
</div>
</div>
</div>
<div class="w3-quarter w3-center">
<div class="w3-card-2">
<img class="w3-section" src="tshirts/t8.jpg">
<div class="w3-container">
<p class="bold">Fitted Sleeveless Shirt</p>
<p class="bold">Price: $25.99</p>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-teal">
<p class="foot">© The New Creation Company</p>
</footer>
</body>
</html>
Here is the CSS
Code:
h1
{
color: black;
float: right;
position: absolute;
top: -15px;
right: 30px;
}
.mySlides
{
width: 400px;
position: relative;
}
footer
{
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding: 1px;
}
.ok
{
width: 10%;
margin: auto;
font-weight: bold;
}
.avatars
{
width: 50%;
position: relative;
left: 200px;
}
p.bold
{
font-weight: bold;
}
The footer in the other pages works fine. The problem with this particular page is that the content is larger than the screen. I want the footer to be always on the bottom and disappear when the content is too large for the screen and only appear when you scroll down(As should be in this particular page).