Results 1 to 4 of 4

Thread: How To Change Pixel into percentage

  1. #1
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How To Change Pixel into percentage

    Hi,


    I m trying to code the layout in liquid layout....I have created the all divs you can say that frame set of the layout but now I am putting the content into the divs(width in percentage ...as per liquid layout)....but now I have to convert the pixels width and height into percentage to make it liquid layout

    ....so here I m stuck...if some one could help me in this...that wil be very great.


    Note:- If anyone give a link or tutorial or code of totally liquid layout based website than that will be also very helpful


    Thanks in advance!!

    Bye

  2. #2
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Trial and error ?

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    This is going to involve some basic math, so I am going to assume you know how to use a calculator.

    The audience of the website is one of the most critical aspects of any website/speech/ or basically any form of interaction with another human. For web development purposes, thinking about width and fluidity you need to consider both the high end and the low end. You want to design for the middle and offer features for the high and the low ends. Meaning you want your website to look good on a monitor that has resolution of 2060x1600px but also on a monitor with a lot less. I am going to design this for a 800px width browser, however depending on your audience that may not be small enough (pda/handheld)etc...

    So my body is 800px wide, but I am going to do a centered page and I would like some whitespace on either side if available.

    In order to accomplish this I have to come up with a number that will both work effectively (not give me any horizontal scroll) but will also be available to expand. So I come up with the number of 770px wide that I want my outside container. This will allow me approximately 15pixels "padding" on the left and right to deal with those browser inconsistencies. so to find out what I need my percentage at, I do some math


    Goal: 770
    Actual: % 800
    Total: .9625

    multiply to get the percentage and we get 96.25% you can decide whether you would like to round or not but I am not going to.

    The next element is my header script, and I want that to cover the whole width so I set that at 100%

    the next block of code is dependent upon what type layout I have, I am going to share a 2 column layout because I just dont want to get into explaining a 3 column fluid layout at the moment.

    In my table structure I have my left column (nav) set to 190pixels. To convert that to percentage I do the same steps I did before... except now my "content" isnt the full body of 800 its the 770.

    Goal: 190
    Content: %770
    Total: .24675325

    multiply by 100 to get the percentage and I get 24.675325% that now becomes my left navigation.

    I then take my right side cell which is 580 and divide that by 770 then multiply by 100 to get 75.324675% which now becomes my right side... some people may just round to 25% and 75% but that is up to you.

    now as for the height, my suggestion would be to not touch the height attribute at all, and let it be handled by the default mechanism of the browser... which is the height is 100% of the content within.

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Or...use this.

Bookmarks

Posting Permissions

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