Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Wanderlust-Brown.css issue

Posted on 2012-04-06
1
Medium Priority
?
901 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 2000 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

Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

721 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