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

    Issues with positioning pullup menu

    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
    Code:
    <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
    Code:
    #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;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Start with fixing the errors in your markup, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Abduraooft, I'm slapping my forehead for missing that step right now. I'll fix the errors and report back.

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML and CSS validating now

    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=ht...Inline&group=0

    Stylesheets
    - http://jigsaw.w3.org/css-validator/v...ning=1&lang=en
    - http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Not sure, just have a try by the following
    Code:
    .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;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try increasing that negative top value by some.
    Not sure how your script at http://www.jaffydesigns.com/2010_red...js/dropdown.js calculates the top value.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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