Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Resolved - CSS Top Menu - Alignment

    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.
    Last edited by docmombo2012; 10-25-2012 at 07:02 PM. Reason: REsolved

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,721
    Thanks
    25
    Thanked 662 Times in 661 Posts
    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>
    Last edited by sunfighter; 10-24-2012 at 10:41 PM.

  • Users who have thanked sunfighter for this post:

    docmombo2012 (10-25-2012)

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Resolved

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •