Slider bullets aligning vertically?

HTML & CSS
1

Hi,
so close but so far. I have my slider styled with arrows and bullets for the slides. I just can not figure out the CSS to get the bullets aligned horizontally.
The 3 circle/dot things top center of main slider images. I can get them below the images, but I left them where they are so that they are easier to see. Right now they are stacked vertically and they should be in a row.
Example here http://gasolicious.com/craft_test_elegance/

Also of interest but not as important. Is there any way to center them below the image, without manually adjusting position? Remember I can not add divs etc, as it the structure is all generated by the JQuery slider

Thanks in advance

2

Hi gasonm,

Nivo has a lot of good themes where the bullets are aligned to bottom horizontally so I’d just grab one of those.
The reason they are stacked vertically is because they are display block and have a large width from your css here.


#slider img, #slider a, #slider a img, #slider {
    height: 360px;
    width: 946px;
}

By floating them left and giving them a small width they will sit next to each other.


#slider .nivo-controlNav .nivo-control {
  float: left;
  width: 15px;
}

Also of interest but not as important. Is there any way to center them below the image

Yes, you can just adjust the top value of the nav.


#slider .nivo-controlNav {
    top: 100%;
}

That’s hard to see because your bullets are white, but they will be below the image.

3

Thanks so much. I had tried the float and removing block and I had width 15.
It is a battle to over-ride some of the default css that comes with the slider. Once I made it more targeted like yours it worked, I was just using .nivo-controlNav a
I was not clear in my second question. I can position it below the image, I was wondering if there is a way to center it horizontally so that I do not need to manually set a left position every time I add or remove a slide? I made the test site background grey so you can see them