/    Sign up×
Community /Pin to ProfileBookmark

scale in proportion

Copy linkTweet thisAlerts:
Jul 20.2005

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?

[QUOTE]

#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;
}

[/QUOTE]

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Ben_RogersJul 20.2005 — 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.
×

Success!

Help @xover15 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...