Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 907
  • Last Modified:

Wanderlust-Brown.css issue

I'm trying to create a float:right div box which should overlay three DIVS on the page and always snug to the right side of the browser no matter what the screen size.  I've tried all kinds of variations of Z-INDEX and can not seem to get it to do what I want it to do.

I have the following page:

http://www.emmapettsmusic.com/index1.cfm

I'm using the SPRY plugin from Dreamweaver for my main slideshow window (only one image right now) and am having a problem getting the divs to layer properly.

When I set the hdrmnu div to z-index:-10 I get the FLOAT:RIGHT div box to overlap properly on the upper right corner, but when I set the SliderMenu div box to a negative z-index, the navigation buttons in the lower right corner stop reacting to a mouseover AND the FLOAT:RIGHT box creates an invisible overlay the same height as the 450px Slideshow box, even though I only want it 250px tall.

It cuts off the picture in the slideshow so it doesn't completely show itself.

If I set the SlideShow div box to a positive z-index, the navigation buttons work again, but the FLOAT:RIGHT div hides behind the SlideShow box even though the FLOAT:RIGHT z-index is postive 250.

I'm so confused as to how to make it work.

You can VIEW SOURCE for the CSS file links, but here's the Wanderlust CSS file as I have it set now.

@charset "utf-8";

/* wanderlust-brown.css - version 0.3 - Spry Pre-Release 1.7 */

/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */

/* The original intent of this design was to have CSS3 rounded corners around the entire
 * widget, but browser differences made it very hard to implement this because some browsers
 * clip background images so that they stay within the defined border-radius of the container
 * and allow you to round the corners of content images, and some don't. For
 * now, we've decided to disable CSS3 rounded corners for all browsers except webkit based
 * browsers.
 */
 
.WLBSlideShow {
      position: relative;
      width: 100%;
      padding: 0;
      color: white;
      /* -moz-border-radius: 7px;
      -webkit-border-radius: 7px;*/
      /*-moz-box-shadow: 5px 5px 10px gray;
      -webkit-box-shadow: 5px 5px 10px gray;
      box-shadow: 5px 5px 10px gray;
      font-family: Arial, Verdana, Geneva, sans-serif;
      font-weight: normal;
      font-size: 11px;
      background-position: top left;
      background-repeat: repeat-x;*/
      z-index: 0;
      background-color:#48261a;
      height: 450px;
            
}

.WLBSlideShow .SSClip {
      position: relative;
      overflow: hidden;
      height: 450px;
      margin: 0;
      padding: 0;
      
}

.WLBSlideShow .SSView {
      height: 450px;
      margin: 0;
      padding: 0;
}

.WLBSlideShow .SSSlide {
      position: absolute;
      top: 0;
      left: 0;
      height: 450px;
      z-index: 0;
}

.WLBSlideShow .SSSlideVisible {
      z-index: 1;
}

.WLBSlideShow .SSFirstButton, .WLBSlideShow .SSLastButton, .WLBSlideShow .SSPlayButton, .WLBSlideShow .SSSlideCount {
      display: none;
}
/* This adjusts the position of the previous button. Modify the RIGHT: attribute for distance from the right side.*/
.WLBSlideShow .SSPreviousButton {
      position: absolute;
      z-index: 300;
      bottom: 8px;
      right: 154px;
}

.WLBSlideShow .SSNextButton {
      position: absolute;
      z-index: 300;
      bottom: 8px;
      right: 20px;
}

.WLBSlideShow .SSPreviousButton {
      width: 15px;
      height: 15px;
      background-image: url(images/slideshow-controls.png);
      background-position: 0 -30px;
      background-repeat: no-repeat;
      text-indent: -10000em;
      padding: 0;
      border: none;
      background-color: transparent;
}

.WLBSlideShow .SSPreviousButtonHover {
      background-position: -60px -30px;
}

.WLBSlideShow .SSPreviousButtonDown {
}

.WLBSlideShow .SSPreviousButtonDisabled {
}

