Getting a page "centered"

irishgrizzly

macrumors 65816
Original poster
May 15, 2006
1,462
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.
 

believo

macrumors regular
May 21, 2004
161
0
Los Angeles, CA
irishgrizzly said:
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.
I have the same question. Anyone know?
 

dunc85

macrumors regular
Jul 23, 2006
112
0
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"
 

believo

macrumors regular
May 21, 2004
161
0
Los Angeles, CA
dunc85 said:
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"
that works for left to right centering but what about up and down centering?

thanks
 

dunc85

macrumors regular
Jul 23, 2006
112
0
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;
 

xelterran

macrumors 6502
Dec 28, 2001
291
0
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>
 

RacerX

macrumors 65832
Aug 2, 2004
1,504
2
believo said:
I couldn't tell because the images won't load but what I'm trying to do is have my page completely centered.
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.