Rank: ? (33)
Member #: 15357

Hi,

I was wondering if you could help me. I want to create a site that looks the same no matter what size the monitor is that you are viewing it on. I am guessing I would use table widths in pixels (rather than percent). Is this correct? (Is 480*600 a standard size to work from?)

Thanks

rmcalli

Rank: ? (4827)
Member #: 3416

what exactly do you mean by "looks the same?" do you know of a site which does this already that we could look at?

Rank: Unregistered

I think what I am trying to say is 2 things:

1. Is it best to design tables using pixels rather than percent. If so what would be the best size to design for (480*600 ?). I read something somewhere about programers who design sites usually 480*600 so that on larger screen resolutions the site looks just as good.

2. Making the site "look the same". The best example I can think of is MSN. All elements of the site are a fixed size and do not change.

Thanks

rmcalli

Rank: ? (4827)
Member #: 3416

msn.com is probably using px, and likely 800px, as it's too wide for my browser window. if you want your site to work like msn, you could do that.

also i think width should be more a concern than height--web pages are expected to scroll vertically. i find that 600px wide is plenty for almost everything i want to do. this will fit even on 640x480 resolution, which i hear is actually quite rare. you could probably do 750px without any real trouble. this should still fit on 800x600, which i've read is what most people have (that or better).

Rank: ? (211)
Member #: 4962

Common rule of thumb these days in the working environments I've been in is to design for 800x600 (degrade) and optimize for 1024x768.

As for your table, if you want the table to resize with the browser, you'll want to set your table WIDTH=XX% of the page you want it to take up (use per cent rather than exact pixels and it'll resize itself to fit the browser it's in).

Rank: ? (779)
Member #: 14565

Don't use %'s because it will look bad on 800x600 and larger resolutions. Just set your main table width to about this:

<table width="750px">

Rank: ? (3)
Member #: 24712

Your best option is to not use tables at all and use <div>s instead.

A rough approximation if you already work with pixels :

5px --> 0.5em
10px --> 0.7em
50px --> 5em
600px --> 50em

Whenever you set :
body { font-size:0.7em } or equivalent in you CSS, every following font size should be set to 1em or higher. Because all the other sizes are dependent on what you set in Body {}.
This way, the layout will adapt to your font sizes as well. Selecting a larger font size on your browser will make the entire layout expand to fit that font size.

You can play around with it until you have the sizes you want, but using em's is probably the best option.

Those are the conversions we used on Ghostnetworks.com .
You can download the CSS file if you like and use what you need.
Just as long as you don't exactly copy