?
Solved

HTML Paypal Button

Posted on 2010-09-15
15
Medium Priority
?
292 Views
Last Modified: 2012-05-10
will someone please go look at my site: http://clcinc.org/ and tell me how I can move the paypal button up to be even with the rest of the header?  

I am using Dreamweaver and know a little HTML.  Any help is appreciated.  Thanks
0
Comment
Question by:clcinc
  • 7
  • 4
  • 2
  • +2
15 Comments
 
LVL 1

Expert Comment

by:Simon-H
ID: 33684136
Hi,

It appears to me that you need to try formatting your button to give it the same border spacing as you have for the text-links.

Is it possible you could post a copy of your css file?

Thanks,
0
 
LVL 1

Expert Comment

by:Simon-H
ID: 33684163
http://www.quirksmode.org/js/detect.html

You can then place a query that will redirect the page based on the response your code receives from the detection.

Regards,

Simon
0
 
LVL 1

Expert Comment

by:Simon-H
ID: 33684178
sorry - please ignore that last comment. wrong thread!
0
[Video] Oticon Case Study

Open office environments can create the dynamics for innovation, but they also bring some challenges. With over 1,000 employees in an open office, Oticon needed a solution that would preserve the environment while mitigating disruptive background noises.

Watch how they did it.

 

Author Comment

by:clcinc
ID: 33684213
LOL, I was wondering!

I have three CSS files.  I didnt design the site so I'm not sure which one you need... Here they are:
http://clcinc.org/styles-home.css
http://clcinc.org/styles-shared.css
http://clcinc.org/styles-template.css

I would like to apply this button to all pages on the site after fixing it.  Thank you
0
 
LVL 14

Expert Comment

by:Daniel Junges
ID: 33684256
this <span> tag will help:

<span style="top:-40px;position:relative;">      
  <form 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="FXUKJMBZQE76W">
  <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit"  align="right" alt="PayPal -   The safer, easier way to pay online!">
   <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
   </form>
</span>  
0
 
LVL 2

Accepted Solution

by:
branaf earned 2000 total points
ID: 33684272
<form 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="FXUKJMBZQE76W">
  <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit"  align="right" alt="PayPal -   The safer, easier way to pay online!">
   <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
   </form>

Try putting the img tag in a span tag with class="border"
0
 
LVL 1

Expert Comment

by:Simon-H
ID: 33684400
Thanks for that .. in "styles-shared.css" try adding the below;


.topLinks a .donate{
      border: 0px;
      padding: 2px 4px 2px 4px;
}



you will then need to add "<span class="donate"> and </span> around your button, so try;

<span class="donate">  <form 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="FXUKJMBZQE76W">
  <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit"  align="right" alt="PayPal -   The safer, easier way to pay online!">
   <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
   </form></span>



Let me know how you get on with that.

Regards,
0
 

Author Comment

by:clcinc
ID: 33684603
@Simon-H
Thanks, but that did not seem to work.  I would really appreciate some more help here.

 I am using dreamweaver and used the Design window to drag and drop the button to the appropriate place.  As you can see @ www.clcinc.org .  But now the link does not execute, because it only moves the image tag, not the code.  and when I move the paypal code up to where I put the image code, it just puts the whole button right back where it was to begin with...

might it be easier to download the html and test it yourself?  Thanks a million fellas

0
 
LVL 14

Expert Comment

by:Daniel Junges
ID: 33684676
have you tried to put the span arround the form ?

<span style="top:-40px;position:relative;"> <form action=... </span>
0
 

Author Comment

by:clcinc
ID: 33684711
I guess I messed something up here.  If some of you all would go look at my site, you'll see that the footer is messed up.  I guess i did something wrong....  
0
 

Author Comment

by:clcinc
ID: 33684726
Please look at my shared css and see if the problem is in there.  The footer has moved, and is no longer at the bottom
0
 

Author Comment

by:clcinc
ID: 33684776
Okay, praise the lord for Sonicwall Backups.  I restored the CSS and have got back what I started with.  
0
 

Author Comment

by:clcinc
ID: 33684834
@junges
That just scrambles the whole header.  
0
 

Author Comment

by:clcinc
ID: 33718565
I guess no one is going to answer.  please close thread.
0
 
LVL 39

Expert Comment

by:BillDL
ID: 33743111
clcinc

At the moment you have the first line of your Form outside the "topLinks" DIV and the rest of it inside the DIV. Additionally you have not added the closing </FORM> tag for your PayPal <FORM> tag.

Try placing the your box-shaped navigation links inside the Form that contains the PayPal button, and have the form all inside the topLinks DIV.  Perhaps something like this will work for you to keep the button in line with the quick links:

<div id="container">

<div class="topLinks">
<FORM 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="XXXXXXXXXXXXXXXX">
<input type="image" src="etc, etc, etc, etc">
<img alt="" border="0" src="etc, etc, etc">
  <a href="about.htm">About Us</a>
  <a href="events.htm">Events &amp; Classes</a>
  <a href="contact.htm">Contact Us</a>
</FORM>
<!--End topLinks -->
</div>

<!-- ##### BEGIN NAVIGATION BAR ##### -->
0

Featured Post

Enhanced Intelligibility Without Cable Clutter

Challenge: The ESA office in Brussels wanted a reliable audio conference system for video conferences. Their requirement - No participant must be left out from the conference and the audio quality must not be compromised.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month16 days, 15 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question