Centering a layer w/image behind table

G

Guest

I am trying to create a horizontal menu with an image behind it. I have the
text neatly positioned using a layout table and CSS to bold the entries on
hover, but I cannot figure out how to get a layer with an image behind the
table. The table is centered on the page and I want the image to also be
centered. The positioning has me baffled. Is there some way to nest layers
to solve this? I have observed other sites with centered pages use nested
layers, but I don't understand how they do it.

Suggestions?
 
M

Murray

and CSS to bold the entries on hover

That creates an unpleasant 'jiggling' effect, in my opinion, as the text
gets incrementally wider/narrower on mouseover/mouseout.
Is there some way to nest layers to solve this?
Click to expand...

Definitely not.
I have observed other sites with centered pages use nested
layers, but I don't understand how they do it.
Click to expand...

If both these statements are true, then most likely they didn't 'do it' in a
way that is reliable/valid.

If you want the layer to move to the center along with the table, then a)
make the layer have the same width as the table, and b) follow these
directions -

Change this -

</head>

to this -

<style type="text/css">
<!--
body { text-align:center; }
#wrapper { text-align:left; width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser window without */
/* horizontal scrollbars. */
-->
</style>
</head>

change this -

<body ...>

to this -

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

and this -

</body>

to this -

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

and see if that helps.
 
G

Guest

Thanks, Murray. I have the menu entries each in a cell, spaced to avoid the
jiggling effect. However, this precludes using a single cell bg image. I
will try the changes you suggest for the head and body. So that I can
understand, just what does
<style type="text/css">
do?

Why is #wrapper aligned left?

Is
body { text-align:center; }
supposed to be
#body { text-align:center; }
 
R

Ronx

body {text-align:center;} is correct. This aligns all text and elements
in the page <body> tag to the centre - required for some browsers to
correctly centre the #wrapper div. This instruction will be inherited
by all elements in the body, so ...
#wrapper is aligned left to countermand the text-align:center in the
body, and align all text and elements in the #wrapper div to the left.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 
M

Murray

Ronx has you covered on the answer to your question, but the fact is that we
are just guessing as to what your layout is, and what might solve your
problem. How about a link to your page?
 
G

Guest

Take a look at http://www.nukazoo.com.

I also want to add some drop down submenus but still keep the page centered.
How do I position the submenus using CSS (or whatever works)? Examples of
submenus I have seen are on left aligned pages.
 

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

Layer Centerting on Page 11
Image change in layer 1
Centering Content / Automatically Sizing to Browser 7
Centering Layers on a page? 2
Grouping objects within a centered table 3
New Site w/Embedded WMV - 4 Questions 1
Using image front and back function? 2
bring a Layer to the Front ?? 2

Top