I currently have 2 order buttons that work, but align terribly like this:
I need them to look like this:
http://i.imgur.com/yy5wCQI.png
These are used on my website.
I can get them to align like that by removing the "/form" before bitpay, but it makes it so the bitpay button takes you to the paypal button link. I can only make it take you to the correct order page if I add the "/form" and break the horizontal alignment. Please help.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXX">
<table>
<tr><td><input type="hidden" name="on0" value="200GB/2GB RAM">200GB/2GB RAM</td
</tr><tr><td><select name="os0">
<option value="1 MONTH">1 MONTH $25.00 USD</option>
<option value="3 MONTHS">3 MONTHS $65.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="http://i.imgur.com/ORLogUb.png" border="0" name="submit"
alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="http://i.imgur.com/ORLogUb.png" width="1" height="1">
</form>
<form action="https://bitpay.com/checkout" method="post" >
<input type="hidden" name="action" value="cartAdd" />
<input type="hidden" name="data" value="XXXXXXXXXXXXXXXXXX" />
<input type="image" src="http://i.imgur.com/pSatyZL.png" border="1" name="submit"
alt="BitPay, pay with bitcoins." >
See live example on http://jsfiddle.net/fuSYL/
You need additional div wrapper for those two forms and also some css.
HTML
<div class="form-container">
<!-- from paypal -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXX">
<p>
<input type="hidden" name="on0" value="200GB/2GB RAM">200GB/2GB RAM
</p>
<p>
<select name="os0">
<option value="1 MONTH">1 MONTH $25.00 USD</option>
<option value="3 MONTHS">3 MONTHS $65.00 USD</option>
</select>
</p>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="http://i.imgur.com/ORLogUb.png" border="0" name="submit"
alt="PayPal - The safer, easier way to pay online!" class="button-paypal">
<img alt="" border="0" src="http://i.imgur.com/ORLogUb.png" width="1" height="1">
</form>
<!-- /from paypal -->
<!-- form bitpay -->
<form action="https://bitpay.com/checkout" method="post">
<input type="hidden" name="action" value="cartAdd" />
<input type="hidden" name="data" value="XXXXXXXXXXXXXXXXXX" />
<input type="image" src="http://i.imgur.com/pSatyZL.png" name="submit"
alt="BitPay, pay with bitcoins." class="button-bitpay">
</form>
<!-- /form bitpay -->
</div>
CSS
.form-container {
text-align: center;
position: relative;
padding: 0 0 10px;
}
.form-container p {
margin: 0 0 10px;
padding: 0;
}
.button-paypal {
position: absolute;
bottom: 0;
margin: 0 0 0 -90px;
}
.button-bitpay {
position: absolute;
bottom: 0;
margin: 0 0 0 10px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.