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.
Related
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'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.
In reference to my testing site's page:
http://thepfjstudios.com.au/testing/content/NewAbout.php
I have a Spry menu on the left side, that when is being used, seems to kill the <p> tags in the content section on the right side.
The .css file used is:
http://thepfjstudios.com.au/testing/SpryAssets/SpryMenuBarVertical.css
and the .js file is in the same folder but is SpryMenuBar.js
I've been playing with this for 2 days now and can't figure out why there is no longer a space between paragraphs in the content section on the right side. If I don't use the Spry menu, the content section shows just fine.
I would post code here but all 3 pages are relevant to this question and would take up a very large space.
SpryMenuBarVertical.css on 12 line defines:
* { margin:0; padding:0}
margin:0 is affecting your paragraphs. I suggest that you delete that line and adjust the menu's styles to suit your needs.
Edit: I think I should tell you how I figured it out in case you encounter a similar problem in the future. Here are steps for Google Chrome, and it should be similar in other browsers.
Right click on the affected element (in this case, any of the paragraphs).
Select Inspect Element.
Under the Styles tab, you can see all styles that do or would apply to the element. Try unchecking some of them to see what they do.
Under the Computed tab, you can see what styles the element is using.
If you go to "Game rules" section and click around the sections "Backgammon, Narde, Nackgammon, Tavla, Old English" you will see that some sections load normally and the scrollbar works fine. Bigger sections like Backgammon and Narde do not load fully. The content in backgammon section is going out of the margin and the Narde section simply won't load fully.
What could be the issue here? All of the sections with scrollbar have the same identical settings. The only difference is that Backgammon and Narde sections have more text and more images. Could this be a reason for the glitch? Maybe the plugin somehow doesn't get to load all the content and already locks itself in place? What could be the possible solutions?
EDIT: I'm pretty sure it has something to do with tinyscrollbar plugin loading a bit too fast (before the inside content has loaded). What method could I use to put a timer on the plugin so it doesn't load as quickly or refreshes?
first it seems that your "p" elements styles do not have width set to it and when rendered they hide behind the scroll bar making some of the text not visible.
This may not answer you question directly but it may have something to do with portions of text being hidden by overflow:hidden / overflow:scroll that is being used for the scroll bar.
You could also try using the jScrollPage plug in as it simplifies the scroll bar coding.