Image/Link Problems, Got Images Aligned, But Link Broke.. Options

[Miker1029]

I'm pretty much a Newb to CSS.PHP.HTML, Been running this forum for 6 Months and can Usually get done what I want by Googling But this one got me Lost, And The Complexity kinda makes google useless (for me anyway)...

Problem Is, I have 2 Donate Buttons for PayPal On My Site, The code I placed in the footer, I wanted One On The Bottom Left and One On the Bottom right, On the Same Spacing, So I finally was able to get it that way but it broke the Link for the Images and For the Life of me I can't figure out how to get the links back, when I try different things It generally puts An Input box where the Image is supposed to be and if you hit enter on it it'll take you to PayPal 8-)..

Here's the Code: any help would be Great!!!

Also I want the Google Tranbslate Button In the Middle of Both Images, But it's not even showing up...

CODE

<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="M8FV9FTHWJDHA">
<p style="float: left; font-size: 7pt; text-align: center; width: 10%; margin-left: %10; margin-bottom: 0.5em;"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" style="width: 100% ">UNOFFICIAL<br> <a href="http://android-x86.net">Android - X86 Forums</a> <br>Owner:<br><a href="mailto:miker1029@android-x86.net?Subject="" target="_top">Michael Ross</a>
</p></form>

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

<script type="text/javascript" <center> src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<meta name="google-translate-customization" content="5973742b797792d-f3e130e97fbc8b58-g27d81e3117a3defb-1e"></meta>
</center>

<form xmlns="http://www.w3.org/1999/xhtml"
action="https://www.paypal.com/cgi-bin/webscr" method="post"
target="_top">
<input name="cmd" type="hidden" value="_donations" />
<input name="business" type="hidden" value="cwhuang@linux.org.tw" />
<input name="lc" type="hidden" value="US" />
<input name="item_name" type="hidden" value="Android x86" />
<input name="no_note" type="hidden" value="0" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden"
value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest" />
<p style="float: right; font-size: 7pt; text-align: center; width: 10%;margin-right: 0%; margin-bottom: 0.5em;"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" style="width: 100% ">OFFICIAL<br> <a href="http://android-x86.org">Android-x86 Project</a> <br>Developer/Owner:<br><a href="mailto:cwhuang@android-x86.org?Subject="" target="_top">Chih-Wei Huang</a></p></form>



<p style="clear: both;">

Here's the link to the Site if you need to see what's going on: http://www.android-x86.net

Thanks In Advance,

Mike

[pandy]

The buttons are just images in paragraphs. They won't be clickable or interact with the form in any way. I would use input type="image" for those buttons, probably what you did before.

http://htmlhelp.com/reference/html40/forms/input.html

[Miker1029]

The buttons are just images in paragraphs. They won't be clickable or interact with the form in any way. I would use input type="image" for those buttons, probably what you did before.

http://htmlhelp.com/reference/html40/forms/input.html

Ok I kinda see where the Link would help to send the assigned information, and Yes I understand that The Image is just a static Image, But in the Original Code the Image was the Link to send the Pre-Assigned Form Info to Paypal to Commence the Donation to the Proper Account and what not that they use...

My problem was in the Original code, You Have the Paypal Button that's Click-able, But when I tried to Align them I can't get them straight across...One High Left one low right..

So I removed the Linkable part of the Image and Then Concentrated on Getting the Pictures Aligned, Figuring hey adding the Link back in should be a Snap, LOL, Nope

So While going in to Edit Where the Pictures Are Aligned and trying to Just make the Picture a Click-able Link I get This:



If I click in the Box and Hit Enter, It goes to Paypal As it should....

LIke I said I'm Kinda New, Do you have an Idea what to add just to turn the "Image" Back To A Click-able image, Here Is the Original Code, I think this has something to do with the "Form" command...

Original code exactly from paypal:

CODE

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="56DZEYGHKFYS2">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_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>

Heck I don't care how the Info Get's there, so long as the images are lined up and click-able...

Thanks again, And If it wasn't for all this "<form> <input type>" I don't think I'd have a Problem

Mike

[Miker1029]

Ok I got it, Now if I can Just add the Text Back, LOL, Funny I've searched this for weeks, and finally found the answer, Seems to always work "AFTER" I break down and ask, But your Link Pointed me in the right direction!! Made me look at it Differently...

CODE

<table align="left">
<tbody>
<tr>
<td>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="56DZEYGHKFYS2">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_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>

</td>
</tr>
</tbody>
</table>

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

<script type="text/javascript" <center> src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<meta name="google-translate-customization" content="5973742b797792d-f3e130e97fbc8b58-g27d81e3117a3defb-1e"></meta>
</center>

<table align="right">
<tbody>
<tr>
<td>

