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; }
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!
Having a problem with this site, http://www.keefebartels.com/. The page looks OK but you'll notice you can scroll to the right. Not sure what's causing this. I thought it would be a weird issue that I'm missing. Any ideas?
Go to your style.css file, find .calc class and remove right:-900px;
Fixed!!
The issue is in the CSS associated with the following code:
<div class="textwidget">
<a class="calc" href="http://injuryclaimcalculator.us/">Injury Claim Calculator</a>
</div>
It shows that the calc class is getting the following property. This is causing for the link to be placed 900px to the right and therefore causing you to be able to scroll to the right.
right: -900px;
Removing the above code from the CSS will fix the site.
Add overflow:hidden to the .textwidget element in the sidebar; it's child element .calc is positioned relative and as a result it's flying off the screen, forcing the scrollbar to appear.
I am developing a small site:
http://www.designbyantony.com/David%20Quigley%20www/index.html
(It's within a folder of my own site on my server)
I would like the footer div to follow on from the content at the end of each page ie: NOT to stick to the bottom of the viewport. I have managed this on all pages except it isnt working on the homepage - as per link above. I have spent a good day trying to fiddle with over:hidden etc but I'm not having any luck. I've a feeling it's something to do with the fact that the homepage uses a fullscreen image.
Bring the contents outside #header you are missing </div> after header. Remove position: fixed; from #homepage_content add z-index:-1 to #bg
i have replicated your html in jsfiddle. and set the background in css background: url.
footer seems to be in the bottom.
http://jsfiddle.net/btevfik/hDkQC/
Ok, i think i know what you are looking for.
Move the #homepage_content outside of the #header by removing the </div> after <!-- InstanceEndEditable -->. Instead add a </div> just before the first clear div.
Change the css code of #homepage_content to position: relative; or just remove the position: fixed.
I think you are looking for a transparent background color of the #homepage_content, right? To do this you must remove the bakcground-color of #homepage_wrapper and instead put white background-color on the #header div.
Hope it fixes it.
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;}
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.