Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Getting a page "centered"

irishgrizzly

irishgrizzly

macrumors 65816
Original poster
May 15, 2006
1,461
2
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.
 
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.
Click to expand...

I have the same question. Anyone know?
 
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"
 
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"
Click to expand...

that works for left to right centering but what about up and down centering?

thanks
 
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;
 
See if this is what you were looking for...
 

Attachments

  • testsite.zip
    1.7 KB · Views: 89
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>
 
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.
Click to expand...
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back