I have a website http://www.thecarnivalmidway.com/index.htm 200 pages and I have 1 that wont scroll, it use too. I've tried to figure it out and cant. so I am lost now, here is the link for the page that wont scroll http://www.thecarnivalmidway.com/site2/carnival_northeast.htm
Please help!
Firebug tells me that on that page on line 105 you have a css instruction that says: overflow: hidden.
This means that what is not fitting the screen size is hidden.
Remove that line and you are done.
It's a CSS problem. This is the CSS applied to the body tag:
body {
height: 100%;
width: 100%;
overflow: hidden;
}
The overflow: hidden; should be removed:
body {
height: 100%;
width: 100%;
}
Related
If I scroll at the top and then if I want to scroll down sometimes I see the white background, I've set the margin to 0 but I have seen web pages that do not have this kind of behaviour, any suggestion?
One way is to set body background color the same as your header or use this code to prevent over-scrolling.
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
I am creating a website under experimental.danielhons.de and have a problem when looking at it with small devices, like mobile devices or reducing the width of a browser window.
At some point, the page gets horizontally scrollable and on the right there is a whitespace.
Using Firebug, I see that it is the body-tag exceeding the screen, but I have used this css:
html, body {
max-width: 100%;
overflow-x: hidden;
overflow:hidden;
}
How can I prevent the page from being horizontally scrollable? Screeshot with overflow:auto
Add this css
body {
height: 100%;
overflow: auto;
}
html {
max-width: 100%;
}
I can clearly see that you have overflow: scroll; set on your body tag.
You can override only the x-axis specific rule by using overflow-x:hidden;.
My website works on a 15 inch laptop, but whenever I resize the browser, some of the information on my website 'disappears', as I am unable to scroll (scrollbar won't appear).
I'm experiencing this problem for two of my websites (they're part of a school project).
On the first website, the sticky footer covers the content when the website is being viewed in a smaller browser window. I managed to get a scrollbar for the container part (everything except for the header and footer), but I need the scrollbar to appear on the very right side of the website, outside of the container. (only the footer will be fixed, the header will be scroll-able as well).
http://sophisticateddesign.nl/cfreport/index.html
On the second website, I need the header and butterfly to stay fixed and for everything else to be scroll-able.
http://sophisticateddesign.nl
I'm wondering if there's an easy solution as I don't have much time left for these websites to finish..
Remove overflow: hidden in html
html {
height: 100%;
margin: auto;
width: 960px;
}
Remove position: absolute for .Wrapper
For second site:
You added your main content inside header with position: fixed; height: 50px;. It's the problem.
Yeah I just tried this out if you need something to overflow the sides you should use
html{
overflow-x: hidden;
}
instead of using just overflow.
|| For anyone who encounters this problem in the future. ||
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
Try changing overflow to overflow: scroll
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
I have very simple html page with looong (~8000px width) horizontal panorama image.
The image is set in css as a background background-image:url('long_jpg.jpg');.
I need just to have a scrollbar at the bottom of the page to be able just to scroll the whole background image.
How can do that with css? Can you please give any working example?
check this working example http://jsfiddle.net/a9QvT/1/
.panorama
{
width: 1280px;
height: 1024px;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
One way is to set the body width to the same width as the image
body {
width:8000px;
}
If you have any other content, you want to encapsulate all that in a div, so that the content doesn't shatter across 8000px as well.
Is there any reason you can't do this?
HTML:
<body>
<img src="picture.jpg" class="bgpic" />
</body>
CSS:
body
{
margin: 0;
padding: 0;
width: 8000px;
height: 100%;
}
.bgpic
{
width: 100%;
height: 100%;
}
Just like this...
body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}
but a quick warning, in terms of design and layout, people are used to pages which scroll up and down, asking them to scroll side to side will seem pretty annoting to most people. Unless you use some anchor tags and they can just click their way to specific points on the page without having the drag the scroll bar.
I want to add these rules in my css
body{
overflow-x:hidden;
overflow-y:hidden;
}
But I want the scrollbar on the y-axis to be visible but should be dissabled.How can this be done?
Edit: Even simpler without a container div.
Try this:
html, body {
width: 100%;
height: 100%;
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
body {
overflow: hidden;
}
Then, if you want the scrollbar enabled, remove overflow: hidden; from the body.
DEMO: http://jsfiddle.net/SKxhP/1/
Set your html height to 101%, this will cause the scrollbar to always show, thus preventing your content from jumping when the scrollbar would normally appear.
html{
height: 101%;
}
See here: http://jsbin.com/ixuhoj/edit
Please correct me if I misinterpreted what you needed.