SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adjust Web Page Code to Suit Other Monitors/Resolutions

    My splash page sits centrally on my 19" monitor at res. 1280 x 1024 but on a colleague's 17" screen it's only half in view and you need to move the scroll bar down and to the right to view it correctly:

    ie. on the smaller screens, the page needs to come up and over to the left.

    I'm trying to use the valign= and align= attributes for vert. and horiz. positioning and make the table cells behave but have had little success.

    Do you have a method for overcoming page display problems (positioning and alignment) when trying to satisfy viewing on different size/res. monitors?

    Your comments would be much appreciated

    Regards

    Whitt1

  2. #2
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The answer to your question lies in using CSS for positioning as opposed to tables.

    On another note, have you considered the need for a splash page?

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Lancs, England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Nicky D said, you use css positioning if you want your page centered on any screen size. You can still use a table to display the main content of the site though.

    I have an example at:
    http://www.lincoln-oxford.com/users/.../manalive.html

    The code is as follows:
    <!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 Table Example</title>

    <style type="text/css">
    html, body { /*always use in any style sheet*/
    margin: 0;
    padding: 0;
    }

    .table1 {
    position: relative; /* needed so you can use the 'left' attribute */
    width: 800px;
    left: 50%; /*pushes the table so the left edge starts halfway across the screen*/
    margin-left: -400px;/*brings the table left half of its width so that it is centered */
    border: 1px solid black;
    }

    .table1 td {
    border: 1px solid red;
    background-color: #ccc;
    }

    </style>
    </head>

    <body>
    <table class="table1">
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    </tr>
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    </tr>
    <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    </tr>
    </table>
    </body>

    </html>

    The centering method is slightly longer than some others, but i've found it is the one compatible with most browsers.

    Hope that helps
    Nick


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
  •