alignment

PHKatz · 12:12 AM

Have a page where I'm trying to align paypal buttons under item. They are under the item, but far away from them. Not sure how to bring them closer tothe items. http://gemin9.com/misc.html

Visual · 02-04-2012, 12:43 AM

I will make a suggestion. Use a shopping cart with product numbers instead of trying to place a button under each item. I can't make any sense of the code your using which makes more sense because of the https.

Make a cart with product numbers and item counts. When someone clicks an item the carts appears and gives options for the buyer.

PHKatz · 02-04-2012, 01:49 AM

Quote:

Originally Posted by Visual

I will make a suggestion. Use a shopping cart with product numbers instead of trying to place a button under each item. I can't make any sense of the code your using which makes more sense because of the https.

Make a cart with product numbers and item counts. When someone clicks an item the carts appears and gives options for the buyer.

The html for the buttons were copied from paypal. It's where I want it, it's just the second and third buttons.

Firebirds · 02-04-2012, 02:04 AM

Enclose the button in <div>'s, and tweak the margins so that they look right and line up correctly. Say you want the images to be 10% of the screen. Since you have 3 buttons, 2 buttons can take up 30%, and one button can take up 40%. So you want to set up your margins to look something like this.
20% margin-left Paypal button (10%) | 15% margin-left Paypal button (10%) 15% margin-right | Paypal button (10%) 20% margin-right
and if you have your doctype correct,

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It should work close to the same way for every browser.
Good luck!

PHKatz · 02-04-2012, 02:21 AM

Quote:

Originally Posted by Firebirds

Enclose the button in <div>'s, and tweak the margins so that they look right and line up correctly. Say you want the images to be 10% of the screen. Since you have 3 buttons, 2 buttons can take up 30%, and one button can take up 40%. So you want to set up your margins to look something like this.
20% margin-left Paypal button (10%) | 15% margin-left Paypal button (10%) 15% margin-right | Paypal button (10%) 20% margin-right
and if you have your doctype correct,

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It should work close to the same way for every browser.
Good luck!

This is the code for the button.
<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="7FBXMCK8GLHTY"><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>
What did you say I should modify?

Firebirds · 02-04-2012, 02:25 AM

To declare !DOCTYPE at the very beginning of the page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To align the buttons:

HTML Code:

<div style="margin-left:20%;width:10%;">
<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="7FBXMCK8GLHTY"><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>
<div style="margin-left:15%;width:10%;margin-right:15%;">
<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="7FBXMCK8GLHTY"><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>
<div style="width:10%;margin-right:15%;">
<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="7FBXMCK8GLHTY"><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>

PHKatz · 02-04-2012, 12:20 PM

Quote:

Originally Posted by Firebirds

To declare !DOCTYPE at the very beginning of the page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To align the buttons:

HTML Code:

<div style="margin-left:20%;width:10%;">
<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="7FBXMCK8GLHTY"><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>
<div style="margin-left:15%;width:10%;margin-right:15%;">
<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="7FBXMCK8GLHTY"><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>
<div style="width:10%;margin-right:15%;">
<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="7FBXMCK8GLHTY"><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>

Didn't align. The second and third buttons are now on the left side of page.

Visual · 02-04-2012, 02:20 PM

What program are you using to place the objects? You should be able to drag an html container on your page and this will create <div> on them with exact positions just as it should with your pictures. Paypal should have information on the exact height and width of that button. You just size the container to match that.
You can also use iframe the same way.

Visual · 09:04 PM

I made this with exact posions with one button.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
}
</style>
</head>
<body>
<div id="Html1" style="position:absolute;left:127px;top:156px;width:120px;height:40px;z-index:0">
<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="7FBXMCK8GLHTY"><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">
</div>
</body>
</html>

See how the container I made for it is 120pix by 40pix ?

PHKatz · 02-04-2012, 03:22 PM

I'm using hard code, which may be the difference.