how to autosize resolution?

[lo_volt]

Hey guys, I'm doing a site that needs to autosize to whatever resolution the viewer's browser is set to. I'm not at all sure how to go about this as I fear it means that graphics will scale disproportionately etc. Is it a piece of code or is it better to use CSS that a viewer can select on the index page? I'm pretty stuck on it - so thanks for any help you can give.

[jscheuer1]

This may be able to be done with javascript, not pure HTML. However, using the browser to resize your images will never render them all that well once they move far above or below their actual size, unless they are simple crisp graphics.

[lo_volt]

I thought it might involve that. I was advised to use layers and make CSS for the resolutions - then the Java script would "tell" what CSS should be used. If this is right, do you know where I could find this Java script?

[djr33]

It depends how complex stuff is, but this could be done with pure html.
Even graphics.

Here's how:
1. Your layout MUST be in tables (or maybe <div>'s).
2. Setup that how you like it. Use pixel values if you want.
3. Then change all that / make sure its in percents, for width AND height. (Note: You'll run into errors when you scale the window too small. You might want to make a table around EVERYTHING that is set to the smallest dimensions you'd ever like anyone to be able to use, and that'll hold it in place so it can't shrink beyond that. Note: DO set this one to absolute/pixel values, not percents.)
4. For text, you're stuck... but it's not like the text should scale too much. Heck, maybe you could do, as you can with "12px" in css, something that would be like "3%", but that's just weird. I wouldn't use it.
5. For images (not much else will work like this... just center it vertically and horizonatally and you'll be good... for plugins and such) set the height="" and width="" comands to percents. They'll scale with the window.
Now... with graphics, you could overscale them and get pixelation/distortion... so make them big. But that will make them take longer to download.


Really, this probably isn't the best approach unless you really need it for some reason... it is bound to end up with some weirdness in there. Maybe not.


Another solution would be to just make it as small as you'd expect it to be at any time, then place that whole thing inside a table with width and height ="100%" and set align="center" and valign="center" in the <td ...> command for that cell.
that'll just give you a nice feeling site without it actually fitting their monitor.

Here's the splash page for my site, setup like that. It's really nice even on huge monitors:
http://thebrb.com/

[lo_volt]

Thanks a lot, I'll try that. I dont see a great reason for resize as the site is really 800 x 600, but hey....

[djr33]

If there's no big reason, then you might wanna just save yourself some time.

Make a cool resizing border (color, image, whatever), center the 800x600 site itself in a table, and you're good to go.