I have implemented a sticky footer on my wordpress website with this HTML code:
<style>
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;}
</style>
But when viewing the post, the footer goes beyond a section on the website (attaching the image below) and screws up the carousal too. Ho do i fix this?
footer going beyond the carousal section
I was trying to implement a sticky footer on my website. I was expecting it to get fixed at the bottom of the screen and not change anything else.
Try to apply z-index property.
z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Make sure to give a z-index property to your .footer styles. An element with a larger z-index is always stacked on top of an element with a lower z-index. Elements with the same z-index are stacked in the order they appear in the document. By default, elements have a z-index of 0. However if your footer will always be visible, better go with 100 and sure it will come on top.
Also on the picture it looks like it doesn't take the 100% width. Maybe you have margin or padding set on the parent element. But also can try to use 100vw which is gonna be the view width of the screen.
Related
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
I am trying to add a text field under my blue header. I added a div and a <p> but all it does is shift down my header with a small space above.
How can I fix this?
https://codepen.io/anon/pen/KXqGyp
As already stated, you can remove the position. Alternatively, add a padding-top value to class bio in your CSS and set it to be at least equal to the height of your header (75px seemed fine).
The problem is that position: fixed; causes the header element to not take up space, where it normally would, so you need to create a buffer of whitespace above your first element in order to take up the space your header originally would have.
Remove the position CSS attribute from the header style.
You can also change the position attribute for the header class to position: static;.
static is the default value, so just deleting the attribute makes it.
Your positioning is the problem. You're setting a fixed position but not setting where that positioning is:
header {
position: fixed;
width: 100%;
background: #4168a8;
top: 0; /* specifying where you want to place the fixed item */
}
Once you do that you'll see that your content is now fixed to the top, but the divs are now below your fixed item. You'll need to set the top margin for whatever item you want under it to be greater than the height of your navbar in order for it to show up correctly.
Here's a related SO article: Positioning a "wrapper" div underneath a fixed navigation bar?
I have a long table that I don't want to show in full length, because then the footer and other elements below it are only shown after scrolling down for long.
How can I assign Header, Footer and other elements and then let the table fill up the remaining height?
By now I'm using a flexbox to distribute the free space to the table wrapper, but the table content gets shown in full length and the footer is pushed down.
I also tried to nest an overflow: auto; into an overflow: hidden; but then it's not scrollable at all.
Thanks in advance.
Have you seen w3schools - CSS Layout - The position Property guide?
Just use footer{ position:fixed } for your footer in your CSS along with other style codes.
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. A fixed element does not leave a gap in the
page where it would normally have been located.
(As Mentioned in the w3schools).
Hope you will get your solution.
You have to set the css specification for the footer element to position: fixed; If you want header to be fixed set the header css specification also to position: fixed;
just use position:fixed in ur footer css...and if u want to have scroll then use css overflow:scroll; if u want hide ur scroller in the page then use overflow:hidden;
I am trying to fit a progress bar into the parent, which is oddly difficult. It is done on a Jot form, but with access to custom CSS and so on, which I have utilized a lot (that could have created the problem I guess).
The progress bar is positioned fixed at the top, and is in the parent element div.form-all as the very first and second element. I have tried all the common suggestions on here about box-sizing and so on, but nothing seems to work.
My suspicion is that it is because the parent element does not have an explicitly stated width, as this fixes the problem monumentally (but breaks the responsiveness, as it goes from ≈36% width to 100% on small screens).
Any help would be greatly appreciated. The actual form can be found here, at Jot form, in Danish:
All added custom CSS should be visible by inspecting the elements, but I will mention that it has worked before.
The div containing the progress div has the following css-attributes:
.progressBarContainer.fixed {
position: absolute;
top: 0;
width: inherit;
background: #FFF;
z-index: 9999;}
The parent has by Jotform-coding the following relevant attributes, with no position attribute:
.form-all {
width: 690px;
width: 100%;
max-width: 690px;}
Thank you in advance, Kris.
Absolute Position Solution:
You said you are using position: fixed, but this won't inherit the width of the parent. You need to change .progressBarContainer.fixed to position: absolute, and then the form parent, .form-all, add position: relative.
This will then set the width of the progress bar to be the same as the form.
Fixed Position Solution:
There are a number of ways you can keep the progress bar sticky on the screen. You will either have to explicitly state the max-width of the progress bar in the CSS, or CSS with a JavaScript solution. The simple CSS solution would be to keep position: fixed assigned to .progressBarContainer.fixed, but then you have to specify max-width: 690px to .progressBarContainer.fixed.
Its position is fixed that's why it gets the whole screen's width when it's set to 100% width. See here for reference
Assuming that you want the progress bar to stick to the top and since the container element .form-all has a max-width property of 690px try applying it to the progress bar element as well to prevent it from expanding to 100% of the screen width.
Otherwise simply remove the fixed positioning from the progress bar.
I'm having trouble with my footer sticking to the bottom of my blog entire pages. I run into two issues. First if I use position:absolute the footer rises to about the middle of the main blog page. If I leave that alone, it sticks to the bottom but rises to the middle on the blog entire pages. Footers are something I always have trouble with.
Here's my current CSS style for the footer
footer {
text-align: left;
background-color: #f4f4f4;
padding-top: 40px;
padding-bottom: 40px;
z-index: 1;
bottom:0;
width:100%;
}
Here's a link to the page http://pixelogicblog.tumblr.com/post/41025998534/tes-post
Check out sticky footer solutions using CSS:
http://ryanfait.com/sticky-footer/
The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.
Try adding this to your CSS to make it take up at least the height of the window:
html, body {
min-height: 100%;
}
Have you seen this?
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Cross browser (IE6+ too) and easy to understand.
Coincidentally, your current footer isn't appearing at the bottom of the page as its position is set to relative, set its position to absolute and it will be positioned at the bottom of the page (as long as the page is no longer than the viewport). Relative positioning only sets an elements position relative to where it would be normally, for example if you set bottom: -10px on the footer element, then it would appear 10 pixels lower than it would otherwise have done (hope I'm making sense there!)
If you position something absolutely, it is positioned absolutely to either the body tag, or the next nearest parent with a position set to relative (as I understand it anyway)
Set the position to absolute
position:absolute;
It is important to note that any positioning aside from static(the default) takes it out of document flow. My way of getting around this is to add margin-bottom to the body content equal to the height of #Footer. Doing this ensures an empty space is always behind the footer equal to its height, preventing it from overlapping the content. Using absolute, and fixed can result to content overlapping.
If you want to stick the footer at the bottom, you can use min-height with viewheight unit on the header, main content and footer.
Example:
<header style="min-height: 10vh">...</header>
<div id="main-content" style="min-height: 85vh">...</div>
<footer style="min-height: 5vh">...</footer>
With this, if you have don't use all your view height with your content, the footer will still stick at the bottom. This is the best way I found to stick the footer at the bottom.
I hope it will help few people.