Solved

Wanderlust-Brown.css issue

Posted on 2012-04-06
1
892 Views
Last Modified: 2012-06-21
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
Comment
Question by:day6
1 Comment
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 500 total points
ID: 37818068
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now