Align Button

Discussion in 'HTML & Website Design' started by Dee2007, Jun 11, 2011.

0
  1. #1
    Hi

    Please can someone tell me how to align the button to the drop down, I did manage to using the div method but when multiple buttons are added to the same page it messed up.

    Here is the code:

    <form action="http://secure.aitsafe.com/cf/add.cfm" method="post">
    <input type="hidden" name="userid" value="kkkkkkkkk">
    <input type="hidden" name="product[]" value="Test">
    <input type="hidden" name="price" value="12.00">
    <input type="hidden" name="units" value="1">
    <select name="product[]">
    <option value="Small">Small</option>
    <option value="Medium">Medium</option>
    <option value="Large">Large</option>
    <option value="Extra Large">Extra Large</option>
    </select>
    <input type="image" src="http://www.impeccablepets.co.uk/Order.jpg" Alt="Buy now!">
    </form>


    Many Thanks In Advance :)

    Dee
     
    Dee2007, Jun 11, 2011 IP
  2. Dee2007

    Dee2007 Active Member

    Messages:
    1,185
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    88
    #2
    Please anyone?
     
    Dee2007, Jun 12, 2011 IP
  3. karthimx

    karthimx Prominent Member

    Messages:
    4,959
    Likes Received:
    127
    Best Answers:
    2
    Trophy Points:
    340
    #3
    div method is the best one. For adding multiple button use style: float left;
     
    karthimx, Jun 12, 2011 IP
  4. IberoMedia

    IberoMedia Peon

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #4
    Alternativelly, how about a table structure:

    <table><form action="http://secure.aitsafe.com/cf/add.cfm" method="post">
    <input type="hidden" name="userid" value="kkkkkkkkk">
    <input type="hidden" name="product[]" value="Test">
    <input type="hidden" name="price" value="12.00">
    <input type="hidden" name="units" value="1">
    <tr><td><select name="product[]">
    <option value="Small">Small</option>
    <option value="Medium">Medium</option>
    <option value="Large">Large</option>
    <option value="Extra Large">Extra Large</option>
    </select></td><td>
    <input type="image" src="http://www.impeccablepets.co.uk/Order.jpg" Alt="Buy now!">
    </form> </td></tr></table>

    You can check the code here: http://www.duketown.com/marcel/htmltest.shtml
     
    IberoMedia, Jun 12, 2011 IP
  5. Dee2007

    Dee2007 Active Member

    Messages:
    1,185
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    88
    #5
    Hi

    I guess I'm doing it wrong with the div method then because with two or more on the page the position is a mile out

    Please can you look at this code

    <div style="position: absolute; top: 0px; float left;">

    Is that wrong?
     
    Dee2007, Jun 12, 2011 IP
  6. IberoMedia

    IberoMedia Peon

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #6
    <div style="position: absolute; top: 0px; float left; width: 200px; height: 100%">
    <form action="http://secure.aitsafe.com/cf/add.cfm" method="post">
    <input type="hidden" name="userid" value="kkkkkkkkk">
    <input type="hidden" name="product[]" value="Test">
    <input type="hidden" name="price" value="12.00">
    <input type="hidden" name="units" value="1">
    <div style="float: left; margin: 0 5px 0 0">
    <select name="product[]">
    <option value="Small">Small</option>
    <option value="Medium">Medium</option>
    <option value="Large">Large</option>
    <option value="Extra Large">Extra Large</option>
    </select></div>
    <div style="float: left; margin: 2apx 0 0 -1px;">
    <input type="image" src="http://www.impeccablepets.co.uk/Order.jpg" Alt="Buy now!">
    </form></div> </div>
     
    IberoMedia, Jun 12, 2011 IP
  7. Dee2007

    Dee2007 Active Member

    Messages:
    1,185
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    88
    #7
    Hi

    That code displays the button to the left of the drop down as opposed to the right, I've got it vertically aligned with the button, what do I change/add to get it over to the right?
     
    Dee2007, Jun 12, 2011 IP