<form xmlns="http://www.w3.org/1999/xhtml"
action="https://www.paypal.com/cgi-bin/webscr" method="post"
target="_top">
<input name="cmd" type="hidden" value="_donations" />
<input name="business" type="hidden" value="cwhuang@linux.org.tw" />
<input name="lc" type="hidden" value="US" />
<input name="item_name" type="hidden" value="Android x86" />
<input name="no_note" type="hidden" value="0" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden"
value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_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>

</td>
</tr>
</tbody>
</table>

Might be back if I can't get the text In!

Thanks Again,

Mike

[pandy]

There you go!

Just to nitpick, there is no link in the normal sense. The image input acts as submit button and when it's clicked the form is submitted.

[Miker1029]

There you go!

Just to nitpick, there is no link in the normal sense. The image input acts as submit button and when it's clicked the form is submitted.

Ya I see what your saying, My big thing was the form/table parts... I kinda got it the way I want it, Can't get the Google Translate Centered, (Funny Part is where the Admin Link Text is in the Center Is about where I want the Translate button), and the Words Under the Buttons I want centered... Project For Another day....



And That's Live!

Thanks Alot!

Mike

[pandy]

What have you done to center it? Easiest way seems to be to apply text-align: center to div#google_translate_element .

See http://www.w3.org/Style/Examples/007/center.html .

[Miker1029]

What have you done to center it? Easiest way seems to be to apply text-align: center to div#google_translate_element .

See http://www.w3.org/Style/Examples/007/center.html .

Tried <center> <p stlye = align :center></p> Haven't tried div #, But it sounds familiar, Before I had the Donate Links I had it centered, LOL.. I'll try it.

Thanks

Mike

[pandy]

I meant that you in your style sheet should add that declaration for the DIV with the id 'google_translate_element'.

CENTER ought to work, but it's outdated and you shouldn't use it.

[Miker1029]

I meant that you in your style sheet should add that declaration for the DIV with the id 'google_translate_element'.

CENTER ought to work, but it's outdated and you shouldn't use it.

Ok I got it, Perfect....

CODE

<table cellpadding="0" cellspacing="0" width="133%" border="0">

<td width="33%">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="56DZEYGHKFYS2">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_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"></td>

</form>

<td width="33%">

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" align="center"></script>
</td>

<td width="33%">

<form xmlns="http://www.w3.org/1999/xhtml"
action="https://www.paypal.com/cgi-bin/webscr" method="post"
target="_top">
<input name="cmd" type="hidden" value="_donations" />
<input name="business" type="hidden" value="cwhuang@linux.org.tw" />
<input name="lc" type="hidden" value="US" />
<input name="item_name" type="hidden" value="Android x86" />
<input name="no_note" type="hidden" value="0" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden"
value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_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"></td>

</form>

</tr>
</tbody>
</table>
<p style="float: left; font-size: 7pt; text-align: center; width: 10%; margin-left: %10; margin-bottom: 0.5em;">UNOFFICIAL<br> <a href="http://android-x86.net">Android - X86 Forums</a> <br>Owner:<br><a href="mailto:miker1029@android-x86.net?Subject="" target="_top">Michael Ross</a>

<p style="float: right; font-size: 7pt; text-align: center; width: 10%;margin-right: 1%; margin-bottom: 0.5em;">OFFICIAL<br> <a href="http://android-x86.org">Android-x86 Project</a> <br>Developer/Owner:<br><a href="mailto:cwhuang@android-x86.org?Subject="" target="_top">Chih-Wei Huang</a></p>

</div>

I do have I question tho, Am I mixing apples and oranges?? When I tried to do the Text Alignment Above I tried to use <table cellpadding="0" cellspacing="0" width="100%" border="0"> and <td=width:"50%"> thinking that the text would align 50/50 and it wouldn't work I had to go back to <p style=>..

So Am I correct In assuming the The Table is mainly used for Pictures/Images, And The style is for Text?? In my searching I did see table used for text, Like to Line it all up on the right hand side....

Does this look Proper?

Was up at 5am, Starting this!!

And I do Appreciate all your help, I don't think I would have got it with out the input I received here, Page Bookmarked and Saved, I'll Be back, I'm Sure! LOL..

Mike

[pandy]

You can put whatever you like in a table. But tables are seldom used for layout anymore, as they aren't needed. They were used for layout in the old days, before CSS, because there was nothing else.

[Miker1029]

You can put whatever you like in a table. But tables are seldom used for layout anymore, as they aren't needed. They were used for layout in the old days, before CSS, because there was nothing else.

Ya I've been getting that from the searches, My problem is, I'm using phpbb3, And They Got it (I Guess) pretty much working, tight with CSS, PHP, And HTML Integration, My fear is if I go In And Mess With CSS I'm gonna mess the whole thing up....

But Your Right, I'm Gonna Have to figure it, Can't keep just doing "What Works"...

Mike