This is my first question here, so bare in mind that we may have some issues with code.
But the thing is that i'm using a template (Cant remember what template atm) that is supposed to work in every browser but i cant get the code to the bottom.
URL TO SITE IN 1 Comment.
I'm pasting the HTML & CSS with Pastebin for you people that don't wanna see the page.
Please bare in mind that the CSS is rough and not clean, same with the HTML as the page is under development.
I searched here a couple of times without result, and couldn't get it going without messing up the whole page.
I can only test this live on Safari in Yosemite, and on Chrome Win 7.
HTML and
CSS
I think myself that it have with the bottom images to do with.
FYI: I don't own any of the logos and this is a non profit entuisasm project for F1 Simracing.
Thank you and kind regards.
U have really messed your code a lot..!
Do these changes, it will work perfectly.
remove html,body {height:100%}
/**** add CSS ***/
html {min-height: 100%;position: relative;}
body {margin-bottom: 288px;}/* height of footer */
footer {position:absolute;width:100%;left:0;right:0;bottom:0;}
delete that container tag from bottom of html page.
Alright, I got the footer to the absoulte bottom of the browser (Safari atm)
But the content gets hidden behind the footer, and thats no good.
Attaching image and code
Screenshot CSS
Im really sorry for the messy CSS, but i really appreciate all help!
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 had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.
I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.
And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN
When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?
Remove float : left from the css of .container .columns to center align.
After changing this, the page looks like below -
Hope that helps!
as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page
so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
I've had a tough time trying to figure out what the issue with my CSS/HTML is, a new set of eyes taking a look would be greatly appreciated! I'm trying to get the content area to scale to the entire height of the page but it doesn't seem to be working in the example I've posted below. I've set both body and html to height: 100%; to no avail. Any ideas?
jsFiddle: http://jsfiddle.net/zVuyp/
(note that the CSS is an external resource linked to the left)
The page is not meant to scale to size so within the jsFiddle window it looks a bit odd, but the issue should still be clear enough. Cheers
Add height:auto to body and it should work.
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