Solved

Wanderlust-Brown.css issue

Posted on 2012-04-06
1
896 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 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

12 Experts available now in Live!

Get 1:1 Help Now