How can I set my site to scale in proportion when the browser or resolution is changed? I'm currently using this CSS to center my page, is it possible to encorporate centering a page with scalability and keeping proportions?
#mainDiv {
position:absolute;
top: 50%;
left: 50%;
width: 720px;
height: 400px;
margin-top: -200px; /*set to a negative number 1/2 of your height*/
margin-left: -360px; /*set to a negative number 1/2 of your width*/
overflow: auto;
background: url(../images/page1.png) no-repeat;
}Yes, it's called a liquid layout. Pixels are a static unit...that is, they don't change based on resolution--the resolution is so many pixels wide, by so many pixels high. However, CSS allows for percentages (as in 10%, 100%, 50%...), which will be a dynamic unit based on the width of the parent element (be it the <body>, the window, or #nav). If you use percentages, be sure to thoroughly test.
Another alternative is elastic layouts, which bases sizes on text size. This is done with ems...i.e. 1em is the current font size, 2em is twice the font size.
EDIT: I said "2ems," rather than "2em." Didn't want to be confusing.
#mainDiv {
position:absolute;
top: 50%;
left: 50%;
width: 720px;
height: 400px;
margin-top: -200px; /*set to a negative number 1/2 of your height*/
margin-left: -360px; /*set to a negative number 1/2 of your width*/
overflow: auto;
background: url(../images/page1.png) no-repeat;
}Yes, it's called a liquid layout. Pixels are a static unit...that is, they don't change based on resolution--the resolution is so many pixels wide, by so many pixels high. However, CSS allows for percentages (as in 10%, 100%, 50%...), which will be a dynamic unit based on the width of the parent element (be it the <body>, the window, or #nav). If you use percentages, be sure to thoroughly test.
Another alternative is elastic layouts, which bases sizes on text size. This is done with ems...i.e. 1em is the current font size, 2em is twice the font size.
EDIT: I said "2ems," rather than "2em." Didn't want to be confusing.