Solved

Wanderlust-Brown.css issue

Posted on 2012-04-06
1
898 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Geolocation works...sometimes 2 39
javascript duplicates 9 25
ninja forms fields lay next to each other 1 21
Page link not showing on Mobile Device 3 52
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 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