Advanced Search

Results 1 to 6 of 6

Thread: Chrome CSS Drop Down Menu is hidden under transparent elements; Text must be opaque!

  1. #1
    Join Date
    Jul 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Chrome CSS Drop Down Menu is hidden under transparent elements; Text must be opaque!

    1) Script Title:
    Chrome CSS Drop Down Menu
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...rome/index.htm
    3) Describe problem:
    My problem may be summed up in the two attachments I have posted. Basically, I have the menu within a div that is slightly transparent (so therefore the menu is also slightly trans) and below the menu I have a larger image which is also just slightly transparent. The problem I see is that if the image below is transparent, the menu falls behind the layer, but if it is opaque, it lies right on top as it should. Initially I thought this could be simply solved with settings a lower z-index on the image below. That didn't solve anything however. I also tried setting a higher z-index for various menu styles, and tried each one, to no avail. Any ideas people ?

    I should note, I only slightly modified the source html/css to modify a few heights/margins, and haven't touched the javascript. Other than that, everything is more or less how the demo ( http://www.dynamicdrive.com/dynamici...hrome/demo.htm ) is set up.

    Thanks

    Update:

    In addition to my previous problem (which has been solved) I also need to make the text opaque while the background is transparent in the dropdown menus, any suggestions ?!
    Last edited by msmith0957; 07-26-2010 at 08:04 PM. Reason: Added another issue

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    if your menu and image elements are nested in separate parent nodes the parent node z-Index will take precidence and the menu and image z-Index will not be effective.

    you will need to post a link to your page to confirm that this is the problem
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Here's a page I threw together real quick to show the problem. (Yes, I know its ugly lol)

    http://s194254623.onlinehome.us/temp/

    I understand what you're saying about parent nodes taking precedence, but everything you see is contained within the "container" class. I just thought that I could have a style take precedence by using !important.

    Anyway, what do you recommend I try ?

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TEST TEST TEST</title>
    <link href="http://s194254623.onlinehome.us/temp/styles/styles.css" rel="stylesheet" type="text/css" />
    <link href="http://s194254623.onlinehome.us/temp/styles/nav-menu.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://s194254623.onlinehome.us/temp/scripts/nav-menu.js">
    /***********************************************
    * Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library
    ***********************************************/
    </script>
    </head>
    <body>
    <div id="container">
      <div id="nav">
      <a href="#" target="_self"><img style="float:left;" src="http://s194254623.onlinehome.us/temp/images/logo-home.gif" width="270" height="110" /></a>
    
    
      <div class="chromestyle" id="chromemenu">
    <ul>
    
    <li><a href="#">Home</a></li>
    <li><a href="#" rel="dropmenu1">Basses</a></li>
    <li><a href="#" rel="dropmenu2">Strings</a></li>
    <li><a href="#" rel="dropmenu3">Accessories</a></li>
    <li><a href="#" rel="dropmenu4">Artists</a></li>
    <li><a href="#" rel="dropmenu5">Photo Gallery</a></li>
    <li><a href="#" rel="dropmenu6">About</a></li>
    
    </ul>
    </div>
    
    
    
    
    
    
     </div>
      <div id="content"></div>
      <div id="msg">Vivamus faucibus augue eget eros elementum posuere. Ut quis magna leo. Morbi arcu velit</div>
      <div id="info-blocks">
        <div class="block">
    
          <div class="blockCapt floatL">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante eu tortor blandit vehicula. Aenean sit amet pharetra dolor. Maecenas eu lacus eu sem fringilla lacinia sed ac lectus. Etiam nec diam erat. Nullam porttitor luctus libero et volutpat. </p>
          </div>
          <div class="imgOut floatR">
            <div class="imgMid">
              <div class="imgIn"><img width="116" height="100" /></div>
            </div>
          </div>
    
        </div>
        <div class="block">
          <div class="blockCapt floatL">
            <p>Aliquam sit amet augue nisl. Vestibulum eu sem non tellus rutrum ullamcorper. Vivamus faucibus augue eget eros elementum posuere. Ut quis magna leo. Morbi arcu velit, ultrices id </p>
          </div>
          <div class="imgOut floatR">
            <div class="imgMid">
              <div class="imgIn"><img width="116" height="100" /></div>
    
            </div>
          </div>
        </div>
        <div class="block">
          <div class="blockCapt floatL">
            <p>Praesent a dolor eleifend turpis venenatis pellentesque at eu enim. Donec fermentum sapien vitae nunc fermentum sed elementum dolor fringilla. Donec gravida blandit faucibus. Aliquam erat volutpat. Praesent in libero nibh, ut ullamcorper metus. </p>
          </div>
          <div class="imgOut floatR">
    
            <div class="imgMid">
              <div class="imgIn"><img width="116" height="100" /></div>
            </div>
          </div>
        </div>
      </div>
      <div id="copyright"></div>
    </div>
    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    <a href="http://www.codingforums.com">Coding Forums</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    </div>
    <!--2nd drop down menu -->
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    <a href="http://news.bbc.co.uk">BBC News</a>
    </div>
    
    <!--3rd drop down menu -->
    <div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
    <a href="http://www.google.com/">Google</a>
    <a href="http://www.yahoo.com">Yahoo</a>
    
    <a href="http://www.msn.com">MSN</a>
    </div>
    <script type="text/javascript">
    
    cssdropdown.startchrome("chromemenu")
    
    </script>
    
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    msmith0957 (07-23-2010)

  6. #5
    Join Date
    Jul 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Ok, wow! that was quick, but yes, that works just fine, much appreciated

  7. #6
    Join Date
    Jul 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    With fixing that problem, another arose. Is there a way I can make the text NOT transparent but the dropdown menu transparent? This has to be possible and I'm sure its a simple style change, but what change exactly.

    Thanks.

Bookmarks

Posting Permissions

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