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 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pixels or Percents?

    Hey guys,

    Coding a new website. Basically, for position elements using CSS I would use percents and figured that was the best thing to do since everyone's monitor was a different size. But I noticed a lot of big websites use pixels....

    I don't understand how you can use pixels to position things since we all have a different size screen.

    Please help!

    Thanks
    Norm Nasty

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://www.w3schools.com/cssref/css_units.asp

    if your answer isn't at w3schools, you won't find it anywhere.
    Last edited by JustS; 02-17-2012 at 06:11 AM. Reason: to elaborate

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hey Norm850,

    You are correct, most websites indeed are using pixels instead of percentage. It is mostly 960 pixels wide. This is based on the 1024 x 768 resolution.
    Think about browser resolutions for a moment. Indeed, we do all have different screen sizes. But around 1% of all users have a screen size smaller than 1024. My guess is that the 1% of the users who do have a 800x600 resolution are old people, barely comfortable with the internet. So we can basically ignore that 1%.

    We use the 960 width, because we can all control this. Lets say I have a 800px wide text block. I can play around with borders, background images, and text sizes, without having to worry about the screen size of my user.

    If I make this text block 50%; The text block can range between 500px on a 1024 width, to around 1000 px on a 1960 width. This range makes it hard to control.

    Percentage is always a good consideration, but most of the times, there is too much tweaking and the website on a large screen basically has too much differences when you compare it to a small screen.

    So, thats why most sites use px and not %.

  • Users who have thanked majunior for this post:

    elgg developers (02-17-2012)

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Here's a decent article on the pros and cons of fixed and fluid widths:
    http://coding.smashingmagazine.com/2...t-one-for-you/

    960px is frequently used since 960 can be divided by 2,3,4,5,6,8,10 to allow the creation of many different sets of column widths that fit easily into the design.

    My guess is that the 1% of the users who do have a 800x600 resolution are old people, barely comfortable with the internet. So we can basically ignore that 1%.
    I worked in a place a couple of years ago where you'd have been escorted from the building for that....

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    0
    Thanked 2 Times in 2 Posts
    @SB65: lol :P
    out of curiousity: why would I be escorted from the building for ignoring the 1%?

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by majunior View Post
    Hey Norm850,

    You are correct, most websites indeed are using pixels instead of percentage. It is mostly 960 pixels wide. This is based on the 1024 x 768 resolution.
    Think about browser resolutions for a moment. Indeed, we do all have different screen sizes. But around 1% of all users have a screen size smaller than 1024. My guess is that the 1% of the users who do have a 800x600 resolution are old people, barely comfortable with the internet. So we can basically ignore that 1%.

    We use the 960 width, because we can all control this. Lets say I have a 800px wide text block. I can play around with borders, background images, and text sizes, without having to worry about the screen size of my user.

    If I make this text block 50%; The text block can range between 500px on a 1024 width, to around 1000 px on a 1960 width. This range makes it hard to control.

    Percentage is always a good consideration, but most of the times, there is too much tweaking and the website on a large screen basically has too much differences when you compare it to a small screen.

    So, thats why most sites use px and not %.

    Not sure its wise to ignore any demographic just because they use older equipment or outdated surfing habits..lol

    1% of 10 million ppl is no small group wouldn't you say? If you're running an ecommerce site, wouldnt't you want to, within reason, accomodate as many users as feasible?
    Teed

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by majunior View Post
    @SB65: lol :P
    out of curiousity: why would I be escorted from the building for ignoring the 1%?
    For discriminating against a minority and/or disadvantaged, or other group of people - this organisation was very right on and politically correct. Nothing whatsoever to do with web applications per se.

    Aside: This whole thread seems to be heading in a similar direction to "why do you bother with people that have js disabled" and "why do you bother with IE6 users" - to which my general response is, because they're users too and might enjoy/use/buy from the website in question. But let's not go there on a Friday afternoon....
    Last edited by SB65; 02-17-2012 at 02:39 PM.

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But for accomidating those 1% people you dont want to make your site discomforting for the remaining 99% . ( i hate those blogger sites which look like ribbons that run forever down the screen)

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    One solution to all this is to use css @media queries of course, but if someone's using a tiny screen they're probably still using IEsomethingquiteold which won't support them.
    However, they could also be on a mobile device, which is a whole dfferent debate.

    (Had a client who used IE5.5 up to last summer, so his website had to work in that, even though nobody else used it.... He had an 800by600 screen too.)

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Why has nobody raised the specter of using % widths, with px min-width and px max-width?

    I do this from time-to-time.

    For example:
    http://rowsdower.freehostia.com/layo...th_%28html5%29

    (Note: I know that particular page does not use a max-width for the #wrapper div, but it easily could in order to prevent super-wide displays from having a problem.)

    Mobiles will break the mold given my specified min-width, but I suppose you can use media queries on them to handle that issue so you're covered on all bases.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    New Coder
    Join Date
    Feb 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I appreciate all the replies. One more question though. I have a background image that I created and it has words at the top of the picture for a banner at the top of my website basically. My nav bar (div element) collides with the words on my desktop (bigger monitor) after coding it to look fine on my laptop (smaller monitor). This is probably because i'm using pixels and I am wondering how can this be fixed? Is the background image a bad idea?

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Ideally you'd use % for anything you want sized relative to the viewport and em for anything you want sized relative to the text.

    px is only useful for specifying borders where you want them as thin as possible.

    Most big web sites are written by people who learnt how to create web sites for 20th century browsers who have not updated their skills to deal with the different approach required with modern browsers and non-computer devices. Also a lot of sites still teach how to write web pages for browsers such as IE4 and Netscape 4 rather than for the modern web (eg. w3schools).

    With modern widescreen monitors and window-arrowkey functions in Windows 7 it is really easy to display browsers that take up exactly half the screen allowing something else to be displayed in the other half. With 1960x1080 being a common screen size this means that the browser gets 960 pixels width including the side borders and vertical scrollbar and so will have about 945 pixels viewport width - this is probably the most common viewport width currently in use but nowhere collects statistics on viewport size and even as the most common it is probably only 5% or less of the total).
    Last edited by felgall; 02-18-2012 at 01:27 AM.
    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
    •