I tried to find some solution for the following scenario:
- fixed header
- if content is too short, footer will stick to bottom
- of content is longer, footer will be appended to content and scrollable
I found this, but this works only while the header's not fixed:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
here's some fiddled CSS:
http://jsfiddle.net/GxskJ/1/
I can't see what's going wrong and how to fix it. Another solution would be much appreciated as well.
thank you!
not sure what you are doing,better description of what you want to achieve would help me in giving you a better answer..
http://jsfiddle.net/mvivekc/2a7SB/1/
Have you thought of doing something like this:
http://jsfiddle.net/YC8DY/
This is how I do it on my website.
Related
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...
This is the site I am referring to: http://heattreatforum.flyten.net/
It was built as a child-site to the twenty-twelve theme.
I can't seem to get the content to center on every screen, and I am seeing a strange wide margin on the right that I just can't seem to locate in my css.
Any help would be much appreciated - thanks for looking!
The problem is that your div having id my-name has min-width: 1510px;. Delete it and all your problems will disappear.
As you see in the image, under the footer there is white part which is not body.
I checked that all the div is closed> I am using html5. I am wondering if anyone can suggest possible causes of this problem.
Thanks in advance.
Try setting the html's height to 100%.
I once faced the same exact problem. I got it solved by removing a css file that wasn't required by the site and it was messing up the with default rules.
I am trying to implement a sticky footer in boilerplate but I can't find a way for this to work. I have tried solutions posted by Michael Gorman and Steve Hatcher but both do not work for me.
I have researched and found that Sticky Footer is not supported by Boilerplate. Have any of you had any luck with this issue.
To see a page where I really need a sticky footer, please go here
Thanks for helping. Cheers
To ensure that the footer is always at the absolute bottom of the page you can use the answer accepted in this question: Make div stay at bottom of page's content all the time even when there are scrollbars
You will prob find that it requires a little fine tuning to work exactly as you require for your design.
If you just want a piece of HTML that stays on the same position of the screen regardless of the scrolling, you can use position:fixed on the element. This will create an effect similar to what you see on facebook, where the blue bar at the top, and the chat window at the bottom stay visible.
I have been looking around and seem to find lots about aligning a div vertically however not with a dynamic height div surrounding it.. i have a moch up of what i require, built from all sorts of different templates i have found.. i just cant get it to do what I want maybey i am totally wrong?.. i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..
I have checked out "vertically-center-content-with-css" at vdotmedia and this is exactly what i need the div to do however i can't get it working in the template i have come up with.. i do want it to be cross browser and ie6 would be nice but at least ie7..
Thanks in advanced!
The code was a bit long for here so see the link for what i am after..
http://www.mmageardirect.com.au/tmp/index.htm
Not so easy but check this out: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Try using vertical-align: middle and a set of divs with display:table, table-row, table-cell.