Java Problem

rapmonkey

I have the following code:

Is there anyway to attach the div "dropdown" to the bottom of the div "mainnav" instead of having to specify a pixel location? Pixel locations work, but when you are running a different resolution then it is designed for, it is no longer in the right place.

Thanks in advance!

hi-liter

this is really dealing w/ javascript and css.

try using relative positioning instead of absolute positioning.

check out:
http://hotwired.lycos.com/webmonkey/98/15/index4a_page3.html?tw=authoring

and
http://codepunk.hardwar.org.uk/acss04.htm

hard to test your code/checkout your code, w/ only a slight snippet of it...

bad76

Try
to not use px:

this way is font sensitive, (may be...🙂 )

see you

hi-liter

here's example CSS code that positions a paragraph to the preceeding sentence, and could help you achieve what you are trying to do, if I follow your need.

<style type="text/css">
<!--
#foo { z-index: 1; position: absolute; left: 25px; top: 25px; width: 500px; border: 1px dashed black; padding: 10px;}
#foo2 { z-index: 2; position: relative; top: 50px; left: 50px; width: 500px; border: 1px dashed black; padding: 10px; background-color: #cecece;}
div { font-family: arial, veranda; font-size: 10pt; }
//-->
</style>

<div id="foo">
The div below is positioned relative to this line of text, which is positioned absolute.


<div id="foo2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi.
</div>
</div>

i don't think using px or pt or % matters really.

hope this helps.

rapmonkey

I'll have to try that, but one more thing......

When I click the button, a menu drops down. I want the menu to be able to drop below and outside the table it is in without expanding the table. Is there a way to do that?

hi-liter

if it's on a layer itself, it won't expand the table. there's some good articles/tutorials on the web on this stuff, a lot.

here's some to start w/
http://www.brainjar.com/css/positioning/
http://hotwired.lycos.com/webmonkey/98/10/index1a_page3.html?tw=authoring

scripting a drop down menu...
http://hotwired.lycos.com/webmonkey/98/10/index3a_page2.html?tw=authoring

and try this:

<script>
// from : [url]http://hotwired.lycos.com/webmonkey/98/10/index3a_page4.html?tw=authoring[/url]
if (document.layers) {
  visible = 'show';
  hidden = 'hide';
} else if (document.all) {
  visible = 'visible';
  hidden = 'hidden';
}
function barTog(menu) {
  if (document.layers) {
    daMenu = document.layers[menu];
  } else if (document.all) {
    daMenu = document.all(menu).style;
  }
  if (daMenu.visibility == visible) {
    daMenu.visibility = hidden;
  } else {
    daMenu.visibility = visible;
  }
  lastMenu = daMenu;
}
</script>

<style type="text/css">
<!--
#foo { z-index: 1; position: absolute; left: 25px; top: 25px; width: 500px; border: 1px dashed black; padding: 10px;}
#foo2 { z-index: 2; position: relative; top: 50px; left: 50px; width: 500px; border: 1px dashed black; padding: 10px; background-color: #cecece;}
#foo3 { z-index: 2; position: relative; top: 50px; left: 50px; width: 500px; border: 1px dashed black; padding: 10px; background-color: #c0c0c0; visibility: hidden; }
div { font-family: arial, veranda; font-size: 10pt; }
//-->
</style>

<div id="foo">
The div below is positioned relative to this line of text, which is positioned absolute.

<div id="foo2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi.
<p><a href="#" onclick="javascript: barTog('foo3'); return false;">Show/Hide layer foo3</a>
</div>

<div id="foo3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi.
</div>

<p>stuff here doesn't move...

</div>

rapmonkey

How can I have two divs, and make one the parent and one the child? I think that's what I need to do, and then it should work.

hi-liter

check out those links, and search for CSS and Div's. there's a load of info out there on this. the webmonkey.com tutorial is qood. brainjar.com is good. play w/ the code above too.

perhaps too, you will be better served by a forum dealing with HTML and CSS, here's one that has proven worthwhile to me:
http://www.tek-tips.com/gthreadminder.cfm/lev2/4/lev3/32/pid/215 as this is a PHP Forum 😃

bol.