Trying to overlap layers.

Hugh Jass posted this at 12:28 — 28th January 2001.

Joined: Oct 2000

Hi all,

I'm in need of some help with layers ( errr ... I think! ).

I'm trying to add a navigation bar to the top of my index page.

The nav bar uses layers but the menu script on the index page itself, also uses layers.

The nav bar is at http://www.painting-effects.co.uk/nav-bar.htm
Which calls http://www.painting-effects.co.uk/menu.js
and http://www.painting-effects.co.uk/menucontext.js

My attempt to combine the 2 scripts is at http://www.painting-effects.co.uk/combined.htm

The problem is that the nav bar should (but doesn't) cover the text of the menu.

To see what I mean, go to http://www.painting-effects.co.uk/combined.htm ,
mouseover 1 of the links on the left, then mouseover the middle of the nav bar above.

I managed to combine the nav bar script with an old version of the menu script.
This old version doesn't work too well, but it shows how the nav bar should cover the text beneath.
It's at http://www.painting-effects.co.uk/old-menu.htm

I know absolutely nothing about layers; can you help?

Thanks
Hugh

Hugh Jass posted this at 07:25 — 31st January 2001.

They have: 12 posts

Joined: Oct 2000

For anyone who's interested, the answer was the order in which the items were loaded.

Here's a reply I got from another forum:

Try this.....

In the source code find this line: . Now go all the way down to the bottom of the source code and just before the closing body and html tags are 2 tags. Using cut and paste, cut all the code including the lines I mention (but not the tags) and paste them just after these lines of code:

A:hover {
COLOR: red
}

that should load the elements in the correct z-index order without needing to do anything else. As the page is now you are letting the browser handle the z-indexing (layering). First elements loaded recieve lower z-index. Since you're loading the toolbar first it's being placed below the stuff in the center of the page. And since the content that displays in the middle has it's position controlled by a style attribute, you can load it in any order in the source code and it will still display in the correct X,Y position, just not the correct Z position.

Give it a try and see if it works.

Regards,
Kevin