Formatting Layers

G

Guest

I use a layer to contain a menu that will appear when a visible button is
clicked. The layer is originally invisible and becomes visible when the
button is clicked. The menu inside the layer consists of 4 buttons that I
would like to appear centered on the page regardless of the screen resolution
of the browser. However, even if inserted in a 100% wide - 1 cell table
inside the layer, with the cell horizontal alignment set to "center", if
displayed in a browser window greater than that set in the page design, the
buttons inside the layer appear all to the left.

How do I go about centering objects inside the layer and positioning the
layer in a relative position vis-a-vis other objects on the page?

Thanks for hints (I'm not conversant in code programming!)
 
M

Murray

Thanks for hints (I'm not conversant in code programming!)

This is the problem. If you want to do things with absolute positioning,
you will have to become conversant with programming, and layers are absolute
positioned elements.

There are two ways to center the menu -

1. Use javascript that executes when the page loads, and again when it is
resized to find the center position of the browser viewport and then
dynamically move the containing layer to that location, or
2. Wrap the entire page content (i.e., everything between <body> and
</body> in a relatively positioned div tag with a fixed width and auto left
and right margins. This will cause that relatively positioned div to always
center, and since everything else on the page is within it, all the rest
will center too.

I can't help you with the former, and the latter will require you get your
hands dirty - you choose! 8)

By the way, here is a good demonstration of the latter -

http://www.roast-horse.com/tutorials/_tutorials/css_centered_content/index.html

And here is some code -

(inline styles used for clarity)

STYLESHEET -
body { text-align:center; } /* for IE5/IE5.5 */
#wrapper { text-align:left; }

BODY -
<div id="wrapper" style="width:760px; top:0; margin:0 auto;
position:relative;">
<div id="layer1" style="width:200px; top: 25px; left:140px;
position:absolute;">blah</div>
<div id="layer2" style="width:180px; top: 136px; left:23px;
position:absolute;">blah</div>
</div>

Try that - an outer relatively positioned division with a width and auto
left and right margins. All interior AP divisions will be centered, yet
retain the
same relative positioning.
 

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
Help With Layers 3
Layers in Frontpage 2003 1
Cetnering Layers 6
Mouseout with Layers 7
Layers + drop down menu 4
drop down submenu 2
trouble with layers 5

Top