Results 1 to 5 of 5

Thread: General Screen Resolution Design Question

  1. #1
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default General Screen Resolution Design Question

    I personally love the 800 X 600 screen resolution but I realize few people use that anymore.

    I have been studying other websites and it seems a lot of them still design for this screen resolution and just use a table to center it if the resolution is higher.

    I use CSS for design and know you aren't "Supposed" to use tables.

    Now with plain CSS and a site that is heavy in words it doesn't seem to matter much. The sites look good in any resolution, but for example, on one site I did, I used images. In 800 X 600 I can use 2 images across. If I were to go to a higher resolution I could use 3 images across.

    Now using CSS it looks great in 800 X 600 but in higher resolutions I am left with a lot of blank space at the right.

    So I have two questions, what is the best way to design for different screen resolutions. Should I just design for the higher resolutions and let the 800 X 600 people scroll horizontally?

    Should I just use a huge <div> to contain each page and try to center that on the screen, so it looks good in 800 X 600 and just centers the page in higher resolutions. Would that even work? Or is it back to putting everything in a table and just centering that table?

    I am looking for ideas and best methods. I perfer to do it right with CSS if possible.

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There are various ways of designing a page, many, many ways in fact. Obviously, one would like their page to take up the whole window, and look good in big (high res full screen) windows as well as in small (low res full screen and high res part screen) windows.

    Now, if you have an object, like a table or an image, that is wider than the window, there will be a horizontal scrollbar. So you would like to try avoiding that. Other than that, unless you restrict your content somehow, it will wrap in narrow windows and stretch out in wider ones.

    Have a look here:

    http://www.dynamicdrive.com/style/layouts/

    and elsewhere on the web for specific templates you can play with, or make up one(s) of your own.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I guess I see most sites designed like MySpace, in other words at 800 X 600 screen resolution it takes up the whole screen nicely.

    But if you have a higher resolution it doesn't fill the entire screen, it just leaves an equal space on the right and left sides. In other words it centers it on the screen for higher resolutions.

    Now how do they do this. Do they just wrap everything up in a div container and center that division?

    MySpace.Com (the log in page) is a good idea of this. So is the main page for the Chicago Public Library http://www.chipublib.org/ is another example

    I guess there is no good way to do it to work for everyone. I find the fluid layout for CSS works great for sites that have words.

    I know there is no one right answer I just thought if anyone had any ideas or links they could give me for ideas it'd be fun to play around.

    thanks

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you really want to center a div that will fit on most users 800x600 window, full screen and center on all larger, that's easy:

    HTML Code:
    <body style="margin:0;padding:0;">
    <div style="width:788px;margin:0 auto;">
    
    All your stuff goes here
    
    </div>
    </body>
    To work in IE, this requires a valid URL DOCTYPE as the very first thing in the source code, this (red) is a good one:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Also note that taking design lessons from myspace is not a wise idea

    but yes, as John stated use a div and give that div all your features (font size, padding top, left and right, borders, whatever you need and then use that to center your stuff instead of tables.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

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
  •