Results 1 to 5 of 5

Thread: Vertical align left

  1. #1
    Join Date
    Jan 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Vertical align left

    1) Script Title: AnyLink Vertical Menu

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...nkvertical.htm

    3) Describe problem: I am trying to position the navlist on the left of the page but it appears around 20px off the left. I have been messing around with this for days now and I have tried all the advice that I can find on the forum to no avail. I am sure that I will kick myself, but I am at a loss, any help please?

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    background-color: #E3FFB0;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #C7FF5E;
    }
    
    /* Sample CSS definition for the example list. Remove if desired */
    .navlist li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 165px;
    background-color: #FFFFB9;
    }
    
    </style>
    
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Vertical Menu-  Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
    menu1[4]='<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>'
    
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>'
    menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>'
    menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>'
    		
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
    edgeoffset=dropmenuobj.y
    }
    }
    return edgeoffset
    }
    
    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    }
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    </script>
    Code:
    <ul class="navlist">
    <li><a href="default.htm" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Webmaster Links</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    <li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="http://www.javascriptkit.com">JavaScript Kit</a> <span style="position: relative; left: 30px">></span></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    </ul>
    Thanks in advance for any assistance,

    John
    Last edited by waterdene; 01-14-2008 at 10:48 AM.

  2. #2
    Join Date
    Jan 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default More......

    I have obviously not made myself clear, or the answer is too simple to merit an answer. I will try to explain further what I am trying to do:
    I want to place the navigation menu in a table cell and align it to the left, using the code above places the menu around 20pc from the left edge.
    If I change the navlist Li code to
    Code:
    .navlist li {
    	position:absolute;
    	left:2px;
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    	width: 165px;
    	background-color: #FFFFB9;
    }
    the menu does move to the left +2px but the only list item to display is the final one (Coding Forums)

    thanks

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    .navlist li {
    you are putting the positioning on the list item not on the menu.
    try
    Code:
    ul.navlist {
         position: absolute;
         left: 2px;

  4. #4
    Join Date
    Jan 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much that has moved me on but, left me with another problem, but as I know that several others have been looking for this answer I will open a new thread

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by waterdene View Post
    Thank you so much that has moved me on but, left me with another problem, but as I know that several others have been looking for this answer I will open a new thread
    If the question relates to this one please do not open a new thread but just ask the question and someone will be around to answer it.
    Just because you ask it in an open thread does not mean its not searchable, and if it is related to the original post / question then its harder for us to link / reference a different thread, instead of just referencing the same thread with multiple posts

Bookmarks

Posting Permissions

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