I'm relatively new to web designing, and this is my first full-scale project so I apologize in advance if any of my code is found messy. Cutting straight to the point, I'd like to make the space between my main content/wrapper and footer a specific size. By which I mean cutting the space at the end of the page to about 20px. My code/css would be too long to explain, so I'm wondering if anyone familiar with FF's element modifier would take a look and see if they can figure out what's causing the large gap.
Link to my website: http://guard.neetgroup.net/?
This is the homepage for some reason, with nothing in the main content bar:
Another accessible pages w/o login:
http://guard.neetgroup.net/?app=cpanel
http://guard.neetgroup.net/?app=profile&u=Veritas
http://guard.neetgroup.net/?page=404
Made some slight changes to your css and i think i got what you needed.
CSS
div#wrapper.global {
margin: 0 auto 20px;
}
Then remove the footer with the id gap as it's not needed and remove the height in the body.
This makes the footer only 20px under the content box but doesnt extend the footers background colour to the bottom of the page. To do that, you would really need to recode the website again and use the footer bg as the body background and have the header and content use different background colours as theyll be the expanding content in the middle.
I solved my problem by removing the 100% height on the wrapper, and padding out relative length of the page.
Related
I'm building a Wordpress site and there is a space between the last content section and the footer (site: http://www.imprero.com/wordpress/graffitx). I inspected the code and reviewed the potential paddings but couldn't figure out where is this space coming from.
In your last mk-main-wrapper-holder -> theme-page-wrapper -> theme-content class you have an empty p tag with margin bottom of 20px. Removing that style or the empty p tag should solve your issue.
You seem to be using a content builder to make your updates easier. Although this is a good, easy-to-use approach, this adds a lot of unwanted pieces of code in your site, which takes your loading time up several seconds.
Anyway, it seems to be caused by a section you added without content. So, check the content you added in your page via WordPress admin and see if you can find any empty content sections in your Content Builder. Preferably, use the "Text" instead of the "Visual" tab if nothing is showing up via your Content Builder visual options.
I think this piece of CSS code is a good workaround, although not the best option (which would be removing the empty section in Content Builder):
#theme-page .mk-main-wrapper-holder:last-of-type .theme-page-wrapper .theme-content p {
display: none;
}
Hope this helps you. :)
I have two questions im sure are very simple I'm just looking over something.
1.) To start off, my website is mostly HTML, except I have a WordPress blog page. To make the blog page look like the HTML home page, I modified the header.php and footer.php, and everything looks fine except one problem.
As you'll notice if you compare the Home page with the Blog page, for some reason the margins I have to position the navigation links & social media icons isn't working but it works on the home page? I really have no idea why it isn't working, the stylesheet is linked correctly and everything, as every other style works fine except the margin in those areas.
2.) At the bottom of the home page there is a white space below the footer, but its not on the WordPress blog page? I am trying to remove the white space but have had no luck. The only way I can remove it is if I make the footer 30px larger, which I don't want to do. I have set heights on the HTML, Body and am unsure why the space is there.
Thanks ahead of time, I appreciate you taking the time to look at my questions.
EDIT here is a link to the site:
http://jqwebexamples.com/iAM_Talent/Version3-rev/index.html
The <p> Tags in your footer are the problem. If you remove (or disable it temporarily) the following style:
#footer p {
margin-top: 45px;
}
then the white line disappears. Take a look in firebug to check this out.
The other issue looks like caused by the unsorted list in your navigation div.
So hey guys. I'm new to the site, but have a problem concerning my footer image positioning. I'm sure it's basic for all of you, but I've tried several methods that I came across online, and had no luck. In the end, I decided to ask around.
My issue is this. The CMS I use ( http://www.animerelief.com/ ) and/or ( http://www.anime-static.com/ ) - if you scroll down to the bottom of any page, you'll see that (in a 1080x1920 resolution) the footer aligns with the text properly, and in the center of the footer area. My problem is, in any resolution under that, the footer moves, and ends up out of place with the website.
How do I go about maintaining a single position for the footer image and/or text/links in it?
Thanks for your help!
Regards,
Simply add a min-width to the body that it's equal to your holder width.
body { min-width: 1087px; }
I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.
No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.
I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's "Sticky Footer" solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.
Heres a Fiddle of my footer PHP.
Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.
You can find an example of the whitespaces on my website here
Solutions i've tried:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.
I don't know why the space between the content-bottom and the footer is bigger than the space between header and content-top you can see an example here: [not found]. I want the same equal spacing for the content(that box) between header and footer...but always I get bigger spacing between content and footer..and I don't know how to fix it, please help me guys.
Best Regards
You have given your header, position:absolute and footer position:fixed. also height to middle container. This way your elements won't flow correctly.
My suggestion:
give header and footer position normal.
and give content:
.wrap {margin:100px auto; width:---px;}
Instead of using .css('height'), use .height() or .outerHeight() if you want to calculate also padding and margins of the element in question.
You can download the Firebug plugin (http://getfirebug.com/) if you have Firefox. Using this plugin, you can view the CSS of individual elements on the page by hovering over them and pressing ctrl+shift+c.
You may also view paddings, margins, and heights via the "Layout" tab as well as edit CSS and see updates immediately as live, local changes. That allows for rapid CSS debugging.