Chrome Dropdown & Slideshow

[smligget]

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: http://www.sarahliggett.com/sollenbe...rs/example.htm

Thanks for the help!

Sarah

[ddadmin]

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]

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]

Nevermind. I put a <br /> inbetween the the logo/nav and slideshow and it looks fine now.

[smligget]

Except I came across something and the dropdowns aren't showing up over the slideshow. Any idea on that?

[ddadmin]

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]

Thanks! it is working now. I didn't realize it had a scroll on it earlier. It works great now!

[smligget]

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]

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]

Doing a search on dd, this comes up
http://www.dynamicdrive.com/forums/s...ad.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;
}