I can't add a footer to the bottom of the page. It always displays in the middle of the page or something like that. It would be cool if there was some way to modify the footer div element to always show on the bottom of the page, even after adding more stuff to the center/top of the page (so not a fixed position).
Here's what I'm up to in CSS: (the id of the div is ofc "footer")
#footer {
text-align: center;
margin: 0px auto;
position: bottom;
bottom: 0px;
font-size: 10px;
padding: 10px;
}
I used something similar for my header (logo), and based on that I tried working the same with the footer with no success. Here's my header CSS, just for reference:
#logo {
position: center;
margin:0px auto;
top:0px;
text-align: center;
}
I used an image for the logo without any text and only text for the footer.
You need to add the following styles to your footer div in order to make it stick to the bottom of your website:
#footer {
position: absolute;
bottom: 0;
}
Related
I have made footer for my website and it works fine until i press f11/go into fullscreen, where the footer is suddenly placed not all the way at the bottom but there is a space between my footer and the bottom of my page where there is only white/my background color. Shown in the pictures linked below:
Normal: https://i.stack.imgur.com/Cxi35.png
In fullscreen: https://i.stack.imgur.com/405JV.png
html
footer {
background-color: #000000;
border-color: #000000;
position: relative;
line-height: 10px;
width: 100%;
height: 50px;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
line-height: 50px;
font-size: 10px;
}
<div class="footer">
<footer>
<a>text</a>
</footer>
</div>
You almost have it. If you want it to always be at the end of the page (even with scrolling), use position: absolute. To avoid it covering content at the end of the scroll, give the html tag padding on the bottom.
html {
padding-bottom: 50px;
}
footer {
background-color: #000000;
border-color: #000000;
position: absolute;
line-height: 10px;
width: 100%;
height: 50px;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
line-height: 50px;
font-size: 10px;
}
<div class="footer">
<footer>
<a>text</a>
</footer>
</div>
There are multiple ways to solve this.
You can use add the following to your footer :
position : absolute;
bottom: 0;
left : 0;
width : 100%
The problem with this is that when the rest of the content on your page gets long enough to get to the footer's position, the footer would overlay it. You can solve this by adding a bottom margin to the last div before your footer that's at least the height of the footer.
Another way to deal with it is to give the body a minimum height of 100vh and either make it flex and give the footer a margin top of auto or give the footer a fixed height and give it a margin top of auto. Should work just as well.
(Quick tip if you didn't already know: there's footer tag in HTML that you could use instead of a div tag. It makes absolutely no difference but does provide semantic help for someone reading your code)
body{
background:white;
color:darksalmon;
padding:0;
margin:0;
height:100%;
width:100%;
}
.foot{
background:black;
color:lightblue;
bottom:0;
position:fixed;
width:100%;
height:18%;
}
<body>
<div class="foot">
<footer>
text
</footer>
</div>
Try this it worked for me when I was struggling with thesame problem
On this page http://goo.gl/m2s1dA
I want to bring the whole header layer "header-container" as below on top of everything and anything inside of "container-site" should appear behind the header when scrolling.
Below is my code.
Full width div
.header-container {
position: fixed;
width: 100%;
z-index: 10000;
}
Fixed width div to center align header and some styling
.header-wrapper {
margin-bottom: -1px;
border-radius: 0;
border-bottom: 1px solid #cc6666;
height: 263px;
position: relative;
display: block;
width: 1140px;
margin: 0px auto;
}
Then body of the page
.container-site {
margin: 0px auto;
width: 1140px;
padding-top: 280px;
}
Currently only the headings (h1, h2, h3) are appearing behind the header. I am using Bootstrap.
From what I understand you want the header to be above all content and fixed to the top of page. In your code, the header-container is inside a fixed parent:
<div class="glass">
<div class="header-container">
...
</div>
</div>
what you have to do is simply add z-index to the parent of the header like this:
.glass { z-index: 1; }
This should fix your problem however, your header is transparent and that creates visual problems when text is under the header elements...
Header is on top but can't figure out it because it is transparent. give .header-container {background:#fff} and see how it looks like.
I am having some trouble, my footer won't stay at the bottom of the page, it "sticks" to the bottom of the screen when I scroll.
It ends up covering up parts of the page as I scroll and gets quite annoying.
Here is my HTML:
<div id="footer" style="text-align: center">
<p>Designed by ddrossi93. ©2015. All Rights Reserved.</p>
</div>
And my CSS:
#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: fixed;
width:100%;
}
If you need more info, let me know and I can post more of my code.
You should change the position:fixedtoposition:relative,not position:absolute. fixedmakes your element stay at a specified position relative to the screen's viewport and will not move when scrolled.If you change to absolute,you have to add position:relative to the containing block or the ancestor,so it will not sit in the middle of your page.Change to relative is the right way.
As to "some white space left at the bottom"? Try to add the following code in your style:
body {margin:0;}
position: fixed;
Means your footer will hover at the bottom of the page, the same way a navbar will on many websites. If you want your footer to stay at the bottom of the page, you need to change position to something else like absolute or relative. Here's a link to more info. http://www.w3schools.com/css/css_positioning.asp
Try changing the position in the CSS to absolute.
#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: absolute;
width:100%;
}
Another solution is to set the margin and padding of the body element to 0;
body {
padding: 0;
margin: 0;
}
So im making a very basic website with a photo gallery, I have this css for my footer.
#footer
{
color: #f0c;
font-size: 9px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #c00;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 18px
And the bar does not scroll down with the rest of the page, instead scrolls up with the page like this: http://i.imgur.com/yqM9WDM.png
Help much apreciated!
I'm not totally sure what you're trying to achieve from your description, and can't comment. Are you trying to keep the red bar at the bottom of the window?
In that case, the important CSS is:
#footer {
position: fixed;
bottom: 0;
}
That will stick it to the bottom of the viewport (scrolling viewable area). The rest of the styling is up to you.
By the way, it would be better to use a class (.footer) than an ID (#footer) for this.
Use position: fixed or position: sticky instead of position: absolute to fix something on page. Read this article for more understanding how position works.
If I understand you correctly then what you want is to use position:fixed not position:absolute
Fixed position will literally fix your element in place.
Here's a fiddle with it in action - http://jsfiddle.net/mSE6c/
does this work for you?
CSS:
* {
margin:0;
}
html, body {
height: 100%;
}
#inhalt {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
}
#footer, #clearfooter {
height: 30px;
}
HTML:
<div id="inahlt">Inhalt <div id="clearfooter"></div></div>
<div id="footer">Footer</div>
Source:
http://www.flashjunior.ch/school/footers/fixed_stop.cfm
Use position:fixed instead of position:absolute, this will keep it in a single position.
http://jsfiddle.net/PM9Xt/ shows this while it's in action. top:0 keeps the header at the top, while bottom:0 keeps the footer at the bottom.
I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.
I am not quite sure what is wrong... Any ideas?
Thank you in advance.
HTML :
<div id='main'>
</div>
<div id='footer'>Centered Text</div>
CSS :
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
font-family: helvetica, serif;
font-size: 12px;
overflow-y:scroll;
}
#main {
border: 1px solid #bbbbbb;
margin: 3% 5%;
padding: 10px 10px;
}
#footer {
font-size: 75%;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
http://jsfiddle.net/DjPjj/2/
http://jsfiddle.net/DjPjj/13/
Try this:
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
Because your footer is absolutely positioned, you must tell it what width to take relative to its parent container. You can then use text-align to center the text within it.
Here is another example: http://jsfiddle.net/DjPjj/17/
This one centers a box within the absolutely positioned element. The inner box can be centered using margin: 0 auto because it is not absolutely positioned.
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
}
#footerInner {
margin: 0 auto;
width: 300px;
background-color: #ddd;
text-align: center;
}
This is more flexible because the inner element gives you a new container to work with that is centered relative to the parent.
The reason it won't center is because of the positon: absolute;.
Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;
http://jsfiddle.net/4fuk7/1/
Notice how the centered text is overwritten.
If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/
Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.