Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Help with Layers and Positioning

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

Independent Software Vendors: 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…
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).

719 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