Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK Beginning CSS: Cascading Style Sheets for Web Design, 3rd ed
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 3rd ed
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 3rd Edition by Ian Pouncey, Richard York; ISBN: 978-0-470-89152-0
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 3rd ed section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
Old March 7th, 2012, 11:17 AM
Authorized User
Points: 108, Level: 2
Points: 108, Level: 2 Points: 108, Level: 2 Points: 108, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2007
Location: North Salem, NY, USA.
Posts: 23
Thanks: 3
Thanked 0 Times in 0 Posts
Default 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;
}
  #2 (permalink)  
Old March 7th, 2012, 03:13 PM
Authorized User
Points: 108, Level: 2
Points: 108, Level: 2 Points: 108, Level: 2 Points: 108, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2007
Location: North Salem, NY, USA.
Posts: 23
Thanks: 3
Thanked 0 Times in 0 Posts
Default

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;
}
  #3 (permalink)  
Old July 7th, 2012, 09:01 PM
Registered User
Points: 9, Level: 1
Points: 9, Level: 1 Points: 9, Level: 1 Points: 9, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2012
Posts: 3
Thanks: 0
Thanked 1 Time in 1 Post
Default

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.
  #4 (permalink)  
Old July 8th, 2012, 01:37 PM
Authorized User
Points: 108, Level: 2
Points: 108, Level: 2 Points: 108, Level: 2 Points: 108, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2007
Location: North Salem, NY, USA.
Posts: 23
Thanks: 3
Thanked 0 Times in 0 Posts
Default 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.
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
bad absolute positioning or random crazyness? mishagos BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 3 April 4th, 2009 11:54 AM
relative positioning in Firefox mackknife BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 3 July 12th, 2007 02:02 AM
Relative and Absolute Path question Johnger Pro Visual Basic 2005 1 September 8th, 2006 10:45 AM
relative/absolute positioning whacked bigal CSS Cascading Style Sheets 3 August 4th, 2005 12:06 PM
Absolutely positioned element across the screen Snib CSS Cascading Style Sheets 2 December 15th, 2004 01:21 PM



All times are GMT -4. The time now is 06:35 AM.


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