6 Replies - 1985 Views - Last Post: 23 March 2009 - 09:29 AM Rate Topic: -----

#1 pityocamptes  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 24-February 09

Should I use Pixels or Percentages to fix text and pics?

Posted 20 March 2009 - 11:09 AM

I am working on a web site and it dawned on me that people have different size monitors (doh [:P] ) - this is very different from the class room environment. Anyway, should I be setting positions to absolute with fixed left, right, top, bottom, pixel coordinates, or use percentages?? I was thinking if I use pixels and someone has a bigger monitor than what I am using to set the page up it might be offset to the left, correct? Thoughts? Thanks!!!

Is This A Good Question/Topic? 0
  • +

Replies To: Should I use Pixels or Percentages to fix text and pics?

#2 doWhileSomething  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 96
  • Joined: 08-January 09

Re: Should I use Pixels or Percentages to fix text and pics?

Posted 20 March 2009 - 12:04 PM

View Postpityocamptes, on 20 Mar, 2009 - 10:09 AM, said:

I am working on a web site and it dawned on me that people have different size monitors (doh [:P] ) - this is very different from the class room environment. Anyway, should I be setting positions to absolute with fixed left, right, top, bottom, pixel coordinates, or use percentages?? I was thinking if I use pixels and someone has a bigger monitor than what I am using to set the page up it might be offset to the left, correct? Thoughts? Thanks!!!


I would read up on CSS a bit, but pixels use a fixed size, while percentages use some portion of the screen or parent container.
if your container is 95% wide, it will always take up 95% of the available space based on the container it resides in. If it's outside of, or is the parent container, it will always take up 95% of any screen size.


If somone wants to zoom in on a page with "X" browser, if you use pixels for font sizes, they will become distorted more so than if you used percentages for the font size.

e.g. You might decalre as part of your body (document) style font-size:100%. Then when you want to change the font size in other containers, you would just need to use some value away from the base. (75% / 125%)
Was This Post Helpful? 0
  • +
  • -

#3 pityocamptes  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 24-February 09

Re: Should I use Pixels or Percentages to fix text and pics?

Posted 20 March 2009 - 12:46 PM

View PostdoWhileSomething, on 20 Mar, 2009 - 11:04 AM, said:

View Postpityocamptes, on 20 Mar, 2009 - 10:09 AM, said:

I am working on a web site and it dawned on me that people have different size monitors (doh [:P] ) - this is very different from the class room environment. Anyway, should I be setting positions to absolute with fixed left, right, top, bottom, pixel coordinates, or use percentages?? I was thinking if I use pixels and someone has a bigger monitor than what I am using to set the page up it might be offset to the left, correct? Thoughts? Thanks!!!


I would read up on CSS a bit, but pixels use a fixed size, while percentages use some portion of the screen or parent container.
if your container is 95% wide, it will always take up 95% of the available space based on the container it resides in. If it's outside of, or is the parent container, it will always take up 95% of any screen size.


If somone wants to zoom in on a page with "X" browser, if you use pixels for font sizes, they will become distorted more so than if you used percentages for the font size.

e.g. You might decalre as part of your body (document) style font-size:100%. Then when you want to change the font size in other containers, you would just need to use some value away from the base. (75% / 125%)




OK, now I am confused. What I have done is used DIV's to set up text in boxes and ASP IMG, etc. for pics and then set up the location in the CSS doc. Is this not correct? If not would you be so kind as to present a small example of how one should correctly use the methods you describe? Thanks!!!!


Basically I have built a page and it is appearing the way I want it to in different browsers. What concerned me is that I am making this on a 17" monitor (laptop) and was wondering if it would look goofy on a smaller monitor or an enormous monitor. How do you get the info to look the same no matter what monitor size? Thanks again!!!

This post has been edited by pityocamptes: 20 March 2009 - 12:52 PM

Was This Post Helpful? 0
  • +
  • -

#4 doWhileSomething  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 96
  • Joined: 08-January 09

Re: Should I use Pixels or Percentages to fix text and pics?

Posted 21 March 2009 - 01:28 PM

I'm not saying you have to change anything, I was tryig to explain (obviously I failed) to explain myself.

If a user's monitior is 17 inches with a resolution of 800X600 and you code your page to be 800 pixels wide - your web page would fill, and likely exceed the viewable area of the monitor.

