I am making a new design for my homepage, with layers instead of frames. But i have a problem, i use 1280x1024 resolution, and when i think the page is looking good, i change to 1024x768 and everything gets OOOOH so large, why doesnt it adjust to the screenresolution? Is there no way of making it adjust acordingly?
![[H]ard|Forum](/styles/hardforum/xenforo/logo_dark.png){kind=logo}
-
Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.
Problems with page size!
- Thread starter Da3DaLuZ
- Start date
tim_m
i'm so nice
- Joined
- Feb 10, 2003
- Messages
- 5,539
without some example of what exactly you're doing it will be difficult to provide assistance 
This means that you have a fixed resolution. Let's say that your banner is 750 pixels wide. If you have a 1280 horizontal resolution, this will take up an inch less or so (I am just guessing the length here) than a 1024 resolution. The solution to this is not to have a fixed width when coding. If I remember right CSS allows this, but I may be wrong. Google it or something.
Fixed layouts have that issue. The page will also look tiny on high-res screens. A fluid layout may be the true soulution.
Another, slightly complicated option might be to make a scalable page, whether fixed or fluid. You would have to use em for all measurments, and never px or pt. A javascript could be used to detect resolution and assign a value for em in px. A downside is that Opera is currently the only browser that does decent image scaling. Here is a crummy example I grabbed from a file I made a bit back:
<head>
<script>
var myem = 16;
if ( screen.width > 0 ) var myem = ( screen.width / 64 );
document.write('<style media="screen"> ');
document.write('body, html ');
document.write(' { ');
document.write(' font-size: ' + (myem) + 'px; ');
document.write(' } ');
document.write('</style> ');
</script>
</head>
<body style="background-color: silver;">
<div style="width: 99.5%; min-width: 35.1em;">
<div style="border-color: #EEEEEE; background-color: #DDDDDD; float: right; width: 10em; height: 20em; border-width: 0.0625em; border-style: solid; -moz-border-radius: 1.128em; border-radius: 1.128em;">
menu
</div>
<div style="border-color: #EEEEEE; background-color: #DDDDDD; min-width: 24em; min-height: 20em; *height: 20em; border-width: 0.0625em; border-style: solid; -moz-border-radius: 1.128em; border-radius: 1.128em; margin-right: 11em;">
content
</div>
</div>
</body>
Another, slightly complicated option might be to make a scalable page, whether fixed or fluid. You would have to use em for all measurments, and never px or pt. A javascript could be used to detect resolution and assign a value for em in px. A downside is that Opera is currently the only browser that does decent image scaling. Here is a crummy example I grabbed from a file I made a bit back:
<head>
<script>
var myem = 16;
if ( screen.width > 0 ) var myem = ( screen.width / 64 );
document.write('<style media="screen"> ');
document.write('body, html ');
document.write(' { ');
document.write(' font-size: ' + (myem) + 'px; ');
document.write(' } ');
document.write('</style> ');
</script>
</head>
<body style="background-color: silver;">
<div style="width: 99.5%; min-width: 35.1em;">
<div style="border-color: #EEEEEE; background-color: #DDDDDD; float: right; width: 10em; height: 20em; border-width: 0.0625em; border-style: solid; -moz-border-radius: 1.128em; border-radius: 1.128em;">
menu
</div>
<div style="border-color: #EEEEEE; background-color: #DDDDDD; min-width: 24em; min-height: 20em; *height: 20em; border-width: 0.0625em; border-style: solid; -moz-border-radius: 1.128em; border-radius: 1.128em; margin-right: 11em;">
content
</div>
</div>
</body>
I have worked around this, it is not important anymore, BUT Why cant i make the background resize, like this: http://nopeople.com/CSS/background_image_resize/
Why cant i make my background do this? Plz answer me, and i wont bother you again
Why cant i make my background do this? Plz answer me, and i wont bother you again
}
body {
background-image: url(bilder/bg.jpg);
background-repeat: no-repeat;
background-color: #E0DFE3;
width: 100%;
height: 100%;
z-index: 1;
}
http://img305.imageshack.us/img305/7963/bg8sg.jpg
If you need more of the code, just reply here. I check this quite often.
body {
background-image: url(bilder/bg.jpg);
background-repeat: no-repeat;
background-color: #E0DFE3;
width: 100%;
height: 100%;
z-index: 1;
}
http://img305.imageshack.us/img305/7963/bg8sg.jpg
If you need more of the code, just reply here. I check this quite often.
<div id="page">
Your webpage will go inside these tags. Please use XHTML and CSS - check the links in my sig.
</div>
"write it for FireFox then hack it for IE."
Use the right DocType
Validate your HTML markup
Validate your CSS
why you want to validate
Don't use tables for layout
Your webpage will go inside these tags. Please use XHTML and CSS - check the links in my sig.
</div>
"write it for FireFox then hack it for IE."
Use the right DocType
Validate your HTML markup
Validate your CSS
why you want to validate
Don't use tables for layout