I've been trying recently to make my footer attach to the bottom of the page and make my middle content stretch, so that the footer will be placed correctly, no matter what resolution the website is viewed in.
It's been a while since i was last editing on this website, and i've forgotten most of the things i did to keep the layout maxed, and now i noticed another ERROR :(
My content now wont stretch, so if i place some text in my content area, it will go behind the footer and stretch to the bottom, without the bg image..
Could some of you tell me what is causing this problem? :(
There are some things you could do to improve that. I see your footer is position: relative; Don't really understand why... I think it should be position: absolute; and bottom: 0px; so it should fix to the bottom. Having your footer position: fixed; is not a good idea.
The content of your website should have a bottom padding equal to the height of your footer, and that will give you enough room for the footer and won't let any content get below the footer.
Let me know if you understood what I tried to explain and good luck with your project!
Related
so recently I'm working on a webpage to sell clothing, somehow I have problems in positioning my footer. At the moment the Footer looks like this. https://i.imgur.com/3dr9i3p.png
I want to stick the line to the bottom, which means, lookbook, shop, about and the line sticks with a bit of space to the bottom and if u scroll down the rest of the footer is revelead. It would look like this then: https://i.imgur.com/Py0VjK0.png
I don't want to work with space or anything since I want to have my website dynamic and responsive, means It looks at the macbook with 13' as same as on Windows on a 27' monitor. Anyways hope anyone of you guys can help me since I want to drop soon.
My code looks like this and is currently fixed to the bottom of the page.
.footer{
width: 100%
position: fixed
left: 0
height: 282px
bottom: 0
background:#F7F7F0
}
Greets
So I tried flexbox, smh I'm not able to use flexbox in elementor. Second point is, that I tried setting the height to fit to the screen, also using the min-height like Anas wrote, still I can only scroll the footer and not the footer when scrolling the page. Hope to get help asap.
I know everyone has problems with their footers, and I have traversed many with no success in practice.
The height of my footer is 121px, the padding-bottom of the main content is 121px.
The elements are positioned absolutely, thus taking them out of the natural flow of the document. Could this be where the problem is?
The CSS is now too big to paste somewhere (unless you have a free 5 mins in which case its at I have stripped it of content and info for the js fiddle)
Thanks.
Clarification: essentially it's a 'sticky footer' so if the content doesnt fill the page the footer sticks to the bottom, then it will scroll down with content. However, the content goes underneath it and stays where it first was on the page.
i dont know what you exactly want to know.. but if you just want to know how your footer is on the bottom of your page, even if the page got scrollbars, you just have to give your css id bottomwrap the position fixed
#bottomwrap {
position: fixed;
}
I know, I know, I asked this question before. Unfortunately, I lost my work. I started over and I came back to my old post (min-height:100% doesn't work on my container?) and couldn't remember what the trick actually was.
So I will post the link to my "experiment" here and I hope that you guys (or girls) can help me out, the problem is: I want the footer to be at the very bottom and the content and the two sidebars to connect to the top of the footer. (Also, the scrollbars have to disappear, haha)
http://www.jbehrens.nl/test/index.html
If anyone's able to help me, it's very much appreciated!
Set the footer to have
position: fixed
bottom: 0
And then set a height for your side bars and content pane and you might want to set
overflow: scroll
for the side bars and the content pane.
Hello once again :) !
Can anyone accidently help me with this problem.
I saw very few sites before, but never bookmarked any of these.
If I have body background, fixed header and inner background, where the content is...
And if I want to scroll down to see more content/inner background, my image goes above header behind and I don't know how to make it to disappear behind headers top margin. Anyone can help me with this , please ?
Images:
Normal body background, fixed header and inner background below header
http://screensnapr.com/v/HbcNXA.png
Body background, fixed header and scrolled inner background below header, went above header's position.
http://screensnapr.com/v/TKVVuy.png
I know my English is not good enough to explain this... But let's say.
"Hey I am content background, I am standing below header and when someone scrolls me, I am disappearing at the start of header's position." :)
Thanks!
EDIT:
http://jsfiddle.net/WbtQd/
Scroll and you will notice what I want.
EDIT 2:
Seems like someone play with fiddle... Anyway, here is site example:
http://www.monofactor.com/portfolio/mcfc-auctions/
Except that my header have lets say: top: 50px;
So if we add on his site top: 50px; even he have same problem like me :)
http://snpr.cm/OrXCWa.png
EDIT 3:
http://snpr.cm/GNZaGd.png
I; not sure if I understood you completely. You mean that whenever you scroll your page, the main body passes under the header. probably this is because the header is fixed. You can try to make your main body div scrollable. This way, whenever you scroll down, only this specific div will scroll.
Im not sure what your trying to achieve exactly, but zindex in css can make items appear above others. Add this to the header css code:
#yourheaderid {
z-index:10;
}
I have created a jsfiddle of how you should markup your fixed header and the css to go with it.
http://jsfiddle.net/LYT6V/
I'm assuming this is the result you were looking for?
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.