Size problem? :(

westy · February 26th, 2008, 07:35 PM

Hello everyone,
I have got myself all confused over the whole screen resolution size issue and wondered if I asked a some questions then maybe you could help me.
What code do I need for the website to fit to the screen size viewing and what size pixels do I design the site in?
The problem I am having is the client has a very high resolution and are worried about the amount of blank page surrounding the site, I was trying to design it to fit all screens so designing pretty small and centering howver they would rather it was designed at a higher resolution. So I made the site bigger but still it does not fit their page properly. Please view this link of the site
http://www.sussexexboxers.com/DPS%20...0LTD/index.htm

Don't worry about the design I am trying to sort out the correct size and codes to use before I proceed with the design. Sorry if I have not explained this well, if you have any questions please ask, and thank you all for your time I really appreciate your help so I can continue design!
all the best, westy

Ed · February 26th, 2008, 08:04 PM

For a website to fit all resolutions, you should use fluid values.

For example, 800px will always be 800px on all screen resolutions. That's 800 small dots across the screen. Pixels are not fluid.

To make a site fluid, you should use values like % and em.
They'll will change depending on the screen resolution.

If you were to set the width of a page to 50%;

It would be 512px wide on a 1024x769 Resolution
It would be 640px wide on a 1280x800 Resolution
It would be 400px wide on an 800x600 Resolution

And so forth.

The Same goes to 'em'. A screen resolution has a certain size for 1em. On all resolutions, 4em will be 4 sizes larger than the pixel size 1em is set for on that resolution.

So, if 1em was set as 8px on an 800x600 Resolution;

5em would be 13px
12em would be 17px
7em would be 14px

And so forth.

If 1em was set as 12px on an 1024x768 Resolution;

5em would be 17px
12em would be 21px
7em would be 19px

And so forth.

As you can see, you should only have to set it once, and on different resolutions, everything should display relative to each other.

Hope this helps,
Ed

NOTE: This is a rough explanation, this will work, but examples are not accurate.

westy · February 27th, 2008, 07:25 AM

Hi Ed,
Thank you very much for your reply!
Just to confirm before I get stuck in..... if I put in the code
body {
margin: 0px 0px 0px 0px;
padding:0px;
width:50%;
}
And design the site 640px wide (cos i think they have 1280x800) the website will automatically adjust to the size (even if i use tables?). Does this mean if people on different screen resolutions come and visit the site it will adjust to their sizes too?
Westy

Ed · February 27th, 2008, 10:43 AM

Yes, if you set it to 50%, it should cover half a person's screen no matter what resolution you're on.

It's the same with 100%. It will cover their whole screen no matter what size or resolution they are on.

I'm glad to help.

Feel free to post again if you're having problems with anything,
Ed

Ed · February 27th, 2008, 11:36 AM

Thread Moved to CSS Section.
This thread is now related to Cascading Style Sheets.

Ed.

westy · February 27th, 2008, 06:58 PM

Hi ed, sorry if posted in wrong place.

I put the code below in to the css style sheet

body {
margin: 0px 0px 0px 0px;
padding:0px;
width:100%;
}

Then in html to test it i had a table size 1000px (pretty big) but when preview it doesn't fill whole screen??

My friend has a high resolution screen at least 1280 by 800 and they would rather that screen is filled up with content rather than smaller and center so that it fits in with other resolutions. Do you think I should just design the site to fit the high resolution or could someone please help me with script for a better method.

Thanks again

Ed · February 27th, 2008, 07:10 PM

Um, well. The body is the whole site, what's visible to the user, from top to bottom, left to right.

We don't want to be using pixels. They are not fluid as stated in my first post.

You should give the table an 'id' and then set the width to 100% in your CSS. You should do this since the body of your page is usually 100%, and it's what's inside it you need to change.

HTML Code:

#table1 {
width: 100%
}

I suggest reading up on this tutorial before you attempt anything more.

Ed.

westy · February 27th, 2008, 07:33 PM

Thanks Ed you're a diamond! I appreciate your help.
You know when you been at computer too long you can't remember the simple things I really needed to be pushed in the right direction!!