Z Index & CSS For Positioning (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

RichardR -> Z Index & CSS For Positioning (9/23/2001 20:58:00)

I have placed some drop down menus immediately below a header cell by using relative positioning. I got the scrip for the menus as a download and they work great (sorry Vince from Spain!). BUT.......
In browser view the whole menu is visible on top of the header cell. I want them hidden until activated on mouseover, Then they drop down into the centre cell. I have tried placing a nested table in the header cell (containing logos etc), and set the Z Index of this to >+1 - whilst the menu buttons (whaich are in a cell in the central table have Z Index of <=0.
Q - am I doing something wrong, is there another way?
The menu script works fine - I am sure it is a problem with the positioning logic in some -HELP PLEASE!!!!

------------------



Gene -> RE: Z Index & CSS For Positioning (9/23/2001 15:29:00)

Which browser are you using to view your work?

------------------
Gene White
WebTeky Full Service Web Development
http://www.webteky.com/
http://www.webteky.net
http://www.gwhitedesign.com




LB -> RE: Z Index & CSS For Positioning (9/23/2001 23:07:00)

CSS doesn't work well in NN (and probably Opera) for positioning. It's best to use tables for layouts.

If there's any other problem with the menu, post a url and we'll take a look.

Linda




Vince from Spain -> RE: Z Index & CSS For Positioning (9/24/2001 20:06:00)

Hi Richard,
have you got a URL for what you have tried so far? If so I could take a look and see what is up.

All the best

Vince




LB -> RE: Z Index & CSS For Positioning (9/24/2001 23:09:00)

quote:
from RichardR
I think the problem is not with the Java Script, but with the positioning HTML in Front Page. I do not think it is a major problem, but any help will be greatly appreciated.

Have you tried the script by itself on a blank page? If you play with the script first, maybe it'll be easier for you to put into your table. I took a quick look at the html you sent me, but don't have any idea why it would be reacting like it is and don't currently have time to be debugging. If it were me, I'd start over from scratch with using the script and following the instructions. Start by getting the script to work, then you can often find a way to get it to work in the layout you are trying ...or sometimes find out it needs to be done differently.

If you publish the page to a server, I'm sure some fresh eyes will be able to help.

Please continue correspondence on this thread. It helps to know where help is needed and what has already been tried, plus there are other interested people learning from these forums. It helps all of us in case this question where to be asked again... if we can help you solve it, more people will know the answer next time around.

Linda




RichardR -> RE: Z Index & CSS For Positioning (9/25/2001 20:32:00)

Thanks for all the help so far. I did try it on a worksheet initially and it worked OK - only thing I had to change was position from absolute to relative. I am suspecting that the Java script I used somehow positions the menu at the top of the browser page upon opening. Gene - I am using IE6 to view the draft site so far (and agree re your NN comment which is why I turned to style positioning as a last resort!. There is a variable in the JavaScript (nextPos), which I think does this. The script was downloaded from www.javascriptworld.com (Chapter 13) and works fine except for this problem. That is when I hit upon the idea of using the z-index in HTML to position the menu element so that the top part was hidden behind the header cell. I tried to do this by creating a table nested inside the existing header cell, and set its z-index higher than that of the menu immediately below (which is contained in a cell at the top of the main body). I am not using frames pages. I will keep trying and go back to basics, but getting this problem fixed is a high priority at present

much thanks to all so far (esp Linda and Vince)

Richard R AUSTRALIA




Vince from Spain -> RE: Z Index & CSS For Positioning (9/26/2001 20:57:00)

Hi Richard,
I think you just need to set the visibility to false when you want to hide the menu. For example . . .
<DIV class=menu style="Z-INDEX: 0; visibility: hidden;" id=searchMenu
onmouseout="toggleMenu('searchMenu',-90)"
onmouseover="toggleMenu('searchMenu',-5)">

As your menu is now invisible however, your toggleMenu('searchMenu') is not going to work. So, you just need to use another object to set the trigger, and to not only move the menu, but to set the visibility to "visible"

Vince

------------------
Internet Business Solutions S.L.(Spain)




RichardR -> RE: Z Index & CSS For Positioning (9/26/2001 20:30:00)

Vince

Thanks. That is very logical, but to actually do what you are suggesting regarding an alternative trigger is a bit outside my knowledge envelope! This is steep learning curve stuff! I have checked out several JS references and sites and am not sure how to do what you are suggesting. I am also looking for alternative pop out style menus which will do what I am after. If there is an easy way through this, just let me know.

best regards

Richard R




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.171875