I’m having some problems when I resize a window from full size and make it smaller in width. I have a stationary graphic that remains in position even if the user scrolls the window up and down, which is what it is supposed to do. However, when I reduce the width of the overall window, the background now scrolls right and left and the graphic covers things it is not supposed to. Is there a way to allow the graphic to scroll right and left if the window can be scrolled right and left but to leave the graphic stationary otherwise?
Here’s what I have in the style sheet:
.pagegraphic{
float:left;
height:173px;
position: fixed; /* this keeps the coin fixed and allows the background to scroll behind it */
width:170px;
z-index:99;
}
Another problem that occurs when the user can scroll horizontally. When the user resizes and then scrolls right, the background of the window is cut off on the right to the size of the resized window, so you only see a white background past that point.
This shows the object out of place relative to the screen. It is covering up the words ‘Sign In’. Also, you’ll see that the background on the right has stopped short of where it should be. All of this is due to the window being resized with a smaller width.
However, when I reduce the width of the overall window, the background now scrolls right and left and the graphic covers things it is not supposed to
Hi,
That’s because fixed position elements are positioned in relation to the viewport by default, plus they auto stack above non-positioned elements. You can nest the fixed element in float as a means to position it on the y-axis as long as you don’t set left or right coordinates on the fixed element. However, if it is on the left side of the page it will stop on the edge of the viewport when the page scrolls left. That is the nature of fixed positioning. If it is hiding other elements you could layer them above the fixed element with z-index.
Another problem that occurs when the user can scroll horizontally. When the user resizes and then scrolls right, the background of the window is cut off on the right to the size of the resized window, so you only see a white background past that point.
Setting a min-width on the fluid div is the normal fix for that. Sounds like you may have set width:100% or it is defaulting to 100% width. 100% is the width of the viewport at any given instance. You will usually see the problem you are describing when you are not using a main wrapping div or if you are using one it is fluid width with fixed width children. That is where the min-width will fix it.
I modified the elements for min-width and that fixed the second problem (background not filling across screen when scrolling).
However, on the first item about the scrolling object, I’m not sure what you mean by
You can nest the fixed element in float as a means to position it on the y-axis as long as you don’t set left or right coordinates on the fixed element. However, if it is on the left side of the page it will stop on the edge of the viewport when the page scrolls left.
That is, I’m not sure how to do what you are suggesting in the first sentence. Would you be able to provide a small example using my code or something else?
Would you be able to provide a small example using my code or something else?
Hi,
It’s hard to say if this will be useful to you or not as I have not seen your page. Here is what I was trying to explain by using a float wrapped around the fixed element. All that does is allow you to shift it around in relation to the wrapping div instead of the viewport, but the fixed div will stop at the viewport when the page scrolls left. As long as you don’t set left/right coordinates on the fixed div it will position within the wrapper with the float’s margins.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#wrap {
width:800px;
margin:0 auto;
padding:15px;
background:#CCC;
overflow:hidden;
}
#fix-wrap {
float:left;
width:170px;
height:173px;
margin:0 15px 15px 25px;
}
#pagegraphic{
position:fixed;
width:170px;
height:173px;
z-index:1;/*set this lower than the scrolling #content*/
background:lime;
}
#content {
position:relative;
z-index:2;/*layer scrolling content above fixed div*/
overflow:hidden;/*stop from wrapping under float*/
background:#EEF;
}
</style>
</head>
<body>
<div id="wrap">
<div id="fix-wrap">
<div id="pagegraphic">Fixed Div</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetuer Lorem amet ac wisi consectetuer. Nulla Curabitur vitae Nulla habitasse ultrices consequat lobortis et eu Vestibulum. Auctor magnis accumsan elit Maecenas facilisis at Morbi eget eget at. Vestibulum Ut metus sem pede faucibus auctor tincidunt condimentum libero eros. Convallis semper Aenean sagittis ante convallis Vestibulum vel malesuada nibh non. Justo Nam lacus tristique mattis sem sed nibh pede mauris lorem. Velit hendrerit quam ipsum lacinia sed pellentesque laoreet urna magnis metus. Pede et convallis tincidunt congue dignissim ipsum feugiat quis mattis ac. Ut augue lobortis.</p>
<p>Tempor enim felis accumsan Nunc pretium Nulla leo Pellentesque nisl consectetuer. Nulla commodo eros ipsum lacus metus semper amet sem elit Aenean. Dolor fermentum pretium ante sem sit urna et justo tristique sapien. Nulla Duis semper Nam rutrum quis Nullam pede Nulla felis tempor. Aliquam pellentesque Aenean leo laoreet pede tortor tortor magnis mi auctor. Maecenas eu justo senectus a et euismod semper Nullam turpis a. Mauris ut neque rhoncus odio Aenean quis et In augue odio. Ut sed sagittis urna nibh id tortor laoreet.</p>
</div>
</div>
</body>
</html>