[SOLVED] layout resizing issue help

[thewooleymammoth]

could anyone explain to me how this website, http://www.comptongame.com/ got the left side to move out of the window similar to the way the right side does? i cant quite figure it out, been at it a while, thanks

[rhodesa]

do you mean when you resize the window, how the background stays centered? It's a background-position of 'center top'

 

body {
  background:#000000 url(/images/body_bg.jpg) repeat-y scroll center top;
}

[SuperBlue]

Well how the website is doing it is very different then how it should be doing it, simply centering a huge background-image (1800x1050px - 125kb) to fake the effect is not really the best way of doing it. The given site has a very poor contrast as a result, and takes way to long to load on slow connections. Finally the effect would only be visible to users with a large screen resolution, since nothing seams to have been done to apply a min-width to the page.

 

There are methods to make a background-image repeat towards the bottom, this would usually be positioning of division elements. You could do background: ("image.png") repeat-y top right; on the body, but this would only work on one side, since we can't place multiple backgrounds, leaving you with just one side.

 

The way around this is using absolute positioning to place two axtra divisions with the cropped image as background, this frees the body for an image/gradient at the top. The downside is that it may not work in IE6 and earlier.

 

Simply setting these divisions to height: 100%; wouldn't work neither, because when the content gets longer they would get cut-off at the browser window height. So we need to place these two divisions inside the Content division, using position: absolute; and place them outside with the left and right properties, this is done by applying a negative value in px for whatever the width is of the image/division along with top:0;, and finally height:100%; to make it equal the contents height.

 

Before you can do this, you however need to apply position: relative; to the containing element, that is usually a division called Container, Basement, or Wrapper.

 

 

You might also be able to do this using floats, something i haven't tried myself as of yet. I assume that it wouldn't be hard to modify the 3 equal height columns layout to do the same, advantage of this method is that it would be supported by older browsers like IE6.

[thewooleymammoth]

Well how the website is doing it is very different then how it should be doing it, simply centering a huge background-image (1800x1050px - 125kb) to fake the effect is not really the best way of doing it. The given site has a very poor contrast as a result, and takes way to long to load on slow connections. Finally the effect would only be visible to users with a large screen resolution, since nothing seams to have been done to apply a min-width to the page.

 

There are methods to make a background-image repeat towards the bottom, this would usually be positioning of division elements. You could do background: ("image.png") repeat-y top right; on the body, but this would only work on one side, since we can't place multiple backgrounds, leaving you with just one side.

 

The way around this is using absolute positioning to place two axtra divisions with the cropped image as background, this frees the body for an image/gradient at the top. The downside is that it may not work in IE6 and earlier.

 

Simply setting these divisions to height: 100%; wouldn't work neither, because when the content gets longer they would get cut-off at the browser window height. So we need to place these two divisions inside the Content division, using position: absolute; and place them outside with the left and right properties, this is done by applying a negative value in px for whatever the width is of the image/division along with top:0;, and finally height:100%; to make it equal the contents height.

 

Before you can do this, you however need to apply position: relative; to the containing element, that is usually a division called Container, Basement, or Wrapper.

 

 

You might also be able to do this using floats, something i haven't tried myself as of yet. I assume that it wouldn't be hard to modify the 3 equal height columns layout to do the same, advantage of this method is that it would be supported by older browsers like IE6.

 

 

thanks for all that info, but i dont really know how to translate all that into code ???

[thewooleymammoth]

do you mean when you resize the window, how the background stays centered? It's a background-position of 'center top'

 

body {
  background:#000000 url(/images/body_bg.jpg) repeat-y scroll center top;
}

as for this way of doing it, so i get a background image with the correct dimensions and have an absolute div in the middle?

 

the problem with doing it this way is that the content doesnt stay in the middle if you resize the window you will always have all of the left bar and less to none of the right, i would like it so when you resize the window both the left and the right sidebar have the same amount of space

[thewooleymammoth]

nvm i got it sorry i didnt realize the other code i had was messign with the code you gave, thanks again topic solved