Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Help with Layers and Positioning

Posted on 2006-11-18
3
Medium Priority
?
233 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 750 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

972 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