SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member babyblue's Avatar
    Join Date
    Mar 2003
    Location
    Singapore
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Screen Resolution


    How do you solve the problem whenever user start changing their screen resolution from 800x600 to 1024x768?

  2. #2
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What problem specifically?
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i hate it when i change resolution on windows and my icons on the desktop get shuffled around...

    but, back on topic...yes, what problem are you referring to babyblue ?
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Babyblue,

    It would help if you explained what you wanted a little more clearly.

    If you're referring to the problem of when you design a website for 800x600 and the user uses 1024x764 (or larger or smaller) then the answer is obvious .Don't design for a specific resolution.

    Try not to fix the size you want but let the user decide what screen resolution they want to view at. (I paid a lot for this 19" monitor and I want to use all of it , I don't want half of it used.)

    You could use 100% width in CSS (and tables if you must) to fill the screen at whatever size it is. With careful planning and fluid design it does not matter what size the screen is as it will adapt to accomodate. (The same goes for font sizes, you can use ems or % to keep your layout consistent.)

    Try to avoid pixel perfect design and you won't go far wrong. If you've designed your site at 80x600 and fixed the sizes there's little you can do to stop the user using 1024x768 etc. (I've got nothing against 800x600 pixel perfect designs, I'm just trying to answer your question.)

    Paul

  5. #5
    SitePoint Member babyblue's Avatar
    Join Date
    Mar 2003
    Location
    Singapore
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    How do you use 100% width in CSS? (Psss...I am quite new with CSS)

  6. #6
    SitePoint Member babyblue's Avatar
    Join Date
    Mar 2003
    Location
    Singapore
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My problem is when individual user has a different monitor setting, what should I do when I first draft the layout?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by babyblue
    My problem is when individual user has a different monitor setting, what should I do when I first draft the layout?
    Although your question seems quite simple the answer isn't simple and depends on a number of factors. Maybe I can just point you in the right direction.

    If you are using tables you can just use <table width="100%">. Obviously your designs will need to be fluid enough to fit in the table and move around. (If it's a complicated design with background images that align with each other then this will not work as the images will be out of align. But if your design is free flowing text and images that stand alone then this will work fine.)

    In CSS you can define your elements with width: 100%; which will expand and contract to fill the screen as required. It will be too hard for me to explain every css element so I would suggest you find a book or tutorial to work from. There are plenty on the net.

    Here's just a short (and very simple) example of setting 100% width in CSS.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    <!--
    .content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000000;
    background-color: #CCCCCC;
    width: 100%;
    }
    h1 {
    color: #FF0000;
    background-color: #99CCFF;
    text-align: center;
    margin-bottom: 0px;
    }
    .content p{
    margin-top :0px;
    }
    .pictureholder {
    color: #000000;
    background-color: #FFFFFF;
    border: thin solid #000000;
    float: right;
    }
    -->
    </style>
    </head>
    <body>
    <h1>100% Div</h1>
    <div class="content"> 
    <div class="pictureholder">
    	<p>This will float in the text</p>
    	<p>This will float in the text</p>
    	<p>and could contain a picture</p>
    </div>
    <p>This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : 
    </p>
    </div>
    </body>
    </html>
    The answer is really to design for a fluid resolution right from the start. As I said above it's easy to say but does take a lot of thought and compromises along the way.

    If you want intricate pixel perfect design then I would suggest you choose something like 800x600 and just centre the design so it at least moves to the middle of larger screen sizes. However users with smaller screen sizes will have to horizontally scroll to see it all. There really is no way to control what size the user views your site at. (Indeed they could be looking at it on one of the new hand held devices with very small screen sizes.)

    Sorry if this is not much help.

    Paul

  8. #8
    SitePoint Member babyblue's Avatar
    Join Date
    Mar 2003
    Location
    Singapore
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Although your question seems quite simple the answer isn't simple and depends on a number of factors. Maybe I can just point you in the right direction.

    If you are using tables you can just use <table width="100%">. Obviously your designs will need to be fluid enough to fit in the table and move around. (If it's a complicated design with background images that align with each other then this will not work as the images will be out of align. But if your design is free flowing text and images that stand alone then this will work fine.)

    In CSS you can define your elements with width: 100%; which will expand and contract to fill the screen as required. It will be too hard for me to explain every css element so I would suggest you find a book or tutorial to work from. There are plenty on the net.

    Here's just a short (and very simple) example of setting 100% width in CSS.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    <!--
    .content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000000;
    background-color: #CCCCCC;
    width: 100%;
    }
    h1 {
    color: #FF0000;
    background-color: #99CCFF;
    text-align: center;
    margin-bottom: 0px;
    }
    .content p{
    margin-top :0px;
    }
    .pictureholder {
    color: #000000;
    background-color: #FFFFFF;
    border: thin solid #000000;
    float: right;
    }
    -->
    </style>
    </head>
    <body>
    <h1>100% Div</h1>
    <div class="content"> 
    <div class="pictureholder">
    	<p>This will float in the text</p>
    	<p>This will float in the text</p>
    	<p>and could contain a picture</p>
    </div>
    <p>This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : This is a test : This is a test : This is a test : This is a test 
    	: This is a test : This is a test : This is a test : This is a test : This 
    	is a test : 
    </p>
    </div>
    </body>
    </html>
    The answer is really to design for a fluid resolution right from the start. As I said above it's easy to say but does take a lot of thought and compromises along the way.

    If you want intricate pixel perfect design then I would suggest you choose something like 800x600 and just centre the design so it at least moves to the middle of larger screen sizes. However users with smaller screen sizes will have to horizontally scroll to see it all. There really is no way to control what size the user views your site at. (Indeed they could be looking at it on one of the new hand held devices with very small screen sizes.)

    Sorry if this is not much help.

    Paul

    Babyblue appreciate Paul's help. Thank you so much.


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
  •