PDA

View Full Version : Chrome Dropdown & Slideshow



smligget
04-18-2011, 11:18 PM
I have the chrome drop down menu as well as a slideshow from dynamic drive int he code of my site but for some reason it makes the header which has the dropdown menu in disappear. Wondering if you could help me out. I have posted the page that it is doing it here: www.sarahliggett.com/sollenbergerpartners/example.htm

Thanks for the help!

Sarah

ddadmin
04-19-2011, 08:23 AM
It's a CSS z-index issue- the default z-index of the slideshow is greater than that of the menu, thus overlapping it. Inside dropdown.css, try adding the code in red to the pertinent code below:


/*----------- Navigation -----------------*/
.chromestyle{
width: 100%;
font-weight:bold;
font-size: 12px;
float: right;
z-index:2000;
position:relative;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
clear: both;
visibility: hidden;
}

.chromestyle ul{
width: 100%;
padding: 12px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #F90;
padding: 4px;
margin: 0;
text-decoration: none;

}



/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:2000;
background: url(yellowbkg.gif) center;
background-color: white;
width: 200px;
visibility: hidden;
}

smligget
04-19-2011, 04:42 PM
So when I did that it did make the navigation and logo show up. But what do I need to do to make it drop below the navigation and logo?

smligget
04-19-2011, 05:30 PM
Nevermind. I put a <br /> inbetween the the logo/nav and slideshow and it looks fine now.

smligget
04-19-2011, 05:36 PM
Except I came across something and the dropdowns aren't showing up over the slideshow. Any idea on that?

ddadmin
04-19-2011, 10:12 PM
You neglected to add the 2nd high z-index property to the following chunk of code:


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:2000;
background: url(yellowbkg.gif) center;
background-color: white;
width: 200px;
visibility: hidden;
}

smligget
04-20-2011, 01:32 AM
Thanks! it is working now. I didn't realize it had a scroll on it earlier. It works great now!

smligget
04-20-2011, 01:34 AM
Do you know what I could do to make the space between the header area(logo & navigation) and the slideshow closer, not as much space in between?

smligget
04-21-2011, 11:34 AM
Also, is there a way to change the background of the slideshow so when I have a shorter image then most of the images, its background is white instead of black?

azoomer
04-21-2011, 12:03 PM
Doing a search on dd, this comes up
http://www.dynamicdrive.com/forums/showthread.php?t=49688

to change the space between the logo/navigation and the slideshow, this might work:


.chromestyle {
float: right;
font-size: 12px;
font-weight: bold;
height: 40px;
position: relative;
width: 100%;
z-index: 2000;
}

smligget
04-25-2011, 09:12 PM
That worked great. One last question, I want the navigation to be a little bit lower, closer to the slideshow. Any idea how to do that? I would like the drop downs to start where the picture starts, so they kind of line up or close to it.

smligget
04-26-2011, 11:53 AM
I am wondering if you know how to make the navigation closer to the slideshow. Basically so when the drop downs come down, they are over just the slideshow and not above that. Any suggestions?