I need some quick help with some HTML

[tenpercentfirearms]

Please see my TaftIDPA website.

http://www.taftidpa.com/

Scroll down to my t-shirts for sale.

What code do I use to move my buttons around for the colors and adding to cart. Ideally I would like to have the color of the button go below its corresponding shirt in the photo above. So instead of cascading down, the buttons go across.

Here is my current button code so you don't have to view source.

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="B5PSQM4M67B8G">
<table><b>PINK</b>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
<option value="Small">Small </option>
<option value="Medium">Medium </option>
<option value="Large">Large </option>
<option value="X-Large">X-Large </option>
<option value="2X-Large">2X-Large </option>
<option value="3X-Large">3X-Large </option>
</select> </td></tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

And that is all the html between buttons. Nothing more.

Thanks for the help! I tried Googling with no success.

[gogohopper]

No idea. But I use NVU, it's free, and it gets the job done for me.

[Bizy858]

http://www.w3schools.com/

[Bizy858]

Great source for code.

[naeco81]

CSS:

.paypal-form
{
    float: left;
}

HTML:

<div class="paypal-form">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="B5PSQM4M67B8G">
<table><b>PINK</b>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
<option value="Small">Small </option>
<option value="Medium">Medium </option>
<option value="Large">Large </option>
<option value="X-Large">X-Large </option>
<option value="2X-Large">2X-Large </option>
<option value="3X-Large">3X-Large </option>
</select> </td></tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>

To change the color of the buttons themselves you will have to create your own images for the button, unless Paypal provides other button colors already.

[tenpercentfirearms]

CSS:

.paypal-form
{
    float: left;
}

HTML:

<div class="paypal-form">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="B5PSQM4M67B8G">
<table><b>PINK</b>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
<option value="Small">Small </option>
<option value="Medium">Medium </option>
<option value="Large">Large </option>
<option value="X-Large">X-Large </option>
<option value="2X-Large">2X-Large </option>
<option value="3X-Large">3X-Large </option>
</select> </td></tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>

To change the color of the buttons themselves you will have to create your own images for the button, unless Paypal provides other button colors already.

I don't want to change the color. I just want to get rid of the left align and let them be placed along a row. I have them ordered to where they will be underneath their corresponding color with the photo above.

Actually, I can change the color pretty easy using google to figure that out.

I will go check my ccs. Thanks.

[tenpercentfirearms]

I tried the float, that isn't quite what I was looking for.

Basically I want the buttons to be right underneath that photo of the different colored shirts. As it stands using the form commands, they are aligned down the page as you can now see. I don't want them to be on their own row, I want them in the same row across the page.

[naeco81]

Did you wrap each button HTML code with the div class call? I only did one in the example. That should give you the horizontal alignment you wanted. Alternatively you could use a table.

[tenpercentfirearms]

Did you wrap each button HTML code with the div class call? I only did one in the example. That should give you the horizontal alignment you wanted. Alternatively you could use a table.

I did not! And I just did and it looks like it is working. Stand by and thank you!

[naeco81]

Great. Glad I could help

[tenpercentfirearms]

Ok we are almost there. How can I center the buttons now and why is that view cart button over there instead of centered underneath like I am attempting in the code.

[Ninety]

I'd say you added that container code for the view cart button and not only for the buttons..

[naeco81]

You can wrap anything you want centered with:

<center>
stuff you want centered
</center>

[tenpercentfirearms]

You can wrap anything you want centered with:

<center>
stuff you want centered
</center>

I did that. It is still centered over by itself on the right. It didn't move down.

[naeco81]

Okay I think I know what you're after. Replace your files with this HTML and this CSS.