Centering Cascading Menu Made From Layers

B

BioSmith

I have created a cascading menu using layers in FP03. See it at
http://home.comcast.net/~biosmith/menu.htm .

I want it to position itself in the center of the browser window, so even if
the viewer resizes their browser window, the menu will be in the center. And
regardless of browser window size, it will always be centered.

How can I get my menu to be centered, without screwing up the submenu layers
and their positioning?

Can I get the main menu layer to center, and then the drop-down layers will
reposition themselves relative to the main layer?

Can I put the entire menu in a standard table and have the table cell center
its contents - the menu?

Help!

P.S. I'm relatively new to web-building and using FP.

Thanks!
 
M

Murray

Change this -

</head>

to this -

<style type="text/css">
<!--
body { text-align:center; }
#wrapper { text-align:left; width:760px; 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.
 
B

BioSmith

This seems to have worked. Double check my coding... I wasn't sure I put
everything in the right spots. http://home.comcast.net/~biosmith/menu2.htm .


Got a few questions though...
1. Can you explain how those small coding changes caused the desired effect?
2. Now that I've got my menu doing what I want, can I continue to build the
rest of the page around it? Will the code changes you suggested cause any
other effects on the rest of the page as I build it?

Thanks!
 
R

Ronx

I haven't checked your coding.

As long as all your content is restricted to a width of 760px, and placed
inside the wrapper <div>, the entire page will be centred in all modern
browsers (Netscape 4 and later, IE5 and later).

The relative positioning for the wrapper gives all absolute positioned
elements inside it a zero point at the top left of the wrapper div. The
wrapper itself is horizontally centred by the "margin: 0 auto;" in the
CSS, which sets equal left and right margins, with zero top and bottom
margins.
 
M

Murray

the entire page will be centred in all modern browsers (Netscape 4 and
later, IE5 and later).
Click to expand...

I certainly wouldn't call Netscape 4 OR IE5+ a modern browser. However, for
sure, this method will not work in NN4x. But it's good for NN6+, FF, and
IE5+, i.e., all modern browsers, and IE5+.

The rest of your explanation is right on, although I would add that to be
centered like this, the element being centered must have a width assigned.
 

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

Layout table/layers question 8
Cascading Menus with Layers 2
Centering layer 6
centering layers 1
Centering Layers on a page? 2
Centering Content / Automatically Sizing to Browser 7
Centering a layer w/image behind table 7
Cetnering Layers 6

Top