So I reset my grid layout on a temporary practice page, though not entirely since this page's layout is extremely similar to the home page (the previous page I styled). Though, immediately I started having problems with the footer. It appears beside the content part and seems to stick there like this, no matter what I do.
The only thing that works is putting position: absolute; bottom: 0;. This does force the footer to be at the bottom, though when I do this there is a white space to the left that is ~10px which looks like this, identical to the default browser padding that should have already been disabled to start with. Nothing I do makes this spacing go away.
The home page has no problems with the footer, so I don't understand what's breaking the footer.
Relevant code:
<div class="content">
<div class="parPlaceholder">stuff</div>
<div class="footer">
<div class="footerStuff">footer placeholder thing</div>
</div>
.footer {
background-color: black;
color: white;
grid-row-start: 3;
grid-row-end: 4;
display: grid;
padding: 15px;
width: 100%;
grid-gap: 10px;
align-content: center;
}
.footerStuff {
margin: 10px 5px;
padding: 10px;
background-color: #1f1f1f;
color: white;
text-align: center;
border: 1px solid black;
}
The white space is being caused by the default browser styles on the body. This can be fixed by overwritting them with the style below.
body {
margin: 0;
}
Related
There's a small gap between all my content on my website and the end of the browser window, and I can't figure out why it's there. This is what my CSS code looks like for my Hero Image.
And this is my HTML for that image, as well as for a banner underneath the image with which I have the same separation problem.
.container {
position: relative;
text-align: center;
color: white;
}
.full-width-banner {
position: auto;
background-color: #466995;
padding: 200px;
top: 20px;
text-align: center;
height: 100px;
text-height: 40px;
width: 73%;
overflow: none;
color: white;
font-family: 'Oswald', sands serif;
font-size: 20px
}
<div class="full-width-banner">
<h2> “Change will not come if we wait for some other person or some other time. We are the ones we’ve been waiting for. We are the change that we seek.” </h2>
<p>Barack Obama<p>
</div>
This is a picture of what that creates, an empty gap between the image and the end of the browser page on the left side. The picture is supposed to completely cover its portion of the browser with no border on either side.
I don't know why this is happening or how to fix it.
By default your browser will add a few px of margin or/and padding to your body, just make sure to cleanse that at the beginning of your CSS like so:
body {
margin: 0;
padding: 0;
}
img {
display: block;
}
<img class="full-width-banner" src="https://ijnet.org/sites/default/files/styles/full_width_node/public/story/2020-07/cooper-baumgartner-J9QvzfkQM44-unsplash.jpg?h=8c0e36cd&itok=F6g99LH1">
I am making a website and I added a footer that has a link to my GitHub profile and the website repo. I've got the footer looking how I want it to except the links are right next to each other with barley any space between them. I've tried to add a paragraph with just spaces in between the links but then it made the footer just have three separate lines. How can I add some space between the links and keep them on the same line.
Here is the CSS and HTML for my footer:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: DarkGray;
text-align: center;
line-height: 50px;
}
<div class="footer">
GitHub Profile
Website Repo
</div>
I usually separate elements like that by making a class to pad the items in question. Adding padding to elements can space them out. You can change the element's placement in its parent element with various "display" settings, or use margin or even border to put space between things, or even use columns in the space provided, but padding seems to be the most appropriate use.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: DarkGray;
text-align: center;
line-height: 50px;
}
.footer-links {
padding: 0 10px 0 10px; /* padding-top, padding-right, padding-bottom, padding-left */
}
<div class="footer">
<a class="footer-links" href="[github profile url]">GitHub Profile</a> /* add this class to each of your footer items */
<a class="footer-links" href="[website repo link]">Website Repo</a>
</div>
Well, you can achieve spacing between the links using the padding property. For example: put on the links classes with the same name:
<div class="footer">
GitHub Profile
Website Repo
</div>
and then in CSS:
.footer__link {
padding-right: (your value --> it could be in px,em,rem etc.);
}
For situations like the this, I like to use flexbox. I've added the justify option to space-around in this case but there are many more options. See https://www.w3schools.com/css/css3_flexbox.asp for more info:
.footer {
position: fixed;
display: flex;
justify-content: space-around;
left: 0;
bottom: 0;
width: 100%;
background-color: DarkGray;
text-align: center;
line-height: 50px;
}
<div class="footer">
GitHub Profile
Website Repo
</div>
just use margin in your css like this:
.footer a:first-child{
margin-right: 50px(change to how much you want);
}
You can add padding or margin on both sides of the anchor tag.
.footer a {
padding: 0 10px; /**Or whatever value you want**/
}
/**OR**/
.footer a {
margin: 0 10px; /**Or whatever value you want**/
}
```
I'm creating a page, at the top of which there is a button (aligned to the right), followed by the main page content in a div.
I've encountered an issue when trying to separate the button and the main content div. The two divs are currently overlapping. I don't imagine this to be a huge issue, but I'd like to clarify what the most accepted way of separating these would be, rather than just messing about with margins etc.
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
I've found that when I add a margin-top: 50px to .main-section the button travels with it, as if it's contained within the same div.
If you are looking for best practices then consider the following:
1) Avoid using float. There are many better ways to get elements where you want them without needing to revert to a complicated process. The biggest problem with float is that it removes your element from the normal DOM flow. https://designshack.net/articles/css/farewell-floats-the-future-of-css-layout/, https://www.webdesignerdepot.com/2014/07/the-secret-to-designing-website-layouts-without-css-floats/
2) If you are navigating, then use the <a> tag. If you are doing something on the same page use a <button> or <input type='button'/> https://davidwalsh.name/html5-buttons
Here is a simple fix for what you want:
.view-all-container {
margin-bottom: 10px;
text-align: right;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
text-align: middle;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
I removed the float and changed to text-align. The <div> is already display: block so I removed that.
I assumed that your button at the top was to make changes on the active page so I changed the html from an <a> tag to a <button>.
If you don't want to use text-align then try flex-box:
.view-all-container {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
One of my favorite quotes about using float comes from this article: https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
You just need to clear the float with clear:right on .main-section
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
clear: right;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
Here is a picture example of what is happening.
I'm trying to build one of those one-page scrolling websites.
The white background indicates one page, the grey background indicates the beginning of another page.
As I start filling my white page with content, I notice that my button slowly starts sliding down and is now encroaching into the grey page. I don't want that to happen but rather for the white page to extend.
Here is my CSS for the pages:
#white-page
{
background-color: white;
height: auto;
min-height: 100vh;
text-align: center;
}
#grey-page
{
background-color: grey;
min-height: 100vh;
}
Here is my CSS for the button.
.download-center
{
text-align: center;
margin-top: 60px;
}
.btn
{
text-decoration: none;
border: 1px solid gray;
padding: 10px 20px 10px 20px;
border-radius: 25px;
color: inherit;
}
Here is the relevant HTML
<section id="white-page">
//page content here
<div class="download-center">
<a class="btn font-r" href="docs/resume.pdf" target="_blank">
<img id="download-pic" src="pic/download.svg" />Download Résumé
</a>
</div>
</section>
<section id="grey-page">
//page content here
</section>
I tried setting the height to auto for the white page but it doesn't seem to work.
Basically, I just want the page to extend as the content requires but with a minimum of vh so that it takes up the whole of the screen first.
Edit: By removing the margin-top property, here is the result. All it does it pushes the button closer to my content but still encroaches on the page borders.
The reason is you have restricted height and used margin-top:
.download-center {
text-align: center;
margin-top: 60px;
}
Adjusting margin-top to a lesser value, say 30px will make the button stay inside.
Reduce margin from top and add position as like:
.download-center {
text-align: center;
margin-top: 40px;
position: absulote;
}
I'm answering my own post because removing margin-top was not the solution that worked for me. Instead, it was increasing margin-bottom.
margin-bottom: 40px;
There seems to be random white space after the footer at the bottom of the site. When I try to use inspect element, the white space doesn't seem to fall under any tags. It doesn't seem tied to any footer tags either as removing them didn't change anything.
I'm using Ryan Fait's Sticky Footer solution for my footer.
You can test it at: http://www.edmhunters.com/martin-garrix/
Any ideas what I'm doing wrong?
try to include display:none instead of visibility:hidden to the id _atssh to get this fixed
This should fix it, it will eliminate the white space at the bottom.
Change
footer {
width: 100%;
/* height: 150px; */
padding: 10px;
background-color: black;
color: white;
height: 100%;
}
To
footer {
width: 100%;
height: 100%;
padding: 10px;
background-color: black;
color: white;
height: 100%;
}
I don't know if you have to keep the visibility property but you should use display none here:
<div id="_atssh" style="visibility: hidden; display: none;">