Centering web pages

How do you get a web page to sit in the centre of the screen both horizontally and vertically (like this one http://www.fudgestudios.com/ for example) at different screen resolutions?

I've saved the web page to my computer and opened the thing up in Dreamweaver but i'm finding it difficult to assertain what's going on. I assume it's something to do with autostretch tables but my own experiments have met with varying degree's of faliure.

Some people have sugested using CSS but I struggled to find a working method at all.

If anyone can give me step by step instructions that'd be a great help.

i think this is the relevant code......

<tr>
<td height="1" width="100%">&nbsp;</td>
</tr>
<tr>
<td width="100%" height="100%" valign="middle">

How do you get a web page to sit in the centre of the screen both
horizontally and vertically (like this one http://www.fudgestudios.com/ for

example) at different screen resolutions?

I've saved the web page to my computer and opened the thing up in
Dreamweaver but i'm finding it difficult to assertain what's going on. I

assume it's something to do with autostretch tables but my own experiments
have met with varying degree's of faliure.

Some people have sugested using CSS but I struggled to find a working
method at all.

If anyone can give me step by step instructions that'd be a great help.

"Basil the Fox" webforumsuser (AT) macromedia (DOT) com wrote:

How do you get a web page to sit in the centre of the screen both horizontally and vertically (like this one http://www.fudgestudios.com/ for example) at different screen resolutions?

I've saved the web page to my computer and opened the thing up in Dreamweaver but i'm finding it difficult to assertain what's going on. I assume it's something to do with autostretch tables but my own experiments have met with varying degree's of faliure.

Some people have sugested using CSS but I struggled to find a working method at all.

If anyone can give me step by step instructions that'd be a great help.

They have a nested table construction. The outer (parent) table has 100%
width and 100% height attributes. The latter is deprecated html, and
might work in most browsers, but might not in others. Then they have
aligned the child table, which is the one that holds the content you
see, vertically "middle".

AFAIK, there are only two ways to achieve this without glitches. The
first is to use a frameset called "Letterbox frameset", applied by an
extension available at www.projectseven.com. However, if you don't know
the problems that will come with framesets, DO NOT go there!!!!!!!!

The other way is to use another extension at www.projectseven.com called
"Layout Designer 2". With this, you can place layers aligned both
vertically and horizontally at the page.

If you can tell which day it is, you can also use these extension
without problems.


--
Dan Vendel - *GOF*
http://www.vendel.info
Contact me directly by clicking here:
http://contact.vendel.info
Formmail tutorial:
http://www.vendel.info/tut/formmail.html
Nested table demonstration:
http://www.vendel.info/tabletut/

Basil the Fox wrote:
:: How do you get a web page to sit in the centre of the screen both
:: horizontally and vertically (like this one
:: http://www.fudgestudios.com/ for example) at different screen
:: resolutions?
::
:: I've saved the web page to my computer and opened the thing up in
:: Dreamweaver but i'm finding it difficult to assertain what's going
:: on.

That's why it would be a bad idea to try to follow that type of design. It's
chock-a-block with nested tables. Make one mistake, and the whole thing
falls apart. It's difficult to code, and would be a nightmare for a disabled
person using assistive technology to browse the web.

There are several ways to centre your page vertically and horizontally. The
oldest trick in the book is to create a table 100% wide and 100% high with
just one cell, and set the alignment to middle and center. Then put the rest
of the page in another table inside that cell. It's not a good idea, though,
because sooner or later you're going to need to use CSS and
standards-compliant code. Take a look at the following demonstration to see
what happens to 100% high tables when a browser renders a page in
standards-compliant mode:

http://japan-interface.co.uk/testarea/tableheight.html

Another way to centre your page is to use JavaScript. Project Seven
(www.projectseven.com) has a free extension called Layout Designer 2 that
will do that, and much, much more for you. Project Seven has also got a lot
of good free tutorials that you might find very useful.

--
David Powers
*******************************************
No-nonsense reviews of computer books
http://japan-interface.co.uk/webdesign/books.html
Save 10% on TopStyle CSS Editor
*******************************************

1. Insert a table which is 100% W by 100% deep
2. Click inside the table and set Horizontal to centre and Vertical to middle
3. Insert another table which is less than 100% by 100%
4. Insert all content into second table

That's it


Matt

Amazing. Wrong.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.DreamweaverFAQ.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Womble" <mlloyd (AT) ssha (DOT) co.uk> wrote

1. Insert a table which is 100% W by 100% deep
2. Click inside the table and set Horizontal to centre and Vertical to
middle
3. Insert another table which is less than 100% by 100%
4. Insert all content into second table

That's it


Matt

It's like we aren't even speaking the same language.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.DreamweaverFAQ.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Basil the Fox" <webforumsuser (AT) macromedia (DOT) com> wrote

Brilliant!

I knew it would be a relatively simple solution in the end.

Thank you Matt.

On Thu, 17 Jul 2003 21:18:26 +1000, "Tal"
<sleepbethdisorders (AT) SoftHome (DOT) net> wrote:

i think this is the relevant code......

tr
td height="1" width="100%">&nbsp;</td
/tr
tr
td width="100%" height="100%" valign="middle"


height is not a valid attribute for a td tag and therefore should not

be used.


Paul Taylor

Basil the Fox wrote:

How do you get a web page to sit in the centre of the screen both
horizontally and vertically (like this one
http://www.fudgestudios.com/ for example) at different screen
resolutions?

I _strongly_ recommend not to do such things!

These little centered pages may look good on high resolution screens
with a big browser window, on small displays they're a disaster.
They're wasting valuable space on screen with absolutely nothing.

The guys at Fudge Studios may be good at webdesign, but they obviously
don't care about usability. Kids, don't try this at home!

Micha