Im helping a friend with a website and when i resize the browser windows the scroll bar on the right side is not showing up. Is there a fix for this or a way to work around it?
here is the site page im working on
Fixed
Your whole web-page is wrapped inside a DIV with the ID "style" like this:
<body>
<div id="style">
your web-page
<div>
</body>
The CSS for this DIV is:
#style {
background: url(http://upupandfly.com/envie/images/bg_style.PNG) no-repeat;
left: 0px;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 0px;
}
This CSS is causing the problem. You have to either get rid of the fixed positioning, or just try to remove that DIV...
The div#style and html elements are position:fixed, try removing these declarations, and your problem will cease to exist (promise!)
Related
I'm trying to copy the twitter websites homepage but I have a problem with the side section scrolling.
This is the right side section I created/copied from twitter homepage right side section
and it won't stop scrolling until it reaches the max height of the page, I also tried setting the height/max-height to it's only true height (1308px) and it doesn't work.
I only use HTML and CSS by the way and does not want to put JS. Is there a solution using only HTML and CSS?
in your html:
<div id="footer">some elements here</div>
and in your css:
#footer {
position: fixed;
width: 100%;
bottom: 0;
}
I'm trying to change my site in a way so that all text is in one page instead of different dirs. In the original the partly transparant background of the container div is scrolling along with the page because otherwise the text would scroll over it. The new page is longer so I thought I would set the background to fixed and just redesign it a bit. But now when I scroll at some point the background disappears. I can't find what is causing this. I'm still learning the ins and outs of using divs, so please, if you know what's causing this, explain it to me in words I understand.
You should to remove height: 100%; from your #home element in your css styles.
Set the background image to another div (#back) rather than to #home.
HTML
<body>
<div id="back"></div>
<div id="home"></div>
</body>
CSS
#back{
position: absolute;
background-image: url('image.jpg');
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I'm trying to add a box on a web page that stays on screen at all times. The HTML looks like this:
<div class="mySideBar"> <!-- Some text and other elements --> </div>
The styles being applied look like this:
.mySideBar { position: fixed; width: 20%; height: 80%; overflow-y: scroll; }
That works nicely until I re-size my window then the down button on the scroll bar disappears offscreen and underneath my footer. The Footer HTML looks like this:
<div class="myFooter"> <!-- Some text and other elements --> </div>
The CSS looks like this:
.myFooter { position: fixed; width: 100%; height: 24px; overflow-y: scroll; }
I've tried playing with position relative and a few other things but I can't seem to get it right. It needs to work in IE7 too unfortunately and I'm afraid I can only post obfuscated snippets that display my problem. Is there something I've obviously missed?
I found an answer myself after I went away and came back to it today. Sorry I didn't get back to those that left comments but I couldn't get online. If you use bottom with a value set to 24px, the height of the footer, the overflow scroll bar will stay put.
i grabbed a template from themeforest and modded it. all works well, except, on some pages, the footer isn't sticking at the bottom of the page. i've messed w/ the css a bit, but haven't been able to get it stick. i'm still learning html/css so wanted some help in reviewing it to make sure i don't have any mistakes in my html. i haven't modded the css from the initial template. i did some, but reverted them before the post, as they were attempts at getting the footer to stick.
here is a link to the site > http://capitalcrestoration.com/build/
I think from your question you are asking how to make the footer appear at the bottom of the window at all times.
To do this you just need to change the CSS rule for #subfooter-wrapper:
#subfooter-wrapper {
background: url("images/sub_footer_bg.jpg") repeat-x scroll 0 0 transparent;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1000;
}
You could try giving CSSStickyFooter a shot.
You need to do something with your CSS to position the footer element at the bottom of the window. Otherwise it's just a block element that will be directly under it's sibling.
Try placing div id="subfooter-wrapper" just before the closing tag of the wrapper, and using position:absolute; bottom: 0;
I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?
Thanks
EDIT: Let me clarify based on the answers:
I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.
I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.
I just ran into the same circumstance as you do.
After a little experiment I found that it is caused by the wrong value the CSS property 'position'.
When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.
This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.
html, body { overflow-x: hidden; }
Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.
<html>
<head>
<style>
#test {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
background-position: 50% 50%;
overflow: none;
z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>
Here's some other stuff in the body of the page.
<div>
and some stuff in a div in the body of the page.
</div>
</body>
</html>