View Full Version : Turning % to px

09-30-2005, 11:56 PM
I know this is going to be a dumb ?. But I use % when building a web page for a number of reasons. But I was asked the other day how to translate % into px. My answer was that it was not a good ideal because of differant screen sizes. My screen is 800x600 Which is the setting I like best. But I got to thinking I do not use my whole screen to veiw a website. IE takes up a large section at the top and a small section at the bottom. Lets assume for some crazy reason I wanted to build webpages using only px for height and width. Is there some type of guideline to go by.
It seems there must have been at one time because people used to put best veiwed at 800x600 or whatever.

What is the size of a webpage anyway. To me it is my screensize.

10-01-2005, 01:28 AM
What is the size of a webpage anyway. To me it is my screensize.

I guess your right in that. If the page was coded in % that would be correct. If it was in px than the size would be whatever size it's coded to be.

I think the general convention is to design fixed layouts at 760ish-px wide. That way a full screened 800x600 resolution can see it w/o horizontal scrolling.

A lot more users are running 1024 res now. An d thus a lot more sites are building fixed width layouts for this. More room to play with. You could use java script to change between fixed and percentages though. Something that onLoad it would get the innerwidth of the screen and write the css accordingly.

like for instance you build a % site that looks good (fullscreen) from 800 all the way to 1600. But above and below that it looks like arse. You could use javascript to read the innerwidth of the screen and if lower than 800 px write the container width as something like 760px instead of the % so that it doesn't crush up the layout. In the same way,m you could also write a script that said if the innerwidth>1600px make it fix at like 1500px wide.

10-01-2005, 02:17 AM
I assume you taking about framesets

there are 3 ways to set a frames size:

in pixels: ("20" or "20px") this way of setting ensures that the frame has the same size no matter which resolution used.
it is useful if you e.g. want the frame to be at a height of just one text line

in percent: ("20%") ensures that the frame takes up a percentage of the screens size.
it is useful if you e.g. want your left frame to take up 1/3 of the screens width.

and then there is the asterisk: ("*") it tells the browser to use whatever is not used by other frames.

you can use any combination of these.

in this example:

<frameset rows="50,*"">
<frame fame="topFrame">
<frameset cols="20%,*"">
<frame fame="leftFrame">
<frame fame="rightFrame">
</frameset>the topFrame will always have a height of 50 pixels.
the leftFrame will always take up 1/5 of the screens width
the rightFrame will then use what is left
(some older browsers had some problems rendering it the right way, so it could vary by a few pixels)

I suggest that you test, by viewing your page in different screen resolutions, what combination is best suited for your page.
you can just translate "%" to "px"
e.g. a framewidth at 20% wil be "200px" when viewed in 800x600 while it will be "256px" in "1024x768"
the size of a webpage depends on your resolution and browser.
it is equal to the white area you wil see if you enter "about:blank" in your address-bar.

Here are some of the sizes:
in 800x600 using IE6 it's size is 800x465.
in 800x600 using N7.2 it's size is 800x444.
in 1024x768 using IE6 it's size is 1024x633.
in 1024x768 using N7.2 it's size is 1024x612.

hope this answers your questions

10-02-2005, 12:20 AM
I use the following in the stylesheet for my page content:

#content {margin:2% auto;width:94%;width:540px%;min-width:570px;max-width:850px; text-align:center;}

This sets the content to be 94% of the available browser width in IE. In modern browsers it will also be 94% of the available width provided that 94% does not evaluate to less than 570 pixels or greater than 850 pixels in which case that minimum or maximum widht will be used instead. On web TV where pages are always 544 pixels wide and never anything else the width is set to 540.