p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/)
-   BOOK Beginning CSS: Cascading Style Sheets for Web Design, 3rd ed (http://p2p.wrox.com/book-beginning-css-cascading-style-sheets-web-design-3rd-ed-644/)
-   -   Absolute Positioning Relative to Relatively Positioned Containing Element (http://p2p.wrox.com/book-beginning-css-cascading-style-sheets-web-design-3rd-ed/86908-absolute-positioning-relative-relatively-positioned-containing-element.html)

JackHerr March 7th, 2012 12:17 PM

Absolute Positioning Relative to Relatively Positioned Containing Element
 
I am having problems doing a drop-down list similar to that in the book's Example 11-1 ("Positioning Sub Navigation", pp. 224-226). Here is my code (basics). I am using <!DOCTYPE html> (namely HTML5).

The absolute element positions itself, with this code, relative to the top right of the overall containing element ("Header Navigation Menu"), not the individual <li> elements. Note also that, for some reason, I have to add an extra 10px to the top displacement in order for it to line up with the bottom of the containing element (30px) for IE9. This compensation puts it 10 px below the bottom of the container for all other browsers. Finally, this code yields no sub menu in IE6 (Expression Web 4 SuperPreview), which I think is because I have not yet done an IE6 fix with hasLayout or z-index, which I will have to research but can eventually figure out.

Thanks for any help you can give me.

HTML:

Code:

<div id="HeaderNavigationSection">
    <ul id="HeaderNavigationMenu">
    <li class="BlockMenuItem"><a href="#">Welcome, Guest (Log In or Register)</a></li>
    <li class="BlockMenuItem"><a href="#">Shopping Cart</a></li>
    <li class="BlockMenuItem"><a href="#">My Account</a></li>
    <li class="BlockMenuItem"><a href="#">Order Status</a></li>
    <li class="BlockMenuItem">
      <a href="#">Administrative Access</a>
      <ul id="AdministrativeAccessMenu">
      <li><a href="#">Stores</a></li>
      <li><a href="#">Affiliates</a></li>
      <li><a href="#">Individuals</a></li>
      <li><a href="#">Company</a></li>
      </ul>
    </li>
    <li class="BlockMenuItem"><a href="#">Test Menu Item</a></li>
    </ul>
  </div>

Code:

#HeaderNavigationSection {
background-color: #D4D4D4;
height: 30px;
}
#HeaderNavigationMenu {
float: right;
}
#HeaderNavigationMenuli {
position: relative;
display: inline;
}
#HeaderNavigationMenulia {
margin-top: 8px;
padding: 0px 10px 0px 10px;
border-left-width: 1px;
border-style: dotted;
border-color: #808080;
text-decoration: none;
float: left;
}
#HeaderNavigationMenuli:first-childa {
border: none;
}
#HeaderNavigationMenulia:hover {
color: #003366
}
#HeaderNavigationMenuliul {
position: absolute;
float: left;
top: 40px;
right: 0px;
background-color: #FFFFFF;
padding-bottom: 10px;
border: 1px black solid;
}
#HeaderNavigationMenuliula {
display: block;
border: none;
}


JackHerr March 7th, 2012 04:13 PM

I fixed it with a clear and by applying float to both the li and a. Also, with the elements for the menu and submenu now touching, the hover allows one to move into the ul displayed upon hover for submenu navigation, without any javascript:

Code:

#HeaderNavigationSection {
 background-color: #D4D4D4;
 height: 30px;
}
#HeaderNavigationMenu {
 float: right;
}
#HeaderNavigationMenu li {
 position: relative;
 display: inline;
 float: left;
}
#HeaderNavigationMenu li a {
 margin: 8px 0px 10px 0px;
 padding: 0px 10px 0px 10px;
 border-left-width: 1px;
 border-style: dotted;
 border-color: #808080;
 text-decoration: none;
 float: left;
}
#HeaderNavigationMenu li:first-child a {
 border: none;
}
#HeaderNavigationMenu li a:hover {
 color: #003366
}
#HeaderNavigationMenu li ul {
 clear: both;
 position: absolute;
 float: left;
 top: 30px;
 right: 0px;
 background-color: #FFFFFF;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 10px 0px;
 border: 1px black solid;
 display: none;
}
#HeaderNavigationMenu li ul a {
 float: left;
 border: none;
}
#HeaderNavigationMenu li:hover ul {
 display: block;
}


IanPouncey July 7th, 2012 10:01 PM

Hi Jack,

Don't forget to think about keyboard support for you menu. Because IE6 doesn't support :focus on elements other than links you would have to use JavaScript.

For interactive elements there are advantages to using JavaScript in combination with CSS, for example controlling keyboard focus.

JackHerr July 8th, 2012 02:37 PM

Thanks, And Issue Addressed
 
I used the jQuery .hover, .focusin, and .focusout functions to address hover and keyboard access for all IE versions. Thanks for the advice.


All times are GMT -4. The time now is 09:20 AM.

Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
2013 John Wiley & Sons, Inc.