Margin between list items

[sjoerdth]

Hi, I'm looking into useing AnythingSlider and I've almost got it to work the way I want it except for one thing I can't figure out: putting a right margin of 30px between the list-items.

You can see what I got here: http://www.mediaconcepts.nl/sjoerdtestmap/

When I change the margin in the css it seems the first cloned li bumps the real first li the same number of px to the right so that it isn't centered anymore.

Any advice? Thanks, Sjoerd

[OrangeWacko]

I just encountered the same issue. What I did and it works perfect is to include the extra margin withing your li, so for example, in my case, I had linked image in my LIs, and LIs are supposed to be separated 12 pixels from each other.

Anythingslider does weird increment where it will move the whole div X pixels calculated on widths of your LIs, in this case setting margins on LIs will Not work.

So, to fix that, lets say before, LIs were 100 pixels in width, so was the width of my image, I will set my LIs to be 112 pixels and simply align my image (or any other divs to the left) this will correctly calculate the sliding for slider and it will margin your LIs from each other

[Mottie]

In this demo, the images and slider were all originally 300x200.

The images stay 300x200, but they are each wrapped with a div

<li>
    <div class="inner"><img src="http://placekitten.com/300/200" alt="" /></div>
</li>

then, add a margin to that div

.inner {
    margin: 20px;
}​

and finally, make the slider that margin size x 2.

ul#slider, ul#slider li {
    width: 340px;
    height: 240px;
    list-style: none;
}

Hopefully that will work for you :)

[Mottie]

I'm guessing this issue has been resolved. Please feel free to reopen it if you continue to have problems.