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.
Related
Just click any post to see what I mean, here's
I want to either:
1.make whole site pushable by scrollbar, so header and body have even widths
or
2.make whole site not pushable by scrollbar.
How can I do that? Maybe its because my header is 100% of width, while my body is fixed value (i think it is, dont remember).
Any help appreciated, ive been working on this website css for 2 weeks and my brain already wanted to give up
thanks #TheFrozenOne yeah that was it. i thought i added padding on post pages as well (and i did) but i added it to wrong div.
I fixed it already.
PS, sorry for not providing code.
I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}
web page is http://www.naifaraleigh.com/template2.php
css is http://www.naifaraleigh.com/layerstyle.css
I so much want this to work, to learn how to do this, but I am beginning to hate CSS and think that tables are not a bad thing after all! grins! Just kidding!
everything is contained in the div called container
I have managed to make the main content div slightly off center and rounded corners in white_back
I have managed to put in an absolute div to the right containing nav and logo
But I simply cannot, whatever I try, get the white_back div to stretch downwards to envelop the content of the web page.
Please please help, stop me turning back to the "Dark Side" of tabular layouts!
Thanks!
Do you mean #white_back{height:auto;} ???
Why do you have #white_back{height: 458px;} if you want it to stretch downwards?
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