Resolved - CSS Top Menu - Alignment

docmombo2012 · 10-24-2012, 06:20 PM

Hello,

I am using the following free script.

http://www.javascriptkit.com/script/...stopmenu.shtml

I am trying to align this menu to be in the center of a TD cell. It won't move there. Running out of ideas.

Any thoughts?

Thanks for your help.

sunfighter · 10-24-2012, 09:30 PM

Code:

<!doctype html>
<html>
<head>
<script type="text/javascript">
var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.

function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
  var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
    	var spanref=document.createElement("span")
			spanref.className="arrowdiv"
			spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
			ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    	ultags[t].parentNode.onmouseover=function(){
					this.style.zIndex=100
    	this.getElementsByTagName("ul")[0].style.visibility="visible"
					this.getElementsByTagName("ul")[0].style.zIndex=0
    	}
    	ultags[t].parentNode.onmouseout=function(){
					this.style.zIndex=0
					this.getElementsByTagName("ul")[0].style.visibility="hidden"
					this.getElementsByTagName("ul")[0].style.zIndex=100
    	}
    }
  }
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
</script>
</head>

<body>
<table border="1" style="width:800px;height:100%">
	<tr>
		<td style="width:150px;">Something Nice here</td>
		<td style="width:500px;"></td>
		<td style="width:150px;">Other thing here</td>
	</tr>
	<tr>
		<td></td>
		<td ><div class="horizontalcssmenu" style="margin:auto;width:200px;">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="http://www.javascriptkit.com/">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JS</a></li>
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
<li><a href="#">References</a>
    <ul>
    <li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
    <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
    </ul>
</li>
<li><a href="http://www.javascriptkit.com/howto/">web Tutorials</a></li>
<li><a href="#">Resources</a>
    <ul>
    <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
    </ul>
</li>
</ul>
<br style="clear: left;">
</div></td>
		<td></td>
	</tr>
	<tr>
		<td colspan="2"><p id="iepara">Rest of content here</p></td>

		<td></td>
	</tr>
	<tr>
	<td>call me</td>
	<td>Footer stuff</td>
	<td>copyrighted by Mandy</td>
	</tr>
</table>
</body>
</html>

docmombo2012 · 10-25-2012, 06:01 PM

Thanks to your help - this works perfectly. Thank you.