Firstly, I am VERY VERY new to coding in HTML and CSS. I've been studying for exactly a week now, and I thought I'd practice around to try and help me remember some of the elements, properties and attributes. Therefore, the code you are about to witness may hurt your eyes, but any help on the matter would be greatly received.
I'm designing a website (which is very likely never to go live even its final form) and I started messing around with the footer element. A bit later on, I discovered you can make a div element for a footer. However, whichever method I use, it always ends up covering text on my screen. It does stick to the bottom of the page until I scroll down, and it covers the body content at all times. I'm aware it's likely due to the CSS code styling the body, but I can't for the life of me figure it out.
I've kept it as a div for now, but if a footer would be better used then please do let me know. I absolutely want to perfect whatever mistakes I'm making as soon as I encounter them.
nav a {
color: black;
font-family: 'DM Sans', sans-serif;
font-size: 1.2em;
padding: 12px;
text-decoration: none;
width: 80%;
text-align: center;
padding-left: 5em;
padding-right: 2em;
}
.row {
display: flex;
}
.left-column {
height: 40vh;
flex: 50%;
}
.right-column {
height: 35vh;
flex: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#right-col-home {
background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
margin-top: 12em;
}
.nav-bar {
border-width: 0em;
border-color: ghostwhite;
border-bottom: 0.15em solid gray;
font-family: 'Poppins', sans-serif;
background-color: ghostwhite;
overflow: auto;
padding: 0.8em;
margin-bottom: 2em;
}
.second-body {
font-family: 'Poppins', sans-serif;
padding-left: 10em;
padding-right: 10em;
color: slategray;
}
.main-heading {
font-size: 3em;
color: slategrey;
}
.body-text {
font-size: 1.0em;
}
.job-list {
font-size: 1.0em;
}
.main-body {
background-color: ivory;
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
.question {
font-size: 1.7em;
font-weight: bolder;
}
.answer {
font-size: 1em;
}
.footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}<head>
<title>Cleaning by Mark</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM Sans&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body >
<nav class=nav-bar>
<span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
<a href="index.html">HOME</a>
<a href="faq.html">FAQ</a>
<a href="contact.html">CONTACT</a>
<a href="gallery.html">GALLERY</a>
</nav>
<div >
<div >
<div >
<h1 >FAQ</h1>
<h2>Some frequently asked questions with answers:</h2>
<br>
<br>
<h2 >What services do you provide?</h2>
<h3 >A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service,
feel free to access the 'Contact' page and get in touch any time.</h3>
<h2 >What are your prices?</h2>
<h3 >It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
<br>
<h2 >Are you able to clean rooves on houses?</h2>
<h3 >Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
<h2 >Do I need to provide anything?</h2>
<h3 >Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the
cost of water will be deducted from your final invoice!</h3>
</div>
<div id="right-col-home">
</div>
</div>
</div>
<!-- Footer -->
<div >
© 2022 | commercialcleaning.com | Designed by Kieran|
</div>
</body>Thanks in advance.
CodePudding user response：
Remove your vh units, those are problematic in this instance because on smaller devices the excessive text may exceed the set vh and 'bleed' below the footer.
Then change your footer to position: relative; and set a min-height: 100%; on the .second-body.
html,
body {
margin: 0;
height: 100%;
}
nav a {
color: black;
font-family: 'DM Sans', sans-serif;
font-size: 1.2em;
padding: 12px;
text-decoration: none;
width: 80%;
text-align: center;
padding-left: 5em;
padding-right: 2em;
}
.row {
display: flex;
}
.left-column {
height: 100%;
flex: 50%;
}
.right-column {
flex: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#right-col-home {
background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
}
.nav-bar {
border-width: 0em;
border-color: ghostwhite;
border-bottom: 0.15em solid gray;
font-family: 'Poppins', sans-serif;
background-color: ghostwhite;
overflow: auto;
padding: 0.8em;
margin-bottom: 2em;
}
.second-body {
font-family: 'Poppins', sans-serif;
padding-left: 5em;
padding-right: 5em;
color: slategray;
display: flex;
min-height: 100%;
}
.main-heading {
font-size: 3em;
color: slategrey;
}
.body-text {
font-size: 1.0em;
}
.job-list {
font-size: 1.0em;
}
.main-body {
background-color: ivory;
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
.question {
font-size: 1.7em;
font-weight: bolder;
}
.answer {
font-size: 1em;
}
.footer-bottom {
background: #343a40;
color: #686868;
padding: 25px 0;
text-align: center;
position: relative;
bottom: 0px;
left: 0px;
padding-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Cleaning by Mark</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM Sans&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body >
<nav class=nav-bar>
<span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
<a href="index.html">HOME</a>
<a href="faq.html">FAQ</a>
<a href="contact.html">CONTACT</a>
<a href="gallery.html">GALLERY</a>
</nav>
<div >
<div >
<div >
<h1 >FAQ</h1>
<h2>Some frequently asked questions with answers:</h2>
<br>
<br>
<h2 >What services do you provide?</h2>
<h3 >A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service,
feel free to access the 'Contact' page and get in touch any time.</h3>
<h2 >What are your prices?</h2>
<h3 >It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
<br>
<h2 >Are you able to clean rooves on houses?</h2>
<h3 >Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
<h2 >Do I need to provide anything?</h2>
<h3 >Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the
cost of water will be deducted from your final invoice!</h3>
</div>
<div id="right-col-home"></div>
</div>
</div>
<!-- Footer -->
<div >
© 2022 | commercialcleaning.com | Designed by Kieran|
</div>
</body>CodePudding user response：
Try adding overflow-y:hidden; to the .footer-bottom class.
It's pretty straight forwards — will prevent page overflow on a vertical axis.
EDIT:
If this doesn't help, you could use section tags and pad these (which would be your better option).
ie)
<section title="Section1">
<!-- Apply padding to top and bottom of Section1 in CSS. -->
Content here
</section>
<section title="Footer">
<!-- Apply padding to top of Footer in CSS. -->
Content here
</section>
Hope this helps. Cheers!
CodePudding user response：
At a glance, it looks like your footer is set to have "absolute" position. When you do this, it's not taking into account anything that may be hidden behind it.
The way I usually remedy this is to add more margin to the content behind it - in this case, it would be extra margin in the bottom.
This way, the hidden content will have extra space to scroll further down, thus bringing the hidden content into view (above the footer).
EDIT: I think I was describing an issue which wasn't really your problem.
You can do "position: fixed" if you want the footer to be fixed in place, even with scroll (if you want to do that).
If you want to continue with "absolute" position, note that wherever the reference point of "bottom: 0" is is depending on the parent container, which I think is body in this case. If the container is "position: relative" (like if it was inside a div which you styled to have relative position), then it would take the bottom of that div.
So if your footer moves in an undesirable way when you scroll, it's because it's anchored to the bottom of the parent/container (which is position: relative). So you should address the parent - if you want the footer to always be at the bottom of the page, then the footer's anchor/parent should be at the bottom of the document.
Hope some of this information is helpful!
CodePudding user response：
No HTML5 existem tags semânticas que substituem algumas como por exemplo a do rodapé que que para ficar mais legível você pode inserir
exemplo
<footer>
© 2022 | commercialcleaning.com | Designed by Kieran|
</footer>
Assim como para o cabeçalho se usa a tag:
<header></header>
e para o meio do conteúdo a tag:
<main></main>
CodePudding user response：
<!DOCTYPE html>
<html>
<head>
<title>Cleaning by Mark</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM Sans&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<style>
nav a {
color: black;
font-family: 'DM Sans', sans-serif;
font-size: 1.2em;
padding: 12px;
text-decoration: none;
width: 80%;
text-align: center;
padding-left: 5em;
padding-right: 2em;
}
.row{
display: flex;
}
.left-column {
height: 80vh;
flex: 50%;
}
.right-column {
height: 35vh;
flex: 50%;
background-position: right;
background-size: contain;
background-repeat: no-repeat;
}
#right-col-home {
background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
margin-top: 12em;
}
.nav-bar {
border-width: 0em;
border-color: ghostwhite;
border-bottom: 0.15em solid gray;
font-family: 'Poppins', sans-serif;
background-color: ghostwhite;
overflow: auto;
padding: 0.8em;
margin-bottom: 2em;
}
.second-body {
font-family: 'Poppins', sans-serif;
padding-left: 10em;
padding-right: 10em;
color:slategray;
}
.main-heading {
font-size: 3em;
color: slategrey;
}
.body-text {
font-size: 1.0em;
}
.job-list {
font-size: 1.0em;
}
.main-body {
background-color: ivory;
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
.question {
font-size: 1.7em;
font-weight: bolder;
}
.answer {
font-size: 1em;
}
.footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
text-align: center;
position:relative;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
#aFooter {
position: relative;
min-height: 150px;
bottom: 0px;
left: 0px;
}
#aFooter-content {
position: absolute;
bottom: 0;
left: 0;
}
#aFooter, #aFooter * {
background: rgba(40, 40, 100, 0.25);
}
</style>
<body >
<div>
<nav class=nav-bar>
<span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
<a href="index.html">HOME</a>
<a href="faq.html">FAQ</a>
<a href="contact.html">CONTACT</a>
<a href="gallery.html">GALLERY</a>
</nav>
<div >
<div >
<div >
<h1 >FAQ</h1>
<h2>Some frequently asked questions with answers:</h2>
<br>
<br>
<h2 >What services do you provide?</h2>
<h3 >A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service, feel free to access the 'Contact' page and get in touch any time.</h3>
<h2 class = "question">What are your prices?</h2>
<h3 class = "answer">It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
<br>
<h2 class = "question">Are you able to clean rooves on houses?</h2>
<h3 class = "answer">Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
<h2 >Do I need to provide anything?</h2>
<h3 >Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the cost of water will be deducted from your final invoice!</h3>
<BR><BR> <br> <br> <br><br> <BR>
<BR><br><br> <br><br><BR><br><br> <br><br>
</div>
</div>
<div id="right-col-home">
This is right column.
</div>
</div>
</div>
<div id="aFooter">
<center> <h1>Footer</h1>
<div id="header-content"> © 2022 | commercialcleaning.com | Designed by Kieran| </div>
<center>
</div>
</body>