I have developed template for Joomla 3. What I want to stick footer in the bottom when content is less than height of monitor.
Here is example http://bmsc.tfei.info/en/library-en
The footer jumps to up when content is less.
I want to keep it in the bottom if content is less.
Is it possible to do in css without using jQuery?
If yes can you show me example or direction in my css where I should make changes.
Thanks in advance.
You may refer this post-
http://www.cssstickyfooter.com/using-sticky-footer-code.html
You need to keep #header and #mainbody inside #wrap and apply the CSS accordingly.
Hope this may help.
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
this is my first time asking a question so please forgive me if I'm not asking the right questions. I'm having a problem with my website and I'm pretty sure it's somewhere in the divs and containers. I'm trying to keep the navigation at the top and I want to put some content underneath. The problem is the content isn't showing up. Also, I made a "spacer" id to push the text down where I wanted it. I'm not really sure how to align the text at the bottom without it. If anyone could help with that also, I would appreciate it.
I don't know which parts I should post so if it's any easier, I can just post the links to the page and the .css.
The page is:
http://www.preferredcaskets.com/Untitled.html
The CSS is:
http://preferredcaskets.com/nav.css
Again, forgive me if I'm not asking the right questions. It's late and I'm a little confused at the moment.
Thank you.
You've put your background in an <img> tag, and given it position:fixed, which automatically places it on top of your other content. Quick fix: add 'style="z-index:-1;" to the <img> tag. A Better way is to add it as a background to your body (and also more semantically correct, since the background is not part of your content).
css:
body{
background-image: url("images/bg.jpg");
}
Try display inline in spacer
#spacer {
height:110px;
width:auto;
display:inline;
}
JSFiddle - http://jsfiddle.net/a4enG/
Made a Wordpress installation, styled a blog.
The Blog
The problem:
I have a fixed footer and a scrollable main page. No matter what I seem to do, there's always a space from like 10px between the footer and the main body.
I've inspected with Firebug, went through the CSS and the html. I gave the main div margin and padding and even a border-bottom.. but does not seem to help. It changes something, but the space still remains.
Of course, I could set the padding from the footer to bottom 10px, but then I would have unwanted space beneath the footer.
I can't really post any code here, since this is Wordpress and I honestly wouldn't know what code you could need, since I don't know where the problem is.
Thanks everyone in advance!
It's the margin bottom on element
<div id="page" class="hfeed site">
from this style:
body .site {
margin-bottom: 3.42857rem;
}
Removing this style gets rid of the space (and as far as I can see doesn't cause any other display issue with the site.
You can find these kind of issues by using the Developer Tools in your browser (the Firebug plugin for Firefox for example) and just right-clicking on the area with the issue and exploring and dynamically editing or disabling the styles that are applied to an element.
Well if you really want to remove the gap between the body and the footer, Just get the rid of height:40px that you've set in the footer CSS.
This is only i can do without code!
Hope this will help.
Here is the screen-shot
Just remove the height:40px rule from style.css (row 771)
on your style.css line 121 add this table { float: left; }
Hello I do some css positioning to magento eshop. I am using image for add-to-cart button and when I change my browser width this button just move right box element.
See here
I need some idea to make it look better (scaling image down,or just croping or hide it on overflow) because its very ugly how it is now.
Thank you, hope I explain my problem easy to understand.
make the middle element (or whichever needs to be) have min-width: ###px in the css
First i would set all img to max-width: 100%; and then fo fix the problem you are having with the add-to-cart button you should add it's class to the responsive.css stylesheet or how you call it, and play with it's positioning in the various media-queries that you have.
I'm writing a print stylesheet for my pages. each page has a footer. and the footer should stay at bottom of the printed page.. if it has 30pt white spaces before. (if there is 30pt spaces between main content and footer, footer should fix at bottom; else, it should go to next page)
because I'm using print stylesheet, I think I can't use JavaScript to check and fix it. (so please suggest a style solution)
Thanks.
You don't need JS, just CSS - I use the sticky footer solution here: http://www.cssstickyfooter.com
you doesn't specify your code, anywhere i think by using position property you can fix your footer.
.footer{
position: fixed;}