Solved

Help with Layers and Positioning

Posted on 2006-11-18
3
223 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.

623 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