Need some help on my css/html code for positioning of custom paypal button

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi everybody here,
I have a little problem with my css/html, hope somebody can help me
I am building an online store (of aromatherapy products)
I want to achieve this look for each product


And i did achieve this image by following piece of code (Without linking my two button yet!)

<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...>
<style type="text/css">
.product_container {
background-color: #f3f3f3;
position:relative;
width:300px;
height:160px;
padding:15px 10px 10px 15px;
margin:0px;
border:1px solid #dadada
}

.product_container .title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0.5px;
color: #ad194a;
float:left;
width:63%;
}

.product_container .desc {
float:left;
width: 63%;
font-size: 1em;
display: block;
}

.product_container .desc a {
text-decoration: none;
font-size:0.8em;
}

.product_container .desc a:hover {
text-decoration: underline;
color: #ad194a;
}

.product_container .product_image {
float:right;
border:5px solid #dadada;
}

.product_container .details_button {
position:absolute;
left:110px;
bottom:5px;
}

.product_container .add_to_cart_button {
position:absolute;
left:15px;
bottom:5px;
}

.product_container .price {
font-family: Arial, Verdana, "Sans serif";
font-size: 2em;
font-weight:bold;
letter-spacing: 0.5px;
color: #000000;
position:absolute;
right:50px;
bottom:10px;
}

.product_container .unit {
font-family: Arial, Verdana, "Sans serif";
font-size: 1em;
letter-spacing: 0.5px;
color: #000000;
position:absolute;
right:20px;
bottom:15px;
}

</style>

<div class="product_container">
<p class="product_image"> <img src="http://orgavica.yolasite.com/resource...> </p>
<p class="title">Psuedo Essential Oil</p>
<p class="desc"><b>Size:</b> 5ml<br>
<b>Grade:</b> Therapeutic<br>
<b>Useful in:</b> blah blha blha, and blah blah blah<br><a href="#">shipping details </a>
</p>
<p class="price">$ 5.8</p>
<p class="unit">USD</p>

<p class="add_to_cart_button"><img src="http://orgavica.yolasite.com/resource...> </p>
<p class="details_button"><img src="http://orgavica.yolasite.com/resource...> </p>

</div>
-->

My nightmare started when i tried to replace the image of add-to-cart-button with paypal code! It doesn't get aligned as i want. The button remains in a normal flow, instead of sitting at bottom of container :(

This is the pay pal code:

<!--
<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="EHBRDRWP64RLL">
<input type="image" src="http://orgavica.yolasite.com/resource..." border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pi..." width="1" height="1">
</form>
-->

I have simply tried tried to replace the image url with the paypal code in my original code.
Can somebody help me to align that button with paypal code to the bottom of the container, please?

*I have very limited knowledge o css and html, so if you feel my above code is messy even a cleaner code would be a help :)

Thanks in advance for such a helpful community
and sorry for such a long question :(
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
  • confident of getting a solution !

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Hello Monica! I most certainly can help! The problem is that the PayPal code is a form not just a button. It may appear as a button on the page but really it is a form. Try using this code instead and see if it works:

PUT THIS CODE IN A SEPARATE HTML WIDGET ON YOUR PAGE:

<form target="paypal" name="paypalform" 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="EHBRDRWP64RLL">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pi..." width="1" height="1">
</form>

PUT THIS CODE IN PLACE OF THE "ADD TO CART" IMAGE CODE:

<img src="http://orgavica.yolasite.com/resource..." border="0" name="submit" alt="PayPal - The safer, easier way to pay online." onclick="document.paypalform.submit()">

What this does is it puts the form some where else on the page and then put the image in the div. When you click the image it triggers a JavaScript submit() function and submits the form from that image. If you see it says "document.paypalform.submit()" The "paypalform" is the name of the form if you see in the code.

Also, here is a edited version of that first piece of code you posted:

<style type="text/css">
.product_container {
background-color: #f3f3f3;
position:relative;
width:300px;
height:160px;
padding:15px 10px 10px 15px;
margin:0px;
border:1px solid #dadada
}

.product_container .title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0.5px;
color: #ad194a;
float:left;
width:63%;
}

.product_container .desc {
float:left;
width: 63%;
font-size: 1em;
display: block;
}

.product_container .desc a {
text-decoration: none;
font-size:0.8em;
}

.product_container .desc a:hover {
text-decoration: underline;
color: #ad194a;
}

.product_container .product_image {
float:right;
border:5px solid #dadada;
}

.product_container .details_button {
position:absolute;
left:110px;
bottom:5px;
}

.product_container .add_to_cart_button {
position:absolute;
left:15px;
bottom:5px;
}

.product_container .price {
font-family: Arial, Verdana, "Sans serif";
font-size: 2em;
font-weight:bold;
letter-spacing: 0.5px;
color: #000000;
position:absolute;
right:50px;
bottom:10px;
}

.product_container .unit {
font-family: Arial, Verdana, "Sans serif";
font-size: 1em;
letter-spacing: 0.5px;
color: #000000;
position:absolute;
right:20px;
bottom:15px;
}

</style>

<div class="product_container">
<p class="product_image"> <img src="http://orgavica.yolasite.com/resource...> </p>
<p class="title">Psuedo Essential Oil</p>
<p class="desc"><b>Size:</b> 5ml<br>
<b>Grade:</b> Therapeutic<br>
<b>Useful in:</b> blah blha blha, and blah blah blah<br><a href="#">shipping details </a>
</p>
<p class="price">$ 5.8</p>
<p class="unit">USD</p>

