SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slider bullets aligning vertically?

    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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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.
    Code css:
    #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.
    Code css:
    #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.
    Code css:
    #slider .nivo-controlNav {
        top: 100%;
    }
    That's hard to see because your bullets are white, but they will be below the image.

  3. #3
    Non-Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •