Div reveal issue

If ever I needed Experts Exchange it's today :)  If you look at my code (See Attachment) a div appears when you mouseover the link named "Site Navigation". The problem is that it's appearing too far down. I want it to appear directly underneath the link itself. I can't figure out why there is so much space between the revealing div and the link that toggles it.

I obtained it from here: http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

Please help me get the div to reveal right under the "Site Naviation" link. I also want it to be on top of whatever is underneath it.

Thank you
test4.zip
greddinAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

greddinAuthor Commented:
Actually if I could specify the top left x & y coordinates for the div to appear that would be ok in this case as well since it's tied to the same spot.
0
Tom BeckCommented:
I've looked at this question twice now and I keep leaving it alone because of the zip file. Zip files can harbor viruses. Maybe other EE members are thinking the same thing.
0
greddinAuthor Commented:
I understand. Let me see if I can put everything into the code window.  

Thanks for letting me know why it hasn't been answered.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

greddinAuthor Commented:
Ok, here's my code consolidated into a single file for troubleshooting:

Why is the div appearing so far down beneath the "Site Navigation" link element?  I want it to appear right underneath the Site Navigation link.

More over, can how can I specify the top and left coordinates to position it exactly where I need? Maybe this would help eliminate the spacing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	background-color: #fff;
	color: #000;
}

a:link {
	color: #0066cc;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #0066cc;
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: none;
}

#kx-wrapper {
	/* border:1px solid red; */
}

#kx-header {
	background-color:#eeeeee;
	height:80px;
}

#kx-logo img {
	float:left;
	border:none;
}

#kx-navbar {
	background-color:#c0c0c0;
	height:30px;
	position:relative;
}

#kx-navbar-sitenav {
	float:left;
	margin:8px 20px 0 20px;
}

#kx-find-a-kj {
	float:right;
	padding:4px 20px 0 0;
}

#kx-content {
	float:left;
	display:block;
	width:100%;
}
#kx-content-container {
	padding:20px 20px 20px 20px;
}

</style>

<script type="text/javascript" src="dropdowncontent.js">
/***********************************************
* Drop Down/ Overlapping Content- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

</head>
<body>
<div id="kx-wrapper">
	<div id="kx-header">
		<div id="kx-logo"></div>
	</div>
	<div id="kx-navbar">
		<div id="kx-navbar-sitenav">
			<div><a href="javascript:void(0)" id="searchlink" rel="subcontent">Site Navigation</a></div>
			<DIV id="subcontent" style="position:absolute; visibility: hidden; top: 10px; left:10px; border: 4px solid orange; background-color: white; width: 300px; padding: 8px;">

				<p><b>Search Dynamic Drive:</b></p>
				<form method="get" action="http://search.freefind.com/find.html" id="topform">
				<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
				<input value="Search" class="topformbutton" type="submit" />
				</form>

				<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent')">Hide this DIV manually</a> | <a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>

			</DIV>
		</div>
	</div>
	<div id="kx-content">
		<div id="kx-content-container">
			<p>Content goes here</p>
		</div>
	</div>
</div>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")
dropdowncontent.init("sitenavlink", "left-top", 500, "mouseover")
</script>

</body>
</html>

Open in new window

0
Tom BeckCommented:
Your content div is tight up against the Site Navigation link container. No space between.

However, your div with id="kx-content-container" has 20px of padding all the way around so that pushes the content text away from the navigation link by 20px above and 20px on the left.

Inside that you have a <p> tag with font-size set to 9pt. <p> tags are for formatting paragraphs so they always add a margin top and bottom equivalent to the font size to add space between paragraphs. That in effect pushes the content text away from the navigation link for the space of 9pt text.
0
greddinAuthor Commented:
Forgot to add the supporting Javascript library.
dropdowncontent.js
0
greddinAuthor Commented:
I would like the div to float on top of all the other content.  Specifically the content container.
0
Tom BeckCommented:
Change your function call to:

dropdowncontent.init("searchlink", "left-top", 500, "mouseover");

And add margin: 40px 0 0 223px; to the inline css for div id="subcontent".
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
greddinAuthor Commented:
Thanks, that appears to be working.  How is the margin on that subcontent controlling the positioning of the div?  What's that margin relative to?  

Just trying to understand why this is fixing it. :)

Thanks
0
Tom BeckCommented:
The margin I suggested is not so much controlling the position of the div as it is counteracting the positioning imposed by the plugin. I noticed that the plugin was dynamically moving the div 223 pixels to the left, off the window edge so I added the same amount of margin to bring it back. I have no clue why the plugin is doing that. Maybe it assumes your trigger is somewhere in the middle of the page. I'd have to dig into the code and research.

I'm not a big fan of plugins. Never heard of this one but I will definitely not use it myself. Needs more options for positioning. Seems incomplete. Anyway, this kind of effect can be done more simply with css except for the side in part. It's no different than a css dropdown menu. The slide part can be easily accomplished with jquery.

Thanks for the points.
0
greddinAuthor Commented:
Thanks for the additional information. It was helpful.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.