sliderimagenav buttons umediaslider - UI Questions

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Dominic Brown 91 posts 111 karma points

Oct 24, 2011 @ 14:31

0

SliderImageNav (buttons) u.MediaSlider

Hi,

I've created a site using the business template with the standard u.media slider installed, i've made a few changes to the layout and image sizes etc but i am having trouble with the image nav bar (the little buttons that let you move to different images in the slider). I cannot seem to get the nav button to appear on top of the images, its always behind which mean its not even visible to the end user.

I've tried z-index but this has no effect, can anyone help?

I'll add my CSS for the slider, please forgive me if its not very good, i am new to this.

thanks in advance

#imageshadow {
position:relative;
bottom:100px;
}

#slider {
  position:relative;
bottom:40px;
  overflow: hidden;
  width: 960px;
height:430px;
  clear: both;
  overflow:visiabl

}

  #slider .imageSliderInfo{
  color: #FFF;
  width: 960px;
  height:50px;
  position:relative;
  top:320px;
  background-color:#000;
  }

  #slider .imageSliderInfo h2{
  color: #FFF;
  font-size: 26px;
  }

  #slider .imageSliderInfo p{
  color: #FFF;
  font-size: 20px;
  padding:10px;
  }

  #slider .imageSliderImage{
  position:relative;
  bottom:110px;
  height:380px;
  }

  #slider .imageSliderImage img{
  border: 0px #000 solid;
  }

#slider #imageSliderNav{
  position:relative;
  bottom:0px;
  float: left;
  overflow: auto;
  text-align: left;
  width: 540px;
  padding-top:45px;
  padding-left:16px;
  }
  #slider #imageSliderNav a{
  background-image: url(/images/imageSliderNav.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #dee4e4;
  text-indent: -9000px;
  display: inline-block;
  height: 20px;
  width: 20px;
  }
  #slider #imageSliderNav a.activeSlide{
  }

Copy Link
Dominic Brown 91 posts 111 karma points

Oct 24, 2011 @ 15:03

0

here is a screen shot of the imageslider for reference

Copy Link
Rodion Novoselov 694 posts 859 karma points

Oct 24, 2011 @ 23:32

0

Hi. I haven't looked into your CSS carefully, but as a first thought - did you account the thing that z-index works only for positioned elements?

Copy Link
Dominic Brown 91 posts 111 karma points

Oct 25, 2011 @ 12:23

0

Hi, thanks for your reply.

I have everything set to position:relative; and i've been using the left: right: top: bottom: method for posistioning things, is this the issues do you think?

Thanks

Copy Link
Rodion Novoselov 694 posts 859 karma points

Oct 25, 2011 @ 20:43
0
Dominic, try and remove "overflow:hidden" from
```
#slider {
  position:relative;
bottom:40px;
    overflow: hidden;
  width: 960px;
height:430px;
  clear: both;
  overflow:visiabl
}
```
and situation will become much clearer.

The slider nav is actally there, but it went down and "overflow:hidden" of the parent div hid it.
Copy Link
Dominic Brown 91 posts 111 karma points

Oct 25, 2011 @ 21:36

0

Hi,

yeah i've tried changing that to visible before but all it did was move things around the nav button were stiull underneath the images :oS

Copy Link
Rodion Novoselov 694 posts 859 karma points

Oct 25, 2011 @ 22:03
1
Oh. I have tried and it seems that all you need is just to add
```
#imageSliderNav {
  position: relative;
  top: -64px;
  z-index: 100;
}
```
to the end of an original custom.css file. Than you'll just need to edit the button png image and modify some background colors to maintain proper transparency.
Copy Link
Dominic Brown 91 posts 111 karma points

Oct 25, 2011 @ 22:47

0

wow thanks alot!!

i've put it in like this and its now on top and in the top left of the image

#slider #imageSliderNav {
  position: relative;
top: -455px;
  z-index: 100;
}

  #slider #imageSliderNav a{
  background-image: url(/images/imageSliderNav.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #dee4e4;
  text-indent: -9000px;
  display: inline-block;
  height: 20px;
  width: 20px;
  }

How does this work? I was told never to use minus figures in CSS. Glad it works tho, its been driving me mad for ages now. Thanks again!!!

Copy Link
Rodion Novoselov 694 posts 859 karma points

Oct 25, 2011 @ 23:08

1

That's simple. Simply, position: relative means that everything is ok but you just want somehow to shift the element from the 'normal' flow. In your case you just take your #imageSliderNav and shift it upside by "top: -NNN". It's strange to hear about avoiding usage of negative values in CSS since they're very important for some standard methods. For instance, look at the following (i think most-known) method of building transparent rounded corners:
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/
It's completely based on negative margins.

Copy Link
Dominic Brown 91 posts 111 karma points

Oct 25, 2011 @ 23:26

0

Well it was my boss that told me that, he is a silverlight dev man with basic CSS skills, maybe thats why hehe

thanks for the link, will give it a good read tomorrow morning!!

fyi, for rounded boarders i've been using:

border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background: #EEFF99; behavior: url(/PIE.htc);

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

SliderImageNav (buttons) u.MediaSlider