CSS menu layer in wrong position

[DVDGirl]

Hi -
I have a CSS/JavaScript menu. I want to place it within a cell of a table.

Here is the CSS:
<style type=&quot;text/css&quot;>
a
{
text-decoration: none;
color: #FFFFFF;
}

.title
{position: relative;
width: 200x;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 14px;}

.submenu
{position: absolute;
width: 200px;
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
visibility: hidden;}
</style>


Here's the cell the menu is in:
<td>
<div class=&quot;title&quot; id=&quot;title1&quot;>
<a href=&quot;#&quot; onclick=&quot;javascript: toggle(1,30); return false&quot;><img name=&quot;pic1&quot; src=&quot;images/closed.gif&quot; border=&quot;0&quot;>Category 1</a>
</div>

<div class=&quot;submenu&quot; id=&quot;submenu1&quot;>
<a href=&quot;page01.html&quot; target=&quot;right&quot;>Item # 1</a><br>
<a href=&quot;page02.html&quot; target=&quot;right&quot;>Item # 2</a>
</div>

<div class=&quot;title&quot; id=&quot;title2&quot;>
<a href=&quot;#&quot; onclick=&quot;javascript: toggle(2,60); return false&quot;><img name=&quot;pic2&quot; src=&quot;images/closed.gif&quot; border=&quot;0&quot;>Category 2</a>
</div>

<div class=&quot;submenu&quot; id=&quot;submenu2&quot;>
<a href=&quot;page03.html&quot; target=&quot;right&quot;>Item # 3</a><br>
<a href=&quot;page04.html&quot; target=&quot;right&quot;>Item # 4</a><br>
<a href=&quot;page05.html&quot; target=&quot;right&quot;>Item # 5</a><br>
<a href=&quot;page06.html&quot; target=&quot;right&quot;>Item # 6</a>
</div>
</td>


Submenu1 appears directly under the Category 1 heading when it is clicked. However, Submenu2 appears at the top of the page.

Can anyone please let me know what I'm doing wrong? Any help is greatly appreciated. Thank you!

-DVD Girl

 

[cropc]

It is kind of hard to tell from only part of the code but I do have a few suggestions. First why are you using both class and id in the menu div tags? I would just use the class or make two different id's for each element. Second I'd try using relative position instead of absolute for the submenu. Hope this helps,

cropc

 

[DVDGirl]

Hi cropc -
Thanks for replying. When I took out the id's, the javascript didn't work anymore. I grabbed the js off of a site, so I suppose this may be the problem, and not just the css layers as I thought.

Here's the script:
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!-- Original: Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site:

http://hem.passagen.se/dred

-->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!

http://javascript.internet.com

-->

<!-- Begin

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // Number of menus
var usePictures = 1; // use pictures? 1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls = ('title' + i);
subs = ('submenu' +i);
}
function picopen {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = &quot;images/opened.gif&quot;;
}
else if (document.all) {
document.all(pic).src = &quot;images/opened.gif&quot;;
}
}
function picclose {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = &quot;images/closed.gif&quot;;
}
else if (document.all) {
document.all(pic).src = &quot;images/closed.gif&quot;;
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose; // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose;
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen;
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top += move;
document.layers[subs].top += move;
}
if (document.all) {
document.all(ttls).style.pixelTop += move;
document.all(subs).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
// End -->
</script>

As always, any help would be much appreciated! Thank you!

-DVD Girl

 

[deecee]

keep id in and for your styles use #id

so that way if your id is blah your class would be #blah

that way both problems solved [Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;

 

[DVDGirl]

Hi deecee -
Thanks for your response. However, I'm still not getting it! (Probably because I don't know how to implement your solution.) Could you please use a snippet of my code and write an example. So sorry for the trouble! Thanks again.

-DVD Girl

 

[DVDGirl]

Also, if i change submenu style to position:relative (instead of position:absolute), it creates invisible layers where the submenus are supposed to be. Therefore, there are blank spaces between the titles.

Thanks!

-DVD Girl

 

[EdwardMartinIII]

DVD Girl,

You might notice that your listing becomes italicized. You might also notice that your index to i ([ignore]) is curiously missing. This is not a coincidence.

In other words, <>

[i]

[/ignore]

If you put your code between code tags, then it all gets in there the way you intend. You can also uncheck the &quot;Process TGML&quot; box at the bottom of the response window, or use the &quot;ignore&quot; tag.

Just a helpful reminder.

Cheers,
Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[DVDGirl]

Thanks, Edward. I noticed that it was italicized, but didn't put two and two together to realize that the code was being translated. In any case, here's the js again:

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!-- Original: Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site:

http://hem.passagen.se/dred

-->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!

http://javascript.internet.com

-->

<!-- Begin

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // Number of menus
var usePictures = 1; // use pictures? 1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls = ('title' + i);
subs = ('submenu' +i);
}
function picopen {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = &quot;images/opened.gif&quot;;
}
else if (document.all) {
document.all(pic).src = &quot;images/opened.gif&quot;;
}
}
function picclose {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = &quot;images/closed.gif&quot;;
}
else if (document.all) {
document.all(pic).src = &quot;images/closed.gif&quot;;
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose; // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose;
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen;
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top += move;
document.layers[subs].top += move;
}
if (document.all) {
document.all(ttls).style.pixelTop += move;
document.all(subs).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
// End -->
</script>

 

[DVDGirl]

*bump*
Sorry, still haven't figured it out yet. Anybody have any suggestions for me? Thank you in advance!

-DVD Girl