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.
Related
So, i'm trying to design my first page, and kinda trying to learn as i go.
I'm trying to design a one page website, that contains multiple backgrounds, so i divided each section of the website that will contain a different background into divs.
The background looks fine with a full sized window and 100% zoom on the page, but if i zoom in it gives me the option to scroll the page horizontally and it gets messed up, id like to make it so it just simply scales and it does not give me the scroll option.
I've tried setting the background size to cover the page, messed with the width of both the body and the div that contains the background but i can't seem to get it to work.
So, this is part of the page with 100% zoom:
Fully scaled window 100% zoom
But when i reduce the window: it looks like this:
Gives me scroll option and the background image cuts out
Heres the HTML code:
HTML code
And heres the CSS:
CSS code
Thanks, sorry for noob question.
Alright i think i found a solution while just trying different stuff out:
i put on the html and body css:
overflow: auto;
It seems to have fixed my problem, i was kinda of just randomly trying stuff out.
Thx for the help.
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 recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
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 try to fix the layout, because if you see this link from you mobile you can see that the whole right part goes off canvas for some pixels.
I tried setting a max-width:1280px; attribute but it didnt work. Does anyone an easy fix?
Maybe I should define a body max-width ?
http://www.2kfilms.com/films.html
In your page and films-list styles you are defining fixed with. These will never be 'squeezed'. If you want them to get smaller somahow you need to define them differently. There may be more places in your code where you are doing that. Fix that to fit.