...

View Full Version : Locating a drop down menu



j1adobe
07-18-2008, 06:45 PM
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/suckerfish/dropdowns/example/)

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



<!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>

jcdevelopment
07-18-2008, 06:57 PM
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.

j1adobe
07-18-2008, 07:05 PM
I made a mistake in transferring. It's fixed now.

You were just too quick. :)

BoldUlysses
07-18-2008, 07:09 PM
Is this what you're after?


#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.

j1adobe
07-18-2008, 07:17 PM
That's it. That's one thing I didn't play with.

Thanks much.

j1adobe
07-18-2008, 07:40 PM
I just tested it in Safari.

The drop down falls behind the textarea.

BoldUlysses
07-18-2008, 07:46 PM
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:


#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.

j1adobe
07-18-2008, 07:49 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum