...

View Full Version : Issues with positioning pullup menu



jaffee
01-04-2010, 03:27 PM
Hi there, I'm looking for help with fixing a pullup menu that is positioned at the bottom of the browser window, and is designed to "pullup" (instead of drop down) when the user rolls over it. No matter what I do, the pullup part of the menu will not come to rest flush against the hover state of the top navigation tab, in this case named 'portfolio'. Instead, it will not go any lower than the top of the navbar, resulting in a big vertical gap between the nav tab and the menu. I've tried wrapping the menu in a div with a specified height, playing with the z-index, and absolutely positioning the menu, and nothing has worked!

The link to check out the page is http://www.jaffydesigns.com/2010_redesign/, and the relevant code is below. Any assistance is much appreciated!

HTML

<div id="nav_wrapper">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Portfolio</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#web" class="underline">Web</a></li>
<li><a href="#email" class="underline">Email</a></li>
<li><a href="#logo" class="underline">Logo</a></li>
<li><a href="#print" class="underline">Print</a></li>
<li><a href="#other">Etc.</a></li>
</ul>
</dd>
</dl>
</div>
</div>

CSS

#nav_wrapper {
margin: 28px 0 0 595px;
width: auto;
height: auto;
}
* {
padding:0;
margin:0
}
.dropdown {
float: left;
}
.dropdown dt {
width: 123px;
height: 35px;
margin: 0;
font-weight: bold;
cursor: pointer;
color: #ff9900;
text-align: center;
}
.dropdown dt:hover {
background: url(../images/nav_drop_bottom.gif) no-repeat; color: #ffffcc;
}
.dropdown dd {
position: relative;
right: 66px;
overflow: hidden;
width: 175px;
padding-left: 14px;
background: #333333;
opacity: 0;
z-index: 10000;
}
.dropdown ul {
list-style: none;
}
.dropdown li {
display: inline
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
float: left;
width: 78px;
height: 31px;
margin: 1px 1px 0 0;
font-size: .7em;
color: #ffffff;
text-decoration: none;
text-align: center;
background: #666666;
border: 1px solid #999999;
}
.dropdown a:hover {
background: #ff9900;
color: #ffffff;
border: 1px solid #ffcc66;
text-decoration: underline;
}

abduraooft
01-04-2010, 03:39 PM
Start with fixing the errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jaffydesigns.com%2F2010_redesign%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

jaffee
01-04-2010, 03:51 PM
Thanks Abduraooft, I'm slapping my forehead for missing that step right now. I'll fix the errors and report back.

jaffee
01-06-2010, 05:19 AM
Apologies for the delay in replying!

Ok, I've gone through to make sure my HTML and CSS are validating, however the positioning issue persists.

HTML - http://validator.w3.org/check?uri=http://www.jaffydesigns.com/2010_redesign/&charset=(detect+automatically)&doctype=Inline&group=0

Stylesheets
- http://jigsaw.w3.org/css-validator/validator?uri=http://www.jaffydesigns.com/2010_redesign/styles/styles.css&profile=css21&usermedium=all&warning=1&lang=en
- http://jigsaw.w3.org/css-validator/validator?uri=http://www.jaffydesigns.com/2010_redesign/styles/dropdown.css&profile=css21&usermedium=all&warning=1&lang=en

abduraooft
01-06-2010, 08:20 AM
Not sure, just have a try by the following
.dropdown dd {/*dropdown.css (line 5)*/
background:#333333 none repeat scroll 0;
overflow:hidden;
padding-left:14px;
position:relative;
right:66px;
top:-71px;
width:175px;
z-index:10000;
}

jaffee
01-06-2010, 08:33 AM
Updated - the menu appears to have moved down, but it's now obscuring the tab when I roll over it.

http://www.jaffydesigns.com/2010_redesign/

abduraooft
01-06-2010, 09:36 AM
Try increasing that negative top value by some.
Not sure how your script at http://www.jaffydesigns.com/2010_redesign/js/dropdown.js calculates the top value.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum