How do I specify what screen resolution I am designing for? 1

okpeery · Feb 27, 2006

When I use Dreamweaver I know I can go to the status bar and choose a screen resolution. I have been trying to do a site without tables or DW. I did a lot of it this way but when I got to the parts I didn't know how to do without DW I copied and pasted the html and css into DW to finish. This worked fine. Everything displayed fine.

Now I am on a different machine and platform, PC now, and the site looks large and my liquid layout is not functioning properly. It occured to me that I never did anything in the original code to set screen resolution size. Is there a default size or do you specify size? Is there some other way to do it?

okpeery · Feb 27, 2006

While the problem of the site not displaying properly is solved, I still would like to know if you have to specify resolution when hand coding.

I had a site designed a few years ago that was done at 1024x768 before that many people could view it at that size. When viewed at 600x800 you had to scroll vertically and horizontally.

How do you specify when hand coding?

BabyJeffy · Feb 27, 2006

You don't specify any form of screen size... you just apply css to your designs in such a way that it accomodates a minimum size you are happy with. You can do this for most browsers (exception being IE for Windows) using the min-width and min-height css properties (with a work-around available for IE using a conditional comment and setting the width and height inplace of min-width and min-height).

Getting back to how you can manage the size of fonts etc across platforms and browsers... Here is a snippet of CSS that I put at the top of my code...

Code:

<style type="text/css">
body { font-size: 100%; }
html>body { font-size: 16px; }
</style>

Those two lines pretty much mean that your base page font size will now look the same in Windows and Mac on every browser. It's not totally perfect... but it's the best I've managed to date.

Now... when you specify a font size in your own css, do not use px or pt as a measurement value. Use em or %. Here is an example:

Code:

<style type="text/css">
h1 { font-size:90%; }
.content { font-size:85%; }
footer { font-size:75%; }
</style>
...
<body>
<h1>This is a heading</h1>
<p class="content">And some text</p>
<p class="footer">And a smaller footer</p>
</body>
...

When I specify that the 'content' class is font-size 85%, I am saying that it is 85% of it's parent container - in this case the body. Using 0.9em has the same effect... it reduces the font-size to 90% of the parent container - which is the body (in this case). Beware nesting when using % and em values - it's always setting the font-size based on it's parent container.

Hope that makes some sense.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

ChrisHunt · Feb 28, 2006

I still would like to know if you have to specify resolution when hand coding.

You don't. You can't!

How do you think it would work if you did? Is the browser going to go out and buy a bigger monitor for people using the "wrong" resolution?

People will be looking at your site with different screens and different resolutions. It's your job as a designer to give thought to this, and ensure that your site looks OK in all likely resolutions.

There are two commonly followed strategies: fixed-width sites, where you define an absolute width to the content small enough to fit on, say, 800x600 screens and which has wide left & right margins on wider screens; and fluid sites where the text flows to fill the width available. Both have their pros and cons (Google for fixed v fluid).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Click to expand...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I specify what screen resolution I am designing for? 1

okpeery

Instructor

okpeery

Instructor

BabyJeffy

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor