Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: ASP.NET 3.5 Website Programming Problem Design Solution
This is the forum to discuss the Wrox book ASP.NET 3.5 Website Programming Problem Design Solution by Chris Love; ISBN: 978-0-470-18758-6
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: ASP.NET 3.5 Website Programming Problem Design Solution 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 June 12th, 2012, 08:11 PM
Authorized User
Points: 139, Level: 2
Points: 139, Level: 2 Points: 139, Level: 2 Points: 139, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Spokane, WA, USA.
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Default Z-index in dropdown menu

The instruction behind this dropdown menu exercise is from HTML5 by Matthew David. I had to modify it from a vertical to horizontal menu and fix up the code somewhat. The IE9 browser displays it as hoped but older IE versions and FireFox do not. I can’t seem to find a way around what the latter browsers do so have to conclude that they don’t handle the Z-Index attribute as well as the former browser. What people have to say about FireFox is that it should work with Z-Index properly so I’m probably not implementing it the right way. The demo is at www.biblebookletstore.com/dropdown.htm. Will appreciate anything that would make FireFox cooperate. The Web page and CSS are below.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dropdown Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Refresh" content="3600" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/fourcolA.css" rel="stylesheet" type="text/css" />
<link href="css/fourcolorA.css" rel="stylesheet" type="text/css" />
<link href="css/downmenu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#page   {
                max-width: 1600px;
                background: url(img/lftbg_demo.gif) repeat-y 19% 0;}
.hdrbkgd              {background: #FFCB2D url(img/nav_bg.gif) bottom left repeat-x;}
.hdrtext               {font-family:broadway;}
#midlft div,#midrgt div,#rgt div {
                padding: 6px 12px;
}
#menu  {position:relative;  z-index:30;}
#hdr   { position:relative;  z-index: 20;}
#wrap  { position:relative;  z-index: 10;}
</style>
</head>

<body>
<div id="page">

<div id="hdr" class="hdrbkgd group">
                <div id="hdrlogo">                          
                                <img src="img/applelogo.jpg" />
                </div>

                <div style="padding-top:15px">               
                                <div class="hdrtitle hdrtext">Dropdown Menu</div>
                                <div class="hdrsub">Using CSS</div>
                </div>

                 <div id="menu" class="group">
                 <ul id="nav">
                <li><a id="left_nosub" href="http://www.biblebooklets.com/index.htm">Booklets</a></li>
                <li><a class="center_hassub" href="http://www.wmpress.org">WM Press</a>
                                <ul>
                                <li><a href="http://www.biblebooklets.com/wmpress.htm">Tour</a></li>
                                <li><a href="http://www.biblebooklets.com/newsletter.htm">Newsletters</a></li>
                                <li><a href="http://www.wmpress.org/Footprints.pdf">Footprints</a></li>
                                </ul>
                </li>
<li><a class="center_hassub" href="http://www.biblebooklets.com/readbooklet.htm">Articles</a>
                                <ul>
                                <li><a href="http://www.biblebooklets.com/bookbasics.htm">Salvation</a></li>
                                <li><a href="http://www.growingchristians.org/dfgc/index.html">Growing</a></li>
                                <li><a href="http://www.gatebreakers.com/articles.php">Religions</a></li>
                                </ul>
                </li>
                <li><a id="right_nosub" href="http://www.biblebookletstore.com/default.aspx">Store</a></li>
                </ul>
    </div>
</div><!--end #hdr-->

<div id="wrap" class="group">

                <div id="lft" class="pick">
                                <div style="padding-left:15px">
                                                <a href="http://www.biblebooklets.com/faith.htm">Faith</a>
                                                <a href="http://www.biblebooklets.com/salvation.htm">Salvation</a>
                                                <a href="http://www.biblebooklets.com/character.htm">Deity</a>
                                                <a href="http://www.biblebooklets.com/deliverance.htm">Deliverance</a>
                                                <a href="http://www.biblebooklets.com/pentecost.htm">Pentecost</a>
                                                <a href="http://www.biblebooklets.com/evangelize.htm">Evangelize</a>
                                </div>
                </div><!--end #lft-->

                <div id="midlft">
                                <div>Vestibulum risus. Nullam adipiscing. Etiam fringilla neque id erat. Sed varius</div>                
                </div><!--end #midlft-->

                <div id="midrgt">
                                <div>Phasellus suscipit tristique lorem. Proin dolor massa, eleifend at, mollis</div>
                </div><!--end #midrgt-->

                <div id="rgt">
                                <div><strong>Cras ut justo eu arcu</strong> varius viverra in a enim. Nulla</div>
                </div><!--end #rgt-->
</div><!--end #wrap-->

<div id="ftr">
                <div>footer</div>
</div><!--end #ftr-->

</div><!--end #page-->
</body>
</html>

#menu {
                clear: left;
                width: 50%;
                margin: 0 auto;
                padding-top: 10px;
                font-size: 11px;
}
#menu ul ul        {
                position: absolute;
                top: 0;
                left: 100%;
                display:none;
}              
#menu ul li:hover ul
                {display:block;}

#nav      {
                list-style-type: none;
                padding: 0;
                margin: 0;
                overflow:hidden;
}
#nav li {                position: relative;
}
ul#nav > li            {
                float:left;
                width: auto;       
}
#nav li a                {
                font-size: 90%;
                text-decoration: none;
}
ul#nav > li > a {
                background-image: url(../img/center.png);
                display: block;
                color: #fff;
                font-weight: bold;
                width: 81px;
                height: 42px;
                text-align: center;
                border-bottom: 0;           
                line-height: 48px;
                padding-left: 1px;
                }
ul#nav > li:hover > ul {
                background-image: url(../img/dropdown.png);
                background-repeat: no-repeat;
                background-position: bottom left;
                position:absolute;
                top:42px;
                left:0;
           z-index:40;
                width:152px;
                margin: 0 0 0 3px;
                padding: 0;
                color: #fff;
}
#nav li:hover ul li a {
                background-image: none;
                display: block;
                width: 142px;
                height: 28px;
                margin: 0;
                padding: 0 0 0 11px;
                text-align: left;
                color: #000;
                line-height: 26px;
                font-weight: normal;
}
#nav li:hover a.center_hassub {
                background-image: url(../img/center_hassub.png);
                color: #000;
}
#nav #left_nosub, #nav #left_hassub    {
                background-image: url(../img/left.png);
                color: #fff;
                padding-left: 1px;
                margin-right: -1px;
}
#nav li:hover #left_nosub            {
                background-image: url(../img/left_nosub.png);
                color: #000;
}
#nav li:hover #left_hassub          {
                background-image: url(../img/left_hassub.png);
                color: #000;
}
#nav #right_nosub, #nav #right_hassub {
                background-image: url(../img/right.png);
                color: #fff;
}
#nav li:hover #right_nosub {
                background-image: url(../img/right_nosub.png);
                color: #000;
}
#nav li:hover #right_hassub {
                background-image: url(../img/right_hassub.png);
                color: #000;
}
#nav li:hover ul li a:hover             {
                background-image: url(../img/sub_hover.png);
                color: #000;
}

Last edited by bnorg; June 12th, 2012 at 08:50 PM.
 


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
Dropdown menu calone Dreamweaver (all versions) 2 November 27th, 2010 07:53 PM
Clearing the Dregs from a Dropdown menu rit01 ASP.NET 2.0 Basics 1 September 11th, 2006 07:26 AM
Urgent help in dropdown menu vigneshb4u BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 0 January 10th, 2006 06:29 PM
Javascript Dynamic dropdown Menu itHighway Javascript How-To 0 July 24th, 2005 11:53 PM
dropdown menu population with ONCHANGE YoungLuke JSP Basics 1 September 25th, 2003 03:46 PM



All times are GMT -4. The time now is 10:18 PM.


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