First, I'd like to say that I have no experience with HTML or CSS so bear with me here.
I'm trying to have a Logo, content, then footer. The Logo has a background that overlaps with content, and footer has a background that overlaps with footer aswell.
This pic might explain better: http://picpaste.com/help-vXUqWlZ8.png
HTML Code: http://pastebin.com/0ZWCB9jU
CSS Code: /w7Ugu78Z <-- also pastebin, but I can't post entire link due to spam prevention.
The problem is that, there's an extra space at the bottom of the page that I can't remove.
Would really appreciate any help.. I tried googling but the solutions I found I failed to get it to work.
Best Regards,
Essam.
It seems you want the footer to remain at the bottom of the page.
I think this is what you're looking for: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Related
I first made my design for my website but now I want to put in some content , above my footer, my footer is becoming bigger.
How do I fix this?
I think it is because your footer position is fixed with a fixed height. Also, next time post your code here. (or a JsFiddle) Not a link.
Net begonnen met html zie ik.
I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.
Question :
I know there are tutorials out there for creating post divider (an image) in between text posts, and i'm doing that too, EXCEPT
I want the image to be AFTER the post footer. Is this possible? My problem right now is, the image is showing in between the footer borders, and I want it to be AFTER the shadow (i.e after the bottom footer).
Help! I feel like the answer is so close yet i can't seem to figure it out?
Thanks in advance
user <br /> after photo then the text will start from buttom of picture. if you want css solution, it's called float: left;
Have you tried working with a margin?
Try adding margin-top to the image. I think this may help.
Otherwise you could work with position: relative and add a top value.
Hello once again :) !
Can anyone accidently help me with this problem.
I saw very few sites before, but never bookmarked any of these.
If I have body background, fixed header and inner background, where the content is...
And if I want to scroll down to see more content/inner background, my image goes above header behind and I don't know how to make it to disappear behind headers top margin. Anyone can help me with this , please ?
Images:
Normal body background, fixed header and inner background below header
http://screensnapr.com/v/HbcNXA.png
Body background, fixed header and scrolled inner background below header, went above header's position.
http://screensnapr.com/v/TKVVuy.png
I know my English is not good enough to explain this... But let's say.
"Hey I am content background, I am standing below header and when someone scrolls me, I am disappearing at the start of header's position." :)
Thanks!
EDIT:
http://jsfiddle.net/WbtQd/
Scroll and you will notice what I want.
EDIT 2:
Seems like someone play with fiddle... Anyway, here is site example:
http://www.monofactor.com/portfolio/mcfc-auctions/
Except that my header have lets say: top: 50px;
So if we add on his site top: 50px; even he have same problem like me :)
http://snpr.cm/OrXCWa.png
EDIT 3:
http://snpr.cm/GNZaGd.png
I; not sure if I understood you completely. You mean that whenever you scroll your page, the main body passes under the header. probably this is because the header is fixed. You can try to make your main body div scrollable. This way, whenever you scroll down, only this specific div will scroll.
Im not sure what your trying to achieve exactly, but zindex in css can make items appear above others. Add this to the header css code:
#yourheaderid {
z-index:10;
}
I have created a jsfiddle of how you should markup your fixed header and the css to go with it.
http://jsfiddle.net/LYT6V/
I'm assuming this is the result you were looking for?
I´ve been searching the interweb for two days, but have not been able to figure this out. I am making a webpage with loads of included php files, and I have been asked to make a footer with contact information etc.
The problem is that i can´t get the footer to stick to the bottom, and I have discovered that it´s because the body doesn´t extend all the way to the bottom of the page.
See this link for a solution: http://ryanfait.com/sticky-footer/
Made with pure CSS :)
The body element doesn´t have a height like you think of it, it is as height as the elements in it.
I have found a link that perfectly answers your question, that is "Stay On Top" script at http://www.dynamicdrive.com/dynamicindex17/stayontop.htm