If this same user has a resolution of 1024x800 the user would see approximately 224 pixels of dead space, either equal on both sides or all to one side (depending on how you've laid out your document.

Someone with a 22" monitor that runs it at 800x600 would see the same thing (albeit in a bigger space) as the user with a 17" monitor.

If you use a percentage, instead of pixels, the browser will scale the document to the percentage of the available width.
Example:

A user (me) with a 24" monitor and resolution 1680x1024 viewing a page with a fixed width of 800 pixels, the page would only take up approximately half my screen. If you used a percentage for the overall width (e.g. 95%) it would scale to 95% of the available screen width, leaving a 5% margin/padding.

So, to answer your question, if you use percentages, which are a bit more difficult to code, the screen should appear very similar on all monitors (within reason).

Just make two sample pages, one with fixed widths, the other using percentages.

View the page on your monitor and change the screen resolutions go from 800x600 to whatever the max resolution your video card supports.
Then, use the zoom feature in the browser. View how the font's look using percentages and fixed pixels. This would be the best way to test and give you real results to play with and visualize.

This post has been edited by doWhileSomething: 21 March 2009 - 01:30 PM

Was This Post Helpful? 0
  • +
  • -

#5 kansascoder  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 9
  • Joined: 22-March 09

Re: Should I use Pixels or Percentages to fix text and pics?

Posted 22 March 2009 - 06:53 AM

I use pixels on the intranet project I came onto as that is what has been in use. It's ok here as all browers and monitors are the same, for the most part. But using percentages for in internet project, imho, is the best way to go. It's best to design as much as u can for multiple monitor settings from mobile computers to large desktop monitors. money and time will constrain your choices.o prevent them from becoming

You may want to set a minimum width on some elements to prevent them from becoming unreadable. Personally I've never been too concerned about the user who is doing really odd things with their browser window ;)
Was This Post Helpful? 0
  • +
  • -

#6 doWhileSomething  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 96
  • Joined: 08-January 09

Re: Should I use Pixels or Percentages to fix text and pics?

Posted 22 March 2009 - 06:58 AM

View Postkansascoder, on 22 Mar, 2009 - 05:53 AM, said:

You may want to set a minimum width on some elements to prevent them from becoming unreadable. Personally I've never been too concerned about the user who is doing really odd things with their browser window ;)


I agree completely. I develop for the top 95% and then try to make considerations for the other 5%. I've seen people waist 20-30 hours (in the last 6 months) trying to get pages built for modern browsers to have IE < 5 compatibility and render properly. If someone is using a browser that is 10 years old and the page looks like garbage, but looks perfect in 99.9% of all other browsers, to me it's a waste of time trying to correct it.
Was This Post Helpful? 0
  • +
  • -

#7 pityocamptes  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 24-February 09

Re: Should I use Pixels or Percentages to fix text and pics?

Posted 23 March 2009 - 09:29 AM

View PostdoWhileSomething, on 21 Mar, 2009 - 12:28 PM, said:

I'm not saying you have to change anything, I was tryig to explain (obviously I failed) to explain myself.

If a user's monitior is 17 inches with a resolution of 800X600 and you code your page to be 800 pixels wide - your web page would fill, and likely exceed the viewable area of the monitor.

If this same user has a resolution of 1024x800 the user would see approximately 224 pixels of dead space, either equal on both sides or all to one side (depending on how you've laid out your document.

Someone with a 22" monitor that runs it at 800x600 would see the same thing (albeit in a bigger space) as the user with a 17" monitor.

If you use a percentage, instead of pixels, the browser will scale the document to the percentage of the available width.
Example:

A user (me) with a 24" monitor and resolution 1680x1024 viewing a page with a fixed width of 800 pixels, the page would only take up approximately half my screen. If you used a percentage for the overall width (e.g. 95%) it would scale to 95% of the available screen width, leaving a 5% margin/padding.

So, to answer your question, if you use percentages, which are a bit more difficult to code, the screen should appear very similar on all monitors (within reason).

Just make two sample pages, one with fixed widths, the other using percentages.

View the page on your monitor and change the screen resolutions go from 800x600 to whatever the max resolution your video card supports.
Then, use the zoom feature in the browser. View how the font's look using percentages and fixed pixels. This would be the best way to test and give you real results to play with and visualize.





OK, that makes sense. Thanks. Looks like I'm going back to the drawing board... :crazy:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1