.WLBSlideShow .SSNextButton {
      width: 15px;
      height: 15px;
      background-image: url(images/slideshow-controls.png);
      background-position: -30px -30px;
      background-repeat: no-repeat;
      text-indent: -10000em;
      padding: 0;
      border: none;
      background-color: transparent;
}

.WLBSlideShow .SSNextButtonHover {
      background-position: -90px -30px;
}

.WLBSlideShow .SSNextButtonDown {
}

.WLBSlideShow .SSNextButtonDisabled {
}
/* this adjusts where the button links for each slide are located */

.WLBSlideShow .SSSlideLinks {
      position: absolute;
      overflow: hidden;
      bottom: 4px;
      right: 40px;
      z-index: 300;
}

.WLBSlideShow a.SSSlideLink {
      display: block;
      float: left;
      width: 23px;
      height: 23px;
      margin: 0 2px;
      color: #483E3D;
      text-align: center;
      text-decoration: none;
      line-height: 23px;
      background-image: url(images/slideshow-controls.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      font-size: 12px;
      font-weight: bold;
}

.WLBSlideShow a.SSSlideLinkHover {
      background-position: -30px 0;
}

.WLBSlideShow a.SSSlideLinkSelected {
      background-position: -90px 0;
      color: #483E3D;
}

.WLBSlideShow a.SSSlideLinkDisabled {
}

.WLBSlideShow .story {
      float: right;
      overflow: hidden;
      width: 344px;
      height: 200px;
      margin: 3px;
      padding: 0;
      /*background-position: top left;
      background-repeat: repeat-x;
      background-color: #808080;
      border-left: solid 1px #000000;*/
      /*-moz-border-radius-topright: 7px;*/
      -webkit-border-top-right-radius: 7px;
}

.WLBSlideShow .photo {
      margin-left:auto;
      margin-right:auto;
      width: 100%;
      padding: 0;
      z-index:-9;
}

.WLBSlideShow .photo img {
      margin-left:auto;
      margin-right:auto;
      width: 1200px;
      height: 450px;
      /* -moz-border-radius-topleft: 7px; */
      -webkit-border-top-left-radius: 7px;
      padding: 0;
}

/* .WLBSlideShow .photo .caption {
      margin: 0 6px;
      line-height: 30px;
      font-style: italic;
}

.WLBSlideShow .banner {
      background-color: #491e16;
      margin: 44px 0 0 11px;
      padding: 10px;
}

.WLBSlideShow .title {
      margin: 0;
      padding: 0;
      font-size: 24px;
}

.WLBSlideShow .subTitle {
      margin: 0;
      padding: 0;
      font-size: 15px;
      font-weight: normal;
}
*/
.WLBSlideShow .content {
      margin: 0 10px 0 21px;
}

.WLBSlideShow .content button * {
      display: block;
      margin: 0;
      height: 32px;
      color: white;
      font-size: 15px;
}

.WLBSlideShow .content button {
      margin: 0;
      padding: 0;
      background-color: transparent;
      border-width: 0px;
}

.WLBSlideShow .content button span {
      padding: 0 0 0 7px;
      background: transparent url(images/button-left.png) top left no-repeat;
}

.WLBSlideShow .content button span span {
      padding: 0 9px 0 0;
      background: transparent url(images/button-right.png) top right no-repeat;
}

.WLBSlideShow .content button span span span {
      padding: 0;
      background: transparent url(images/button-center.png) top left repeat-x;
      line-height: 28px;
      white-space: nowrap;
}

.WLBSlideShow .content button:hover span,
.WLBSlideShow .content button:hover span span span {
      background-position: -33px left;
}

.WLBSlideShow .content button:hover span span {
      background-position: -33px right;
}
0
day6
Asked:
day6
1 Solution
 
designatedinitializerCommented:
This will do the trick:
{
    height: 250px;
    width: 150px;
    position: absolute;
    z-index: 250;
    top: 0px;
    right: 0px;
    display: block;
}

Open in new window

0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now