CSS'ing my way to a 4/3 resolution?
January 18, 2006 3:38 PM Subscribe
What's the easiest/best way to design a site that's meant to be viewed 4/3 while ensuring it looks right on even widescreen monitors? [more inside]
posted by electric_counterpoint to computers & internet (12 answers total)
Here's the deal: I'm building a website for my girlfriend. She and I drew the layout in Paintshop in an image of 1024x768px. I'm building it on my laptop, whose native res is 1280x800. Not thinking, I used percentages instead of pixels in my CSS, and now the rough layout looks terrible. 10% of my screen resolution is not proportional to 10% of others'.
So, what do I do? I think I'll just add a variably-sized empty/solid-color sidebar that basically paints over the difference between the user's monitor size and a 1.333 ratio.
This has problems, though:
* I don't want to take the traditional blog route and define everything in pixels. It's not good web design to set your content width to a constant 600px., so if I'm looking at it I've got 680px. of negative space surrounding it.
* I don't want to build the thing for a particular resolution, just a particular aspect ratio. If the viewer is at 800x600, he shouldn't need to scroll to see the bottom corners of my 1024x768 design.
* Maybe the biggest issue -- screen resolution refers (roughly) to the size of the monitor, not to the size of the web-viewing area. If my viewer at a 4.333 resolution is running a few layers of toolbars, she'll see a different area than someone with a cleaner browser.
I haven't had much time to think about this, and I've been typing in a rush as I'm due elsewhere soon, but I hope you get the idea. What do people do in these situations? A browser resize obviously isn't it -- I'll be a frequent visitor so I'd be pissing myself off!