Cetnering Layers

E

Eric in New York

I am wondering if it is possible to center a layer on a web page in a way
akin to centering a table. I would like my layer to center in the browser
window regardless of the screen resolution used by the site visitor. Also,
I am wondering what the arguments are, pro and con, for using layers versus
using tables in a web site design.

Thanks.

Eric
 
M

Murray

regardless of the screen resolution used by the site visitor

Resolution only determines the maximum practical browser viewport width.
Beyond that, it has no relationship to 'centering' in the browser.
Also, I am wondering what the arguments are, pro and con, for using layers
versus using tables in a web site design.
Click to expand...

It's not a versus thing. Use both together if it works for your needs. But
you need to know these three very important things -

1. Never put a layer into a table - putting tables into layers is OK, but
not percent width tables, and not if the layer is not flush with the left
margin (i.e., left="0").
2. Do not put text content into layers (even when it's in tables) because
if the text is resized in the browser by the visitor, the layer will expand
vertically and overlap other page content.
3. Understand that layers are absolutely positioned and tables are able to
center aligned - this means that the tables can move within the browser
viewport, while the layers (without some other treatment) are fixed
absolutely to the screen, and will not move.

Now - having said that, you can cause 'layers' to center easily by placing
their frame of reference for positioning inside an element that is a
centering element. This is easy to do as follows -

Change this -

</head>

to this -

<style type="text/css">
<!--
body { text-align:center; color:#CCC; }
#wrapper { text-align:left; width:720px; margin:0 auto;position:relative; }
-->
</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

</div><!-- /wrapper -->
</body>

and see if that helps.
 
E

Eric in New York

Wow, quite involved. I'm moving towards tables based on what you've
written. What I was trying to say in my pervious post was that I want my
content to center on the screen regardless of resolution. I can 'draw' a
layer (or table) in the center of my design window so that it is centered
but if I display at a another resolution it moves to the left or right of
the window. I'm trying to avoid this and it sounds like tables is the way
to go. Which then begs the questions.... what are layers for, especially if
one shouldn't put text into them?

One more thing if you will indulge me... that CSS code would go where? In
the style sheet for the site?

Apologies for being so dense, I've had FP for all of three days.

Eric
 
M

Murray

content to center on the screen regardless of resolution.

And what I was trying to say is that resolution has nothign to do with
anything OTHER than how wide/tall you can make your browser window. I can
tell you that my resolution is 1600x1280, but you have no idea how wide my
browser window is. That's the point.
what are layers for, especially if one shouldn't put text into them?
Click to expand...

Many things - like drop-down, pop-up, fly-out menus, or animating graphics,
or sliding things around on the screen, or lots of other stuff. But a
layout methodology that is based on the ease of positioning of layers on the
screen is doomed.
I'm trying to avoid this and it sounds like tables is the way to go.
Click to expand...

If you are not skilled with HTML, it may well be.
One more thing if you will indulge me... that CSS code would go where? In
the style sheet for the site?
Click to expand...

I told you exactly where to make the changes. Did you follow that?
 
E

Eric in New York

I followed what needed to be changed but was not sure where those tags need
to be changed. Are you saying I need to change them 'inside a centering
element'? A centering element is, for example, a table?

BTW, I appreciate your advice about using layers for layout purposes. I
recently bought a 'Frontpage Savvy' book which seems to recommend doing just
that. I think your points are well taken however and will stick with
tables. The author of this volume argues that tables are harder for web
crawlers to parse although perhaps there are other ways to get your site
noticed by indexing programs.

Thanks again.

EG
 
M

Murray

The author of this volume argues that tables are harder for web crawlers
to parse
Click to expand...

That's as misinformed as the recommendation to use layers for layout is.
perhaps there are other ways to get your site noticed by indexing
programs.
Click to expand...

There certainly are.
I followed what needed to be changed but was not sure where those tags need
to be changed. Are you saying I need to change them 'inside a centering
element'? A centering element is, for example, a table?
Click to expand...

OK - I have a page:

<html>
<head>
<title>whatever</title>
</head>
<body>
</body>
<html>

and I want to make it center align - even if I happen to put layers on it.
So, I change the page's markup to this -

<html>
<head>
<title>whatever</title>
<style type="text/css">
<!--
body { text-align:center; } /* for IE5x */
#wrapper { text-align:left; width:760px; position:relative; margin:0
auto; }
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Everything else on your page goes here inside this div -->
</div>
</body>
<html>

And build the rest of the page inside the wrapper div. Does that help you
understand?
 
E

Eric in New York

Yes, thanks.

Eric


Murray said:
That's as misinformed as the recommendation to use layers for layout is.


There certainly are.


OK - I have a page:

<html>
<head>
<title>whatever</title>
</head>
<body>
</body>
<html>

and I want to make it center align - even if I happen to put layers on it.
So, I change the page's markup to this -

<html>
<head>
<title>whatever</title>
<style type="text/css">
<!--
body { text-align:center; } /* for IE5x */
#wrapper { text-align:left; width:760px; position:relative; margin:0
auto; }
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Everything else on your page goes here inside this div -->
</div>
</body>
<html>

And build the rest of the page inside the wrapper div. Does that help you
understand?
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

layers and FP 2003 3
Centering Content / Automatically Sizing to Browser 7
layered backgrounds 0
screen tip layers and hyperlinks 1
Layers and FP 2003 0
layers 5
Layers - how to 'stick' 13
Images and Auto shapes not staying put 1

Top