Solved

Help with Layers and Positioning

Posted on 2006-11-18
3
219 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 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