How to Display A Group of Dynamically Generated Buttons Vertically

Question

So I'm making a jQuery slideshow using the jQuery cycle plugin.

Part of the code generates a few <input type="button"> elements with a value from 1 to i (where i equals the total number of slides)

I'm trying to style these buttons so that they appear on top of the image in the slideshow. I have that part ok. However they line up horizontally across the image and I'd like to display them vertically on top of the image.

How do I go about doing this?

This is currently what my CSS looks like:

input[type=button] {
    position: relative;
    float: center;
    padding: 10px;
    left: 750px;
    z-index: 1000;

}

Answer 1

Replace this

input[type=button] {
    position: relative;
    float: center;
    padding: 10px;
    left: 750px;
    z-index: 1000;
}

into this

input[type=button] {
    position: relative;
    padding: 10px;
    left: 750px;
    z-index: 1000;
}

Not used to float: center this is wrong property

used to only float: left and float: right;

More about Float

Answer 2

You can achieve the effect by adding display:block to your inputs.. http://jsfiddle.net/NqN5y/6/

input[type=button] {
    padding: 10px;
    position: relative;    
    left: 350px;
    z-index: 1000;
    display:block;
}

another easy solution is to contain the buttons in a div. Set a fixed width for the div and bingo.

http://jsfiddle.net/NqN5y/1/

<div id="buttons">
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<input type="button" value="4"/>
</div>

input[type=button] {
    position: relative;
    float: center;
    padding: 10px;
    left: 350px;
    z-index: 1000;
}

#buttons{width:50px;}

You can then move your position styles to the container div.. http://jsfiddle.net/NqN5y/5/

input[type=button] {
    padding:10px;
}

#buttons{width:50px;background-color:#afa;
    position: relative;
    left: 350px;
    z-index: 1000;
}