I added a footer in which it is not reaching the bottom of the page and is covering content from my website, here is a picture of this problem. the footer covers text from underneath the two images. Is there any way for the footer to always remain at the bottom; not covering any extra content added in the future.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
*{
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#content {
min-height: 100%;
position: relative;
margin-bottom: 200px;
}
#main {
padding-bottom: 100px;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
min-height: 400px;
z-index:-1;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.b1{
text-align: center;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
/*----------footer------------*/
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div id="main">
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
</div>
<div class="content">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.
</p>
</div>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
Have a look at the example below. I've added comments to the changes made
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
*{
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* Instead of a margin or bottom set nothing unless recuired. Better to use padding */
#content {
min-height: 100%;
position: relative;
}
#main {
padding-bottom: 100px;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
min-height: 400px;
z-index:-1;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.b1{
text-align: center;
}
/* Remove hard coded height */
.pic-1{
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
width:420px;
float: right;
padding-right: 100px;
}
/*----------footer------------*/
/* Set to position relative and bottom 0 */
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div id="main">
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
</div>
<div class="content">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.
</p>
</div>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
Related
I have made an about page for my class assignment. Everything worked fine until I used the inspect option to see if my webpage is responsive to other devices. It was not responsive, I tried to see what is wrong with the code but I could not find an error in my codes after 5 hrs. Help would be appreciated.
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: white;
background-color: black;
}
.title12{
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.p1{
text-align: center;
font-size: 20px;
margin-top: 200px;
}
h1{
text-align: center;
}
.h2{
margin-top: 400px;
}
.reviews{
margin-top: 400px;
margin-left: 300px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
padding: 16px;
text-align: center;
background-color: black;
}
.re1{
width: 250px;
}
.re3{
width:250px;
height: 350px;
}
.container2{
display: flex;
flex-direction: column;
justify-content: center;
align-items:justify;
text-align: center;
margin: 40px 20px 0 20px;
margin-top: 80px;
}
.container2 .heading{
width: 50%;
padding-bottom: 50px;
}
.container2 .heading h3{
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid white;
}
.container2 .heading h3 span{
font-weight: 100;
color: #fff;
}
.con2{
margin-top: auto;
margin-top: 900px;
}
.container{
max-width: 1280px;
margin: 2 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav{
position:fixed;
top:0;
left:0;
right:0;
z-index: 99;
background-color: black;
padding: 16px 32px;
border-bottom: 3px solid blue ;
}
.menu{
display:flex;
justify-content: flex-end;
margin: 0 -16px;
flex: 1 1 0%;
}
.menu a{
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding:8px 16px;
border-radius: 90px;
}
.menu a.highlight, .menu a:hover{
background-color:red;
}
a{
font-size: 25px;
text-decoration: none;
}
body {
margin: 0px;
font-weight: 400;
}
video {
width: 50%;
float: left;
margin-bottom: 35px;
}
.normal{
width: 100%;
}
.footer{
padding: 40px 0;
background-color: black;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: white;
}
.footer .social a{
font-size: 24px;
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 0.9;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
color: red;
}
.footer .copy{
margin-top: 15px;
text-align: center;
font-size: 13px;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/57160f5774.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>About Us</title>
</head>
<body>
<nav>
<div class="container">
<div class="menu">
Home
Products
PC Designs
Support
Build Your PC
</div>
</div>
</nav>
<img style="float: left; height: 750px;" src ="About us/V388-SUPRIM.png">
<div class="title12">
<h1>SUPRIMX</h1>
</div>
<div class="p1">
<p>SUPRIMX is a world leader in gaming, content creation, business & productivity and AIoT solutions. </p>
<p>Bolstered by its cutting-edge R&D capabilities and customer-driven innovation, SUPRIMX has a wide-ranging global presence spanning over 120 countries. Its comprehensive lineup of laptops, graphics cards, monitors, motherboards, desktops, peripherals, and telematics systems are globally acclaimed.</p>
</div>
<div class="reviews">
<div class="container2">
<div class="heading">
<h3>Reviews<span> </span></h3>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3><img class="re1" src="About us/kayla.jpg"></h3>
<br>
<p>Kayla </p>
<br>
<p>
Amazing website to buy a lot of products!.
</p>
</div>
</div>
<div class="column">
<div class="card">
<br>
<br>
<h3><img class="re2" src="About us/Curtis.jpg"></h3>
<br>
<p>Curtis</p>
<br>
<p>5 stars!!</p>
</div>
</div>
<div class="column">
<div class="card">
<h3><img class="re3" src="About us/Tyler.jpg"></h3>
<br>
<p>Tyler</p>
<br>
<p>Incredible website!</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<section class="footer">
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</div>
<ul class="list">
<li>
Home
</li>
<li>
About SUPRIMX
</li>
<li>
Forums
</li>
<li>
Products
</li>
<li>
Support
</li>
</ul>
<p class="copy">
SUPRIMX © 2022
</p>
</section>
</body>
</html>
I have this issue with my CSS where I have lots of content in my HTML but in my browser, in the responsive version it won't scroll anymore, in other words, it stops when there is more content to display. How can I prevent that from occurring? It's been happening for quite some time now. Here is my HTML and CSS code I will add the full code.
p.s. what I mean is that in the developer tools in chrome in order to view the website on different devices it stops in the about section it does not show my javascript skills.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto+Slab:wght#100&display=swap"
rel="stylesheet">
<title>Portfolio</title>
</head>
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 100px;
background-color: #111;
padding: 0 5px;
}
header .logo-link {
}
header .logo-link .logo-img {
width: 100px;
height: 100px;
}
header .box {
display: inline-block;
float: right;
}
header .box .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
}
nav {
display: none;
position: absolute;
right: 0;
top: 100px;
width: 45%;
height: 40%;
background-color: #111;
padding-bottom: 20px;
}
nav .ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav .ul .li {
margin-top: 30px;
padding: 0 15px;
padding-bottom: 15px;
}
nav .ul li .li-a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page {
background-color: #111;
width: 100%;
height: 100vh;
}
.landing-page .title {
margin: 0 0 20px 2px;
color: #fff;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page .name {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
padding-left: 15px;
}
.landing-page h3 {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
margin: 10px 0 0;
padding-left: 15px;
padding-top: 20px;
}
.landing-page .mission {
color: #fff;
margin-top: 20 0 0px;
font-size: 18px;
padding-top: 20px;
line-height: 18px;
}
.landing-page .check-out {
border: 1px solid #fff;
color: #fff;
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 200px;
margin-left: 80px;
margin-top: 50px;
}
#about {
background-color: #111;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
#about .bar .skill,
p {
color: #fff;
font-size: 18px;
}
#about .bar {
width: 100%;
background-color: #ddd;
}
#about .bar .skill {
text-align: right;
padding-top: 10px;
}
#about .bar p {
text-align: left;
}
<body>
<header class="header">
<img src="img/logo.png" alt="" class="logo-img">
<div class="box">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</header>
<nav class="nav">
<ul class="ul">
<li class="li">About</li>
<li class="li">Projects</li>
<li class="li">Contact</li>
</ul>
</nav>
<section class="landing-page">
<h1 class="title">Hello world! My name is</h1>
<h2 class="name"> Jorge Artaza. </h2>
<h3>I am a Full Stack Developer</h3>
<p class="mission">My mission is to develop lightning fast website, apps, games, and software that are user friendly.</p>
<p class="check-out">Check out my <br> Portfolio <span>▼</span></p>
</section>
<section id="about">
<div class="img-about">
<img src="" alt="">
<h2>Who am I?</h2>
<p>I am a self taught developer. My interest started at a young age and started to create from that point onward. When I am not developing I am working out or relaxing.</p>
</div>
<p class="my-skills">My Skills</p>
<div class="bar">
<div class="skill ">
<p>HTML</p>
80%
</div>
</div>
<div class="bar">
<div class="skill">
<p>CSS</p>
80%
</div>
</div>
<div class="bar">
<div class="skill js">
<p>JavaScript</p>
70%
</div>
</div>
</section>
</body>
Here is the solution, you need to put that in the head, for the site adjust for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
If you want know more: Meta viewport - Mozilla
Also, i will recomend you make some changes on your code:
1 - Remove the heights 100vh and put a fix hight for you components, like 500px, 400px. Examples: height: 300px;;
2 - Your code is like a puzzle, put a background-color in your body, not in the components, if you want that the entire page has a black background-color;
3 - Put the sections inside of a main(father element), with that you can use the flex box for adjust your code;
4 - There is on Youtube some great videos about do a better header, i realy don't like this float:righ, because it can bring some problems for you code, like messing the positions of the others elements;
6 - Use the media queries for a better display on the mobile devices, as well - Media Queries | Media Queries - Mozilla
Exemple about the sections:
<main class="main">
<section></section>
<section></section>
</main>
I will recomend this video about the header, because is the only i have watched in english, but you can have an idea: Header video
I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this keeps asking me for more details but I have no more details to give.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
widows: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* Header */
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 4px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 12px;
}
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
text-align: center;
color: #3433FF;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/* For Tenants */
#cozy {
padding: 15px;
background: #35424a;
}
.button_1 {
float: right;
margin-top: 15px;
}
/*Boxes*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#main {
margin-top: 20px;
}
#main .box {
float: left;
text-align: center;
width: 33%;
padding: 10px;
display: inline-block;
}
#main .box assets {
width: 100px;
}
/*Footer*/
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="Properties for lease">
<meta name="keywords" content="lakeland, oldsmar, lutz">
<meta name="author" content="SAGS PROPERTIES LLC">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAGS PROPERTIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span>SAGS Properties LLC</span></h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Lutz</li>
<li>Oldsmar</li>
<li>Lakeland</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Well Managed Properties</h1>
<p>In Lutz, Oldsmar and Lakeland</p>
</div>
</section>
<section id="cozy">
<div class="container">
<button type="submit" class="button_1">Tenants Click Here</button>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lutz.jpg">
<h3>Lutz</h3>
<p>Lakeview at Calusa Trace</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lakeland.jpg">
<h3>Lakeland</h3>
<p>Cobblestone Landing</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Oldsmar.jpg">
<h3>Oldsmar</h3>
<p>Gardens at Forrest Lakes</p>
</div>
</div>
</section>
<footer>
<p>SAGS PROPERTIES LLC © 2018</p>
</footer>
</body>
</html>
There are no more details to give. Making a question is as frustrating as learning this!!!
I added a background to my website however the background image is not covering the left and right-hand side of the menu, I thought it was because the menu border being extended so I added a coloured border to see if this is true but the border of the menu is only around the menu so I'm confused why the background image is not showing
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background: url(https://placekitten.com/200/300);
background-position: center;
background-repeat: no-repeat;
display: block;
background-size: cover;
background-attachment: fixed;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.title {
text-align: center;
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('https://placekitten.com/400/300') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 400px;
min-height: 400px;
z-index:-1;
}
.b1{
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 82%;
left: 42.5%;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
ul {
margin: 0 auto;
width: 350px;
border: 2px solid red;
overflow: hidden;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
display: block;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #1e1e1e;
padding:0px 20px;
}
#nav {
width:100%;
height:80px;
background-color:#fff;
}
<html>
<head>
<title>Croydon Cycles</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="style.css" rel= "stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body background="background.jpg" z-index="1">
<div class="title">
<h1>Croydon Cycles</h1>
</div>
<div class="menu">
<nav id="nav">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Shop</li>
<li>Location</li>
</ul>
</nav>
</div>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
<div class="b1">
<a href="shop.html">
<input type="button" class="button" value="view all bikes" >
</a>
</div>
</div>
</div>
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="images/profile-1.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="images/profile-2.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</body>
</html>
There where 2 issues:
1) background: url(images/background.jpg); single quotes missing
2) background-color:#fff; in #nav
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background: url('data:image/jpeg;base64,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');
background-position: center;
background-repeat: no-repeat;
display: block;
background-size: cover;
background-attachment: fixed;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.title {
text-align: center;
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('data:image/jpeg;base64,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') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 400px;
min-height: 400px;
z-index:-1;
}
.b1{
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 82%;
left: 42.5%;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
ul {
margin: 0 auto;
width: 350px;
// border: 2px solid red;
overflow: hidden;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
display: block;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #1e1e1e;
padding:0px 20px;
}
#nav {
width:100%;
height:80px;
// background-color:#fff;
}
<html>
<head>
<title>Croydon Cycles</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="style.css" rel= "stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body background="background.jpg" z-index="1">
<div class="title">
<h1>Croydon Cycles</h1>
</div>
<div class="menu">
<nav id="nav">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Shop</li>
<li>Location</li>
</ul>
</nav>
</div>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
<div class="b1">
<a href="shop.html">
<input type="button" class="button" value="view all bikes" >
</a>
</div>
</div>
</div>
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="images/profile-1.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="images/profile-2.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</body>
</html>
So I've been stuck on this issue for over a week now and it's driving me crazy. I want to position my footer at the bottom of my web page. For some reason, it just wants to float in the middle of the page, right underneath my last div. I've done a lot of research and tried a million different things, and none of them have given me the results that I need.
Here are a few of the solutions that I've tried:
I played around with the position property, setting it to 'absolute', 'relative' and 'fixed'. 'Relative' pushed the footer down, but also pushed the content underneath it down as well. 'Absolute' worked in positioning it at the very bottom, but for some reason it cut the width of the footer off. (I tried manually adjusting the width back, but no luck). Same thing with 'fixed'.
I set the margins and padding of the body and html content to 0.
I set the height of the body to 100%.
I checked to make sure all tags were closed.
I tried placing the footer outside of the body.
I've tried creating new divs before and around the footer.
At this point, I'm not sure what the issue is. Can someone assist me?
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
In your css Change
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
to
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
Or you can try
.footer p {
padding-bottom: 0px !important;
}
You have a p element inside your footer that has padding-bottom: 200px;.
You will need to remove it or change the style of the p that inside a footer.
Try this. This will stick your footer at the bottom of the page. I also removed the padding of the paragraph inside of your footer.
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.footer p {
padding-bottom: 0;
}
Working fiddle : https://jsfiddle.net/zrbzf22v/
Change your html like that :
<footer class="footer">
<p style=" bottom: 0px;
padding-bottom: 0px; ">Here's the footer</p>
</footer>
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
bottom: 0;
}
p {
padding-bottom: 0px;
}
Check this Your footer at bottom
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
margin:0px;
width:100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
I use this and i have tested it in your project. its working
footer{
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
text-align: center;
}