Getting a page "centered"

Discussion in 'Web Design and Development' started by irishgrizzly, Aug 16, 2006.

  1. irishgrizzly macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #1
    Hi, I'm designing a bands site in imageready and uploading it in Dreamweaver. At the moment its looking like this; http://www.harlem.ie/test_site.html. How can I get it to stay centered so that no matter how much the viewer opens their browser it stays in the center of the page.

    Can I use HTML or do I have to use CSS? I''m new to this so don't want to use anything too complicated!

    Thanks.
     
  2. believo macrumors regular

    believo

    Joined:
    May 21, 2004
    Location:
    Los Angeles, CA
    #2
    I have the same question. Anyone know?
     
  3. dunc85 macrumors regular

    Joined:
    Jul 23, 2006
    #3
    I noticed you are using tables, so you would give the table an align attribute.
    Where you have

    <table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">

    include
    align="center"
     
  4. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
  5. believo macrumors regular

    believo

    Joined:
    May 21, 2004
    Location:
    Los Angeles, CA
    #5
    that works for left to right centering but what about up and down centering?

    thanks
     
  6. dunc85 macrumors regular

    Joined:
    Jul 23, 2006
    #6
    You can use the valign attribute in a rather roundabout way:

    <table WIDTH="100%" HEIGHT="100%" BGCOLOR="#ffffcc" STYLE="POSITION: absolute; left: 0; top: 0; Z-INDEX: -1">
    <tr>
    <td align=middle valign=center>
    <!-- Your main table goes here -->
    </td>
    </tr>
    </table>

    So basically you have a table which takes up 100% of the screen and then within that, another table which is aligned to the top. Use the code above and it will - it's tricky to explain.

    I should have also mentioned, you can use CSS by using:

    (to center horizontally)
    margin-left: auto;
    margin-right: auto;

    (to center completely)
    margin: auto;
     
  7. RacerX macrumors 65832

    Joined:
    Aug 2, 2004
    #7
    See if this is what you were looking for...
     

    Attached Files:

  8. believo macrumors regular

    believo

    Joined:
    May 21, 2004
    Location:
    Los Angeles, CA
    #8
    I couldn't tell because the images won't load but what I'm trying to do is have my page completely centered. http://www.nike.com is an example of what I'm talking about. I'm using a table for my site.
     
  9. xelterran macrumors 6502

    Joined:
    Dec 28, 2001
    #9
    Its not hard to do using CSS:

    css:
    Code:
    body { text-align: center; } /* because ie doesnt recognise margin auto */
    
    #container 
    { 
      margin: 0 auto; 
      width: 700px; 
      text-align: left; /* cancel the ie fix out */
    }
    html:
    Code:
    <body>
    <div id="container">
      content...
    </div>
     
  10. RacerX macrumors 65832

    Joined:
    Aug 2, 2004
    #10
    It does work with the images :) ... this is why I use OmniWeb, I can change the source of a page and redisplay it to see how it looks and OmniWeb will still load the original images from the server.

    That feature alone was worth the price I paid for OmniWeb. It has been a very valuable tool for me when working on sites.

    In this case, do the following...
    1. download OmniWeb 5,
    2. in OmniWeb go to the original poster's page,
    3. when at the page bring up the source view (View menu to View in Source Editor),
    4. copy/paste the source code I attached in my post over the original source for the page and hit the redisplay button.
    The tool is great for looking at the source code of other sites, letting you see what something does by experimenting with it and still having access to all the original files from the site.

    It is a great feature. I've been using it since 1998 back when I was still using OmniWeb in NEXTSTEP/OPENSTEP. :D It is one of those can't live without things for me now. I just hate not having that type of control over pages in my browser anymore.
     

Share This Page