Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Turning % to px

  1. #1
    New Coder
    Join Date
    Jul 2004
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer Turning % to px

    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.
    Last edited by dvdljns; 09-30-2005 at 11:59 PM. Reason: bad spelling in title

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    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:
    Code:
    <frameset rows="50,*"">
    <frame fame="topFrame">
    <frameset cols="20%,*"">
    <frame fame="leftFrame">
    <frame fame="rightFrame">
    </frameset>
    </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

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •