Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Hello,
    The website I am working on displays correctly on my monitor, which uses a widescreen monitor. However, when I checked it from another computer's monitor with a square screen, some parts at the very right do not fit, and the user has to scroll to right in order to see them, which does not look very good.
    How do you autocenter the whole website, for any screen? And the total width of the website, should it be a fixed width or liquid... If so how do you achieve liquid width for the whole site?
    I mean all my elements on my website uses divs with absolute positioning. So it seems that if I want to autocenter, now I should not use absolute positioning anymore correct? In that case how do I do that? There are may be 50+ divs I need to change then....OR may be I dont need to change any absolute positioning divs at all, but put the whole website in an iframe, which is autocentered AND its width is small enough to account for square screens too...Is my thinking correct? How do people generally deal with this issue?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    This is really a tough call ...

    Many arguments about what monitor size is most common, and design tends
    to be very personal. Example, I like "fixed" width sites myself, but the next guy
    will like "fluid" width sites.

    Most people are now buying monitors and using browsers wider than 800 pixels.

    Fixed-width pages that are centered on the browser look funny on really big
    monitors (they look so narrow and tiny). I like the idea of using a fixed-width
    of about 1000 and centering it. Special care is made to place all important
    information in the top-left quadrant so that the person viewing with an 800 pixel
    browser will see the important information without horizontal scrolling.

    The bottom of the browser (before vertical scrolling is required to see content),
    is called "the fold". Again, important information "above the fold".

    The fold will be located differently for a person who owns a 20-inch monitor and
    uses the 1024 width browser window (or larger). The experience of viewing the
    website will also look different for the Mac user that has the monitors that spread
    across their desks ... how large are those things!

    ============

    So now the "fluid width" design ....

    It is supposed to spread across the whole monitor from left to right, but as you say,
    it can shrink too ... messing-up the layout. For the Mac user with the huge monitor,
    if they need to turn their head back and forth to read everything ... it's too wide.

    ============

    Pick the design and style you want, but make sure important information is always
    viewable by all ... either above the fold, center screen, or obvious, without scrolling.

    I'm sure this thread will open-up a huge debate and discussion ...
    but this is a forum, so I guess we should discuss.

    Other comments?


  4. #3
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Thanks, and how do I autocenter? Also how do I achieve fixed width for the whole thing? By adding individual divs or how does it work? In that case absolute postioned divs wont work I guess right, or can I still do it but include everything in a iframe in the center? (which brings another question, as therea re already iframes in that page, can this be done)

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Autocenter involves defining a fixed-width within CSS and some other properties.

    I recommend you use Google to search for: CSS fixed width page example
    http://www.google.com/search?hl=en&q...ample&aq=f&oq=

    But, in a very simplistic example, this is the basic structure to the centered page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Centered Page Example</title>
    </head>
    <style>
    body{
    margin:0 auto;
    width:800px;
    text-align:center;
    background-color:#000000;
    }
    #content{
    background-color:#999999;
    width:800px;
    height:500px;
    }
    </style>
    <body>
    <div id="content">
    This is a test.
    </div>
    </body>
    </html>
    The body width is defined and margin:0 auto; is used
    to center properly (for IE), FF is already OK.

    Your entire content will go within <div id="content">.

    Absolute positioning should not be used anyhow, so you'll have to work that out.
    You should be floating <div>'s as needed and nesting <div>'s where required.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:11 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com