<p class="add_to_cart_button"><img src="http://orgavica.yolasite.com/resource...> </p>
<p class="details_button"><img src="http://orgavica.yolasite.com/resource...> </p>

</div>

If any of this code is confusing, please let me know! Also, please let me know if it works.

-->

Thanks,
Nathan
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
THANKS ALOT Nathan..
Will give it a shot,
and get back here to let you know..
Thanks once again :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem :)
Photo of Susan M. Risk

Susan M. Risk

  • 2 Posts
  • 0 Reply Likes
Thanks so much for covering this. I have worked with web for over ten years, and, all of a sudden, I have paypal buttons that veer to the left of the page, regardless of the box css. I have used Paypal buttons before and they always sit.
I never thought of actually creating a css container for the buttons, though I did separate the form from the button.
I have a feeling Paypal has a few glitches in its own makeup, but I'm no developer, just a designer.

Nathan, I so appreciate the work you have offered for we puzzled designers!

regards, Sue
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Works Wonderfully,
a little more wish from Nathan Santa ;)
when the cursor moves over the add-to-cart button it doesn't changes into a hand, is it possible to change it to a hand so that people should easily know that it is a working link?
Thanks once again
*by the way are located in India?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I am glad it worked! You can surely make it change to a hand! Here is that same Image code again but this one makes it turn to a hand on hover:

<!--

<img src="http://orgavica.yolasite.com/resource..." border="0" style="cursor:pointer;" name="submit" alt="PayPal - The safer, easier way to pay online." onclick="document.paypalform.submit()">

-->

If this does not work for you I have another code too.

-Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, I did not see that little note at the bottom the first time I read your reply. I am in the USA. Yola is located in California and another office in Cape Town.

-Nathan
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Works wonderfully, as i needed.
I cant believe i wasted my 2 hours on it yesterday, without even solving my problem :(
If you would have been in front of me, i would have hugged you out of joy!
I know about yola's location, your name sounded like Indian to me, so just asked casually (hope you dont mind!)
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Oops sorry, i got carried away..
forgot to say even THANK YOU!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Monica, I am glad that the code I provided worked! (I don't mind about you asking.) Next time you have a problem like this one, just post it here! When I first posted the reply I didn't even know if it was going to work. But, I am glad it did! :) Let me know if there is anything else you need help with.
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
one more doubt, the code which you told me to put in another html widget, is there any preference of placement for that widget. Or is it ok if i put it anywhere on the page?
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Nope, it is working seamlessly!
I just asked about the placement of widget to be sure i dont goof up :)
And thanks for being a great help!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome! :) Yeah, just make sure it is before the HTML widget that the image code is in and you should be fine. What browser are you using?
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
I use and love Firefox!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thats good. Firefox is the recommended browser for Yola.
Photo of Susan M. Risk

Susan M. Risk

  • 2 Posts
  • 0 Reply Likes
Monica, if you want to replace the cursor icon, it is easy to do. COnsult the WW3 pages (World Wide Web Consortium) by using a string like this:
ww3+css+cursor icon

You will soon find the code for this. It is easy.

Sue
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
Ok, I am here again..
I would have more than one such button on my store page..
And I cant every time bug you with a code to convert it for me!
can you give me some idea on what tweaks to be done in a paypal code to get other buttons working?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Monica, the image code goes in every box. But, is that form pay pal code for one product or for all?

Also, how much products are you planning to add?
Photo of Monica

Monica

  • 60 Posts
  • 0 Reply Likes
I am planning to add around 40 products now. and will be adding more in future.. And each product has different code.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Ok then. that means you'll just have to add the 40 PayPal codes to the HTML widget with the current pay pal code in it. I can show you how to create these.

Here is the first PayPal code:

<form target="paypal" name="paypalform" 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="EHBRDRWP64RLL">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pi..." width="1" height="1">
</form>

Well, it has a name. The name is 'paypalform' Now in the Image code here it is:

<img src="http://orgavica.yolasite.com/resource..." border="0" name="submit" alt="PayPal - The safer, easier way to pay online." style="cursor:pointer;" onclick="document.paypalform.submit()">

If you see in the " onclick="" " part, you'll see the name in that. What you need to do with the next one is name it 'paypalform2' and then in the image onclick part change 'paypalform' to 'paypalform2' So that image will submit each form according to it's name.

Oh and one more thing, you have to remove the image code that is in the PayPal code. Like this:

<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="EHBRDRWP64RLL">
<input type="image" src="http://orgavica.yolasite.com/resource..." border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pi..." width="1" height="1">
</form>

Just remove the whole entire input type="image" tag. So for this code above, just remove this part out (This is what I did for you already in the first one) :

<input type="image" src="http://orgavica.yolasite.com/resource..." border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">

Keep the img tag but not that input type="image" one because that is the submt button and you are adding that to the product containers.

So now you wont have to ask me to create one for all 40 products, It is already there you just have to rmove one part and add another part in the other HTML widget.

If this sounds confusing or if you don't get one part let me know. Test this out on the second item (copy the PayPal code and follow my instructions) and see if it works. If it does then just do this for the rest, but, keep follow these steps above on all of the PayPal codes.

-->

I hope this helps!

~Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Nathan - thanks again for your fantastic support on this thread!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome. I am glad I am able to help here on this forum :)