My webpage looks great in the 800x600 resolution but really looks pathetic in all other resolutions. ( <!-- m --><a class="postlink" href="http://www.aplustv.com">http://www.aplustv.com</a><!-- m --> ) I tried doing all my measurements in percentage to make the page look the same in each resolution and it works. However, when the user resizes the window manually (in any resolution), the page shrinks and everything in it (shrinks) because the percentages take the size of the current browser-window rather than the user's resolution. (so I reverted it back before all the percentage measurements back into pixel measurements)Is there a way through CSS to do all my mesaurements based on the user's resolution rather than the browser-window?
I don't want to resort to JavaScript's screen.availWidth and screen.availHeight because it can get rather messy....
Any CSS ideas?No Javascript. Instead, you might like designing your layout widths in ems.
EX: <!-- w --><a class="postlink" href="http://www.cm-life.com">www.cm-life.com</a><!-- w --> (Increase and decrease your browser's font size via View > Text Size or Ctrl + and Ctrl -).
Article: Elastic Design (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/elastic/">http://www.alistapart.com/articles/elastic/</a><!-- m -->)
Aside from that, I have no idea what you're talking about. Using percentages IS reliant on the resolution. Can you explain more about how you want the page to react?Upon reading your post again, try setting a min-width for the element that contains your entire page. Internet Explorer does not support this property so set the width instead.
/* Assuming #wrapper contains your entire page. */
#wrapper {
min-width: 100%;
width: 100%;
}
html>body #wrapper {
width: auto;
}
Also, versions of Safari older than the latest version do not support min-width, I think.
EDIT: That might not work either. Basically what you're trying to do is control a visual aspect that the user should control. If you design in percentages, just know that some users will resize it to funny widths. Accept it. The hardest part of design is getting over the Cult of Designer Ego
It seems to me that the percentage "looks" at the size of the browser window not the user's resolution. Am I wrong? Run this code, resize the browser window to as small as it will go and you will see my image shrink. Then resize the browser window to as large as it will go and you will see my image grow to such a large size that you will be able to see every little pixel.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
.eg1{width: 100%; height: 100%;}
</style>
</head>
<body>
<img class="eg1" src=http://www.webdeveloper.com/forum/archive/index.php/"http://webdeveloper.com/forum/image.php?u=30185&dateline=1119832387" alt="">
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img border="0"
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</p>
</body>
</html>
How would I make the image height and width fixed regardless the browser window size but only adjust the image height and width to the user's computer resolution?In addition to the percentage that adjusts to the browser-window size, I even tried:
.eg1{width: 13.2mm; height: 13.2mm;}
.eg1{width: 50px; height: 50px}
.eg1{width: 3.1em; height: 3.1em;}
None of them adjust to the resolution....No Javascript. Instead, you might like designing your layout widths in ems.
What makes ems so special? Why not cm,mm, or px?relative values are much more flexible and accessibleAccept it. The hardest part of design is getting over the Cult of Designer Ego
After re-reading this post several times, it seems to me that toicontien is saying that what I'm trying to do is impossible in CSS (excluding the use of the not so compatible expression)...
Hmm... Maybe a mixture of min-width with expression... wait but IE users would need JavaScript enabled in order for the expression to work... Bah! Cursed IE! lol... IE 7.0 better learn min-width or else! Eeeehhh or I'll Eeeeeeeeehhhhhhhh... be forced to use percentages for IE.... lol...
Using percentages IS reliant on the resolution.
...
It seems to me that the percentage "looks" at the size of the browser window not the user's resolution. Am I wrong?
...
Can anyone Verify this?
I don't want to resort to JavaScript's screen.availWidth and screen.availHeight because it can get rather messy....
Any CSS ideas?No Javascript. Instead, you might like designing your layout widths in ems.
EX: <!-- w --><a class="postlink" href="http://www.cm-life.com">www.cm-life.com</a><!-- w --> (Increase and decrease your browser's font size via View > Text Size or Ctrl + and Ctrl -).
Article: Elastic Design (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/elastic/">http://www.alistapart.com/articles/elastic/</a><!-- m -->)
Aside from that, I have no idea what you're talking about. Using percentages IS reliant on the resolution. Can you explain more about how you want the page to react?Upon reading your post again, try setting a min-width for the element that contains your entire page. Internet Explorer does not support this property so set the width instead.
/* Assuming #wrapper contains your entire page. */
#wrapper {
min-width: 100%;
width: 100%;
}
html>body #wrapper {
width: auto;
}
Also, versions of Safari older than the latest version do not support min-width, I think.
EDIT: That might not work either. Basically what you're trying to do is control a visual aspect that the user should control. If you design in percentages, just know that some users will resize it to funny widths. Accept it. The hardest part of design is getting over the Cult of Designer Ego
It seems to me that the percentage "looks" at the size of the browser window not the user's resolution. Am I wrong? Run this code, resize the browser window to as small as it will go and you will see my image shrink. Then resize the browser window to as large as it will go and you will see my image grow to such a large size that you will be able to see every little pixel.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
.eg1{width: 100%; height: 100%;}
</style>
</head>
<body>
<img class="eg1" src=http://www.webdeveloper.com/forum/archive/index.php/"http://webdeveloper.com/forum/image.php?u=30185&dateline=1119832387" alt="">
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img border="0"
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</p>
</body>
</html>
How would I make the image height and width fixed regardless the browser window size but only adjust the image height and width to the user's computer resolution?In addition to the percentage that adjusts to the browser-window size, I even tried:
.eg1{width: 13.2mm; height: 13.2mm;}
.eg1{width: 50px; height: 50px}
.eg1{width: 3.1em; height: 3.1em;}
None of them adjust to the resolution....No Javascript. Instead, you might like designing your layout widths in ems.
What makes ems so special? Why not cm,mm, or px?relative values are much more flexible and accessibleAccept it. The hardest part of design is getting over the Cult of Designer Ego
After re-reading this post several times, it seems to me that toicontien is saying that what I'm trying to do is impossible in CSS (excluding the use of the not so compatible expression)...
Hmm... Maybe a mixture of min-width with expression... wait but IE users would need JavaScript enabled in order for the expression to work... Bah! Cursed IE! lol... IE 7.0 better learn min-width or else! Eeeehhh or I'll Eeeeeeeeehhhhhhhh... be forced to use percentages for IE.... lol...
Using percentages IS reliant on the resolution.
...
It seems to me that the percentage "looks" at the size of the browser window not the user's resolution. Am I wrong?
...
Can anyone Verify this?