Home › Forums › JavaScript › Dropdown Menu hiding behind photo banner
- This topic is empty.
-
AuthorPosts
-
August 26, 2009 at 11:36 am #25889blueturtleParticipant
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
Delivering peace of mind, one client at a time.
4531 Deleon Street, Suite 207
Ft. Myers, Florida 33907
ph 239.278.5822 | fax 239.278.1074
Property & Casualty Insurance
We can write a policy to cover all of your personal assets.
Home
|Property & Casualty
|Commercial Insurance
|Life & Retirement Insurance
|Health Insurance
|About Us
|Location
|Contact Us©2009 The Thompson Agency, Inc. – All rights reserved
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;
}August 27, 2009 at 1:43 pm #62832blueturtleParticipantThanks 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!
August 27, 2009 at 1:44 pm #62833blueturtleParticipantSorry – as far as browsers were concerned, it was happening in both FF and Safari. Not sure about IE.
August 27, 2009 at 2:39 pm #62840blueturtleParticipantThat’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.
August 27, 2009 at 8:25 pm #62916blueturtleParticipant"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!
KimAugust 27, 2009 at 9:08 pm #62919blueturtleParticipantikthius 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!
August 28, 2009 at 9:00 pm #62986vonMemberI 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.