SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    what to do when having high resolution?

    hi guys ..
    another question plz ..
    my screen has a resolution of: 1440 by 900 px
    how shall i make my website when i know thats lots of people have much less pixels like 800 by 600?

    thanks a lot.

  2. #2
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can always set min-width and max-width on the outter-most container, restricting the size of the site

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    234 Post(s)
    Tagged
    1 Thread(s)
    either that or make it fully liquid to adapt to any resolution, or when you are testing your site, change the resolution of your screen.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by molona View Post
    or when you are testing your site, change the resolution of your screen.
    Why change the resolution when simply resizing the browser will achieve the same result.

    It is the size of the browser viewport that matters in how web pages display and not the screen resolution.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh - maybe i understood that wrong (even though the min/max-width will probably come in handy)

    the Firefox webdeveloper addon has a Resize feature, and it will shrink the browser to the size it would look on 800x600 or 1024x768

    https://addons.mozilla.org/en-US/firefox/addon/60

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the advise guys ..
    but u gave me a couple of solutions but didnt explain how to it like:

    - you can always set min-width and max-width on the outter-most container, restricting the size of the site
    - make it fully liquid to adapt to any resolution
    - resizing the browser

    thanks in advance ..
    i truely appreciate the help ..

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's say you want the browser window to be centered at larger than 976px, yet have a minimum of 750px (for ease of printing). You'd then use the following CSS code:

    Code CSS:
    body {
        min-width: 750px;
        max-width: 976px;
        margin: 0 auto;
    }

    However, this doesn't work in IE 6, so you'll need to use a hack. Out comes the IE only stylesheet, and in it goes this bit of JScript served via an expression that's hidden from newer IE versions by the Star HTML filter:

    Code CSS:
    * html body {
        width: 750px; /* if scripting is off, fix the width to 800 friendly */
        width:expression(
            (document.body.clientWidth>992) ? "976px" 
                : ((document.body.clientWidth>750) ? "auto" : "750px")
        );
        height: 1&#37;; /* haslayout */
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot Dan ..
    woow .. it feels like reading chinese .. i have so much to learn ..
    isnt there any other simpler way? in order not to get confused with all the new stuff i am learning ..
    thank u ..

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's about as simple as you're going to get without having to rely on even more hacks. I normally design for an 800-976 size anyway, so I can drop that into my code and be done with it.

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks ..

  11. #11
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post

    Code CSS:
    * html body {
        width: 750px; /* if scripting is off, fix the width to 800 friendly */
        width:expression(
            (document.body.clientWidth>992) ? "976px" 
                : ((document.body.clientWidth>750) ? "auto" : "750px")
        );
        height: 1&#37;; /* haslayout */
    }
    IE expressions should not be encouraged. It's a non-standard approach that does not comply with W3C directives.

    Furthermore, Microsoft is ending expressions in Internet Explorer and IE8 will run without it in Standards mode by default. For backward compatibility Quirks and IE7 Strict modes can be used.
    Last edited by ain; Oct 18, 2008 at 05:18. Reason: Additional remarks

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ain View Post
    IE expressions should not be encouraged. It's a non-standard approach that does not comply with W3C directives.

    Furthermore, Microsoft is ending expressions in Internet Explorer and IE8 will run without it in Standards mode by default. For backward compatibility Quirks and IE7 Strict modes can be used.
    Yes but the expressions are the only way to add the same functionality for IE6 that can be done using standard CSS in more modern browsers. Dan's example would only try to work in IE6 and earlier anyway.

    If you don't use expressions to make IE6 behave then what do you suggest as an alternative?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    It doesn't matter if IE8 doesn't support the expressions. The expressions make up for retardedness, which is a Feature of IE6 and not IE8.

    I don't stick the Expressions in another stylesheet though. I comment them out when sending to the validator cause I've crashed it on my machine, but since I already have other junk in there for IE, the toilet's already dirty so I don't bother adding conditional comments anyway. I'd rather the CSS sheet was my sewer than the HTML pages.


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
  •