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 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Locating a drop down menu

    I have a drop down menu that works great. But it won't move it to it's proper location. It is supposed to be centered in the menu bar and moved to the right so the left edge of the menu text lines up with the right edge of the sidebar.

    I have messed around with everything I could think of and it won't move. (It is based on the suckerfish menu: http://htmldog.com/articles/suckerfi...downs/example/)

    Here is the link to my site:
    http://www.aaalandb.com/testfolder/aaasite3.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheets/csstest3.css">
    
    <style type="text/css">
      
    #nav {
    	float: left;
    	width: 40em; /* width of text area in menu */
    	list-style: none;
    	line-height: 1;
    	font-weight: bold;
    }
    
    #nav ul {
    	float: left;
    	list-style: none;
    	line-height: 1;
    	background: #91161b; /* drop down background */
    	font-weight: bold;
    	padding: 0;
    	border: solid #4e0a0d; /* drop down border */
    	border-width: 1px 0;
    	margin: 0 0 1em 0;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    	w¥idth: 6em;
    	color: #FFFFFF; /* text color */
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    #nav a.daddy {
    	background: url(rightarrow2.gif) center right no-repeat;
    }
    
    #nav li {
    	float: left;
    	padding: 0;
    	width: 10em;
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	w¥idth: 13.9em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    }
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em
    }
    
    #nav li ul a {
    	width: 13em;
    	w¥idth: 9em;
    }
    
    #nav li ul ul {
    	margin: -1.75em 0 0 14em;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    }
    
    #nav li:hover, #nav li.sfhover {
    	background: #6b1316;
    }
    
    #content {
    	clear: left;
    }
    
    #content a {
    	color: #4e0a0d; /* color of drop down high light */
    }
    
    #content a:hover {
    	text-decoration: none;
    }
    
    
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover¥¥b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    
    </head>
    
    <body>
    
    <div><!-- site wrapper -->
      
      <!-- header -->
      <div id="header">
        
        <img src="images/header_art_short.jpg" height="115px" width="808px" alt="">
        
      </div> <!-- /header -->
      
      <!-- top nav -->
      <div id="menubar">
        <ul id="nav">
        	<li><a href="#">AAA Quality</a>
        	</li>
        
        	<li><a href="#">Services</a>
        		<ul>
        			<li><a href="#">Laminating</a></li>
        			<li><a href="#">Bindery</a></li>
        			<li><a href="#">Collating</a></li>
        		</ul>
        	</li>
        
        	<li><a href="#">The Shop</a>
        	</li>
        
        	<li><a href="#">Online Store</a>
        	</li>
        
        </ul>
    
      </div> <!-- /menubar -->
      <!-- /top nav -->
      
      <!-- lower container -->
      
    <div class="bodyWrap">
      
        <div id="sideNav">
          
        </div> <!-- /sideNav -->
        
        <!-- sidebar is in bodyWrap -->
        
        <div id="textarea">
          
          <h1>one piece or a million</h1><br><br>
          
          Quality<br><br>
          
          AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
          AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
          AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
          <br><br>
          We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
          <br><br>
          We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
          <br><br>
    
        </div> <!-- textarea-->
    <!-- footer -->
      <div id="footer">
      
        <img alt="" src="images/menu_footer_art.jpg" width="808" height="30">
        
      </div> <!-- /footer -->    
    
    </div><!-- /lower container -->
      
    </div><!-- /site wrapper -->
    </body>
    
    </html>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Have you not posted your nav menu to live yet? I am not seeing it up there on the link you gave. It might be easier for us.

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I made a mistake in transferring. It's fixed now.

    You were just too quick.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Is this what you're after?

    Code:
    #nav {
    	float: left;
    	width: 40em; /* width of text area in menu */
    	list-style: none;
    	line-height: 1;
    	font-weight: bold;
    	margin-top:2px;
    	margin-left:95px;
    }
    Adjust pixel values on margins to suit.
    matt | design | blog

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    That's it. That's one thing I didn't play with.

    Thanks much.

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I just tested it in Safari.

    The drop down falls behind the textarea.

  • #7
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    The link you initially posted seems to work fine in Mac Safari. But the menu isn't adjusted so it's probably not the latest version. A link to that would be helpful. In any case, the quick fix is to revert to absolute positioning with a z-index:

    Code:
    #nav {
    	position:absolute;
    	float: left;
    	width: 40em; /* width of text area in menu */
    	list-style: none;
    	line-height: 1;
    	font-weight: bold;
    	top:111px;
    	left:95px;
    	z-index:10;
    }
    As before, adjust top and left pixel values to suit.
    matt | design | blog

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    msuffern,
    Sorry about that. I'm kinda crazy in the head from messing with this all day and completely forgot to post the correction. The work has to be done on a devlopment site and moved to the live site.

    But I found a solution. I moved the top menu into the same container as the textarea. It's still above the text in the code, just in the same div. Don't know why, but it works.

    I just hope it works in other browsers.
    Last edited by j1adobe; 07-18-2008 at 06:58 PM.


  •  

    Posting Permissions

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