Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Dropdown Menu hiding behind photo banner

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #25889
    blueturtle
    Participant

    Hi All,

    I posted this issue yesterday, and am back again today since no one responded. I also figured out that the dropdown menu in the afflicted site is actually hiding behind the photo banner (that changes out using .cycle plugin). I’m not sure if this is a jquery issue or a CSS. I’m thinking it’s a CSS issue but for the life of me, I can’t figure it out. If you have time to take a look at it and let me know what I’m doing wrong, I would greatly appreciate it. Thank you!

    Here is the site:

    http://thompsoninsurancefl.com/

    HTML

    Code:




    The Thompson Agency | Insurance for Auto, Home or Business in Ft. Myers, Florida



    Girl driver
    Couple in front of house
    Business man driver
    Grandparents with grand daughter in Marina
    click here button

    photo of auto

    Property & Casualty Insurance

    We can write a policy to cover all of your personal assets.

    Learn more.

    photo of building

    Commercial Insurance

    Protect your business assets: auto, property and liability.

    Learn more.

    photo of couple

    Property & Casualty Insurance

    Plan ahead and learn to invest wisely.

    Learn more.

     



    CSS

    Code:
    @charset “UTF-8”;
    html, body, #main_wrapper {height: 100%;}
    body {
    font: 100% Arial, Helvetica, sans-serif;
    margin: 0 auto; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-image: url(images/bcknd_gradient.gif);
    background-repeat: repeat-x;
    height: 100%;
    }
    .oneColFixCtr #main_wrapper {
    width: 975px;
    background-image: url(images/bcknd_shadow.png);
    text-align: left;
    height:auto;
    min-height: 100%;
    margin: 0 auto ;
    }
    .oneColFixCtr .wrapper {
    width: 840px;
    margin-left: 65px;
    }#header {
    height: 75px;
    padding-top: 37px;
    }
    #logo {
    width: 230px;
    float: left;
    display: inline;
    }.tagline {
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 14px;
    font-style: italic;
    color: #666666;
    }
    #tagline {
    float: left;
    display: inline;
    padding-top: 38px;
    width: 290px;
    padding-left: 50px;
    }
    #address {
    float: left;
    display: inline;
    padding-left: 30px;
    width: 240px;
    }
    .headeraddress {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #666666;
    text-align: right;
    line-height: 19px;
    padding-left: 25px;
    }
    #photo_banner {
    height: 240px;
    border-top: solid 2px #0098db;
    border-bottom: solid 2px #0098db;
    background-image: url(images/needaquote.gif);
    background-repeat: no-repeat;
    background-position: top right;
    clear: both;
    }
    #slideshow {
    width: 569px;
    height: 240px;
    padding: 0;
    margin: 0 auto;
    float: left;
    }
    #slideshow img {
    left: 0px;
    top: 0px;
    width: 569px;
    height: 240px;
    }
    #quote {
    float: left;
    display: inline;
    padding-left: 130px;
    padding-top: 155px;
    width: 130px;
    }
    #categories {
    margin-top: 35px;
    height: 290px;
    overflow: hidden;
    clear: both;
    }
    .column1 {
    width: 270px;
    float: left;
    margin-right: 0px;
    padding-left: 10px;
    }
    .column2 {
    width: 268px;
    float: left;
    border-left: solid 1px #999999;
    border-right: solid 1px #999999;
    padding-left: 10px;
    }
    .column3 {
    width: 270px;
    float: left;
    padding-left: 10px;
    }
    .bodytext {
    font-size: 13px;
    color: #666666;
    line-height: 18px;
    }
    h1 {
    font-size: 20px;
    color: #0066A4;
    font-weight: normal;
    text-transform: uppercase;
    }
    h2 {
    font-size: 18px;
    color: #0066A4;
    font-weight: normal;
    }
    h3 {
    font-size: 14px;
    color: #666666;
    margin-bottom: -12px;
    }
    .footer {
    height: 50px;
    background-color: #0066A4;
    width: 840px;
    text-align: center;
    margin-left: 65px;
    padding-top: 10px;
    margin-top: 15px;
    } .footer a {
    text-decoration: none;
    color: #FFFFFF;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 12px;
    } .footer a:hover {
    color:#a2d3e7;
    } .footer p {
    font-size: 11px;
    color: #a2d3e7;
    margin-top: 8px;
    }
    .push {
    height: 70px;
    }
    .bottomnav_divider {color: #FFFFFF}
    #topnav {
    margin-top: 20px;
    width: 840px;
    margin-left: -15px;
    clear: both;
    }
    ul {
    list-style: none;
    }
    /*
    LEVEL ONE
    */
    ul.dropdown {
    position: relative;
    }
    ul.dropdown li {
    font-weight: normal;
    float: left;
    zoom: 1;
    background: #ffffff;
    }
    ul.dropdown a:hover {
    color: #5ccaf0;
    }
    ul.dropdown a:active {
    color: #5ccaf0;
    }
    ul.dropdown li a {
    display: block;
    padding: 5px 13.5px;
    border-right: 1px solid #0098db;
    color: #0098db;
    font-size: 14px;
    text-decoration: none;
    }
    ul.dropdown li:last-child a { border-right: none; } /* Doesn’t work in IE */
    ul.dropdown li.hover,
    ul.dropdown li:hover {
    background: #0098db;
    color: #FFFFFF;
    position: relative;
    }
    ul.dropdown li.hover a {
    color: #FFFFFF;
    }

    /*
    LEVEL TWO
    */
    ul.dropdown ul {
    width: 160px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0px;
    }
    ul.dropdown ul li {
    font-weight: normal;
    background: #5ccaf0;
    color: #000;
    border-bottom: 1px solid #ffffff;
    float: none;
    }
    /*
    LEVEL THREE
    */
    ul.dropdown ul ul {
    left: 100%;
    top: 0;
    clear: both;
    }
    ul.dropdown li:hover > ul { visibility: visible; }

    /* IE 6 & 7 Needs Inline Block */
    ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
    .learnmore {
    font-size: 13px;
    color: #FFFFFF;
    line-height: 18px;
    text-decoration: none;
    background-color: #FF9900;
    padding: 2px 5px 2px 5px;
    }
    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    width: 0px;
    height: 0;
    }

    #62832
    blueturtle
    Participant

    Thanks for the reply. I never could solve the issue with the menu falling behind the banner using the jquery plugin slideshow. I ended up using a flash plugin instead. Would rather use the jquery slideshow instead. If you think it is z-index, I might go back and try it.

    Basically, both the drop down menu and slideshow using jquery used relative and absolute positioning. Think this may have been the conflict? I’m not sure what z-index is or zoom? are they related? the Dropdown UL had a zoom set to 1. I don’t know if the slideshow banner was using zoom. If you can shed some light on this I will retry with your recommendation.

    Thank you!

    #62833
    blueturtle
    Participant

    Sorry – as far as browsers were concerned, it was happening in both FF and Safari. Not sure about IE.

    #62840
    blueturtle
    Participant

    That’s right! I have heard about it but was confused. So, if the dropdown menu (which is before the banner in html) is appearing behind the banner, how would that work? The dropdown menu has z-index 1, what would the z-index be for the photo banner to have the menu appear in front of it?

    Thank you in advance for helping me out…I’m a newbee, so would love to grasp this concept.

    #62916
    blueturtle
    Participant
    "cybershot" wrote:
    you could use a much higher number like 100. That’s what I usually see. that should get the menu to appear over everything else.

    Thanks! I will try it!
    Kim

    #62919
    blueturtle
    Participant

    ikthius and cybershot,

    Thank you so much!!! That was the issue—I set z-index to a higher number on the dropdown menu so that it would fall in front of the photo banner. Here is the updated link if anyone wants to view it in action:

    http://thompsoninsurancefl.com/

    I’m so glad I figured it out—I like using the jquery slideshow much better than a flash plugin. I had read a tutorial on z-index a while back, but I haven’t had any run-ins with it until now.

    Your help is much appreciated!

    #62986
    von
    Member

    I think something else that’s important to remember that when z-index is not defined, "what’s on top" is based on the order of objects within the code. Like the deck of cards illustration, you put out your first card and if you lay your second card to overlap at all, it will be on top of the first.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.