Nivo Slider - Position navigation bullets at bottom of slider, rather than underneath

Question

I'm making a website and have used Nivo Slider to create a jQuery slider.

I'm having an issue with the bullets used to show which slide the user is viewing. I would like the bullets to appear on the images of the slider, rather than below.

I managed to move the bullets to the location using the following CSS code:

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../images/banner/dots.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:0px;
    float:left;
}

Here's a screenshot of how they should look: http://i41.tinypic.com/mt59gi.png

But once I resize the browser window, the bullets move off the slider, like this: http://i40.tinypic.com/2ldtus8.png

I've changed top: 365px; to a percentage too, but that seemed to produce the same result.

Is there any way to keep the bullets on the slider, even when the browser window is resized? The slider width is 100%, so the slider will also resize with the browser window. Preferably, I'd like to keep it that way, if possible.

Any help is greatly appreciated.

EDIT: I've posted a test version to www.fearless-music.net/test/

Answer 1

If the width of the image is changing when the browser is resized then more than likely so is the height.

In this case if the height is changing your code "top: 365px;" becomes irrelevant.

IMO I would adjust the distance from the top of the wrapper with a media query ... Something like so:

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}

@media (max-width: 960px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 265px;
    z-index:3000 !important;
}

}

@media (max-width: 768px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 165px;
    z-index:3000 !important;
}

}

@media (max-width: 400px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 65px;
    z-index:3000 !important;
}

}

I would be best to see what break points you are trying to compensate for and see what the height of the image changes to, then determine the necessary value for "top" in your css.

More info here.