Solved

Help with Layers and Positioning

Posted on 2006-11-18
3
211 Views
Last Modified: 2010-04-09
I know there are alot of questions and answers out there already in regards to positioning of layers, but I am still unable to resolve my issue.

I have setup a page layout using a Table, to place images, menus, body content etc.... which all works well.

I am now wanting to design a page that has a submenu or 3 items that when the mouse moves over them, a layer (1,2 or 3) appears at position X - top left of cell - see image below.

|----------------------------------------------------|
|                                                                 |
|------------------------|---------------------------|
| x                            | Sub Menu1                 |
|                              | Sub Menu2                 |
|                              | Sub Menu3                 |
|                              |                                  |
|                              |                                  |
|                              |                                  |
|                              |                                  |
|------------------------|---------------------------|

I have tried absolute, relative, static etc... with the STATIC being the closest to what I want, the problem is that the second layer appears below the 1st, the 3rd layer below the 2nd (ie height of each prior layer below) etc... instead of at the same top, left co-ordinate.

I am using Dreamweaver, and also some javascript to hide and show each layer on the mouse over event.

Furthermore, the layers may contain Text, Graphics, a Flash file etc....

Thanks in advance
PJE
0
Comment
Question by:pjelias
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
jessegivy earned 250 total points
ID: 17973694
I don't suppose your test page is located on some public server where we might be able to have a look at it?  Anyway, from the description above I'd like to suggest the use of the z-index CSS attribute, z-index sets a precedence for which layers appear on top of which other layers, so if you want submenu2 to appear above submenu1 then you'd simply set the z-index value of submenu2 to any integer value greater than the z-index value for submenu1 like this:

style="z-index:1;"   for submenu1
style="z-index:2;"   for submenu2

....It's also posible to set the z-index using javascript on the fly when you trigger an event expanding one of these menues, and you'll want to use position:relative; for your submenus.  Please note that select elements in IE are considered to be "always on top" so if you've got any select boxes in the effected area then you'll have to do some reformatting, or other trickery to make it behave appropriatly.

Cheers,

Jesse
0
 

Author Comment

by:pjelias
ID: 17986886
I think I have managed to get it to work.

I had to set the top position of Layer 2 to a negative position relative to the first layer ???
0
 

Author Comment

by:pjelias
ID: 17986941
However,

the 3 Browsers - IE 6, Firefox 2 and Opera 9.01 all have slightly different results - Layer 1 - Top = 80, Layer 2 Top = -175

Firefox - Spot On
Opera - Layer 2 appears about 20 px lower than Layer 1 (the bottom of the layers appear aligned - as the amount of text is more within layer 1)
IE - Layer 2 appears lower than Layer 1, but both layers are higher up the page. ie Firefox and Opera, layer1 appears about 20px below submenu text, yet within IE, layer1 appears about 1px below submenu Text ???
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question