I’m lookinf for some help with My Donation Page
I’ve added a paypal button in a form but as you can see there’s loads of space betwwn the heading and the paragrapgh ( this is our donation centre ) and also the amount of donation and button should be side by side and I can’t figure out how to fix these two issues.
many thanks in advance if you can help me with this
Do you have it fixed width for iPhone? Because I can’t zoom so I can’t see
not sure, can anyone take a look on normal screen?
I just took a gander at it. I can see why you want it fixed.
I don’t think you’ve provided enough info to get the answer you desire. As I looked at the page source, I saw that there were multiple style sheets linked to this one page alone, also with some styles inside the head tag.
Can you either post some CSS code you believe is associated with this page or tell us which stylesheet is associated with this page content?
Also, I think your page’s markup is very hard to follow.
yes I’m getting very confused with it as there is php and many other php pages involved. I havn’t been able to get the donation centre working yet ( I’ve posted for help on it in the php section but I think I’m asking too much and no one has replied ) but as far as the style goes I’ve posted here.
Perhaps I can direct you to the tutorial I’m trying to follow as it gives all the the markup and css there. I have Placed all the css though in my style.css so It shouldn’t really have any others linked to. I’m trying to get rid of the space between the heading that says: " This is our Donation Center…" and the paypal button and also the paypal button and the amount to donate should be side by side.
The tutorual I’m following is http://tutorialzine.com/2010/05/donation-center-php-mysql-paypal-api/
The hidden inputs are surrounded by <p> tags and peppered with <br> tags.
That extends the vertical height.
Eliminate both to reduce the amount of vertical space being used.
hm, it’s strange because looking into my code in the html input screen i cannot see any <p> or <br/> tage. Here is my code:
<div class=“lightSection”>
<h3>Asalamu Alaikum wa Rahmatulaah!</h3>
<p>This is our Donation Center…</p>
<!-- The PayPal Donation Button –>
<form action=“[insert_php] echo $payPalURL[/insert_php]” method=“post” class=“payPalForm”>
<div>
<input type=“hidden” name=“cmd” value=“_donations” />
<input type=“hidden” name=“item_name” value=“Donation” />
<!-- Your PayPal email: –>
<input type=“hidden” name=“business” value=“[insert_php] echo $myPayPalEmail[/insert_php]”/>
<!-- PayPal will send an IPN notification to this URL: –>
<input type=“hidden” name=“notify_url” value=“[insert_php] echo $url.‘http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/ipn.php’[/insert_php]” />
<!-- The return page to which the user is navigated after the donations is complete: –>
<input type=“hidden” name=“return” value=“[insert_php] echo $url.‘http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/thankyou.php’[insert_php]” />
<!-- Signifies that the transaction data will be passed to the return page by POST: –>
<input type=“hidden” name=“rm” value=“2” />
<!-- General configuration variables for the paypal landing page. –>
<input type=“hidden” name=“no_note” value=“1” />
<input type=“hidden” name=“cbt” value=“Go Back To The Site” />
<input type=“hidden” name=“no_shipping” value=“1” />
<input type=“hidden” name=“lc” value=“US” />
<input type=“hidden” name=“currency_code” value=“USD” />
<!-- The amount of the transaction: –>
<select name=“amount”>
<option value=“50”>$50</option>
<option value=“20”>$20</option>
<option value=“10” selected=“selected”>$10</option>
<option value=“5”>$5</option>
<option value=“2”>$2</option>
<option value=“1”>$1</option>
</select>
<input type=“hidden” name=“bn” value=“PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest” />
<!-- You can change the image of the button: –>
<input type=“image” src=“https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif” name=“submit” alt=“PayPal - The safer, easier way to pay online!” /><img alt=“” src=“https://www.paypal.com/en_US/i/scr/pixel.gif” width=“1” height=“1” />
</div>
</form>
</div>
Does your markup validate? (validator.w3.org)
It looks like there may be an unclosed div tag in there.
Also, you forgot to enclose your markup inside code tags in your last post, so it would appear like this
<!DOCTYPE html>
<head>
<link href="mystylesheet.css" rel="stylesheet" media="screen, projection, tv">
<title>My Page</title>
</head>
hantaah,
Two things. First…
When posting code in a message, please surround that code with [color=blue][noparse]
[/noparse][/color] tags:
[color=blue][noparse]
[/noparse][/color]
paste your code here
[color=blue][noparse]
[/noparse][/color]
Without these tags, code posted in a message loses its formatting and some characters in the proportionally spaced font are hard to spot.
Using [noparse]
[/noparse] tags makes code much easier for us to read and potentially saves vertical space in the message.
If it is not convenient to type the [noparse]
[/noparse] tags, then try this instead:
At the bottom right of the message box is an orange button that says "Go Advanced".
Click that button.
The one row of command buttons in the "Quick Reply" box will be replaced with three rows of buttons.
The # symbol near the right end of the middle row inserts the [noparse]
[/noparse] tags for you.
The php symbol at the very right end inserts [noparse]
[/noparse] tags.
In all cases, the generic [noparse]
[/noparse] tags are far more helpful than none at all.
Second…
To see what we see, please use an ordinary browser and internet connection to access your web page. Right-click in the browser window and select “View Source” (or whatever command your browser uses). You will see the stray tags that I mentioned.
Looking at your code as isolated files instead of looking at it as a combined file (like a user sees it) gives an incomplete picture of how your site is being presented to the world.
I suggest accessing the site via a “real world” URL instead of through the eyes of your development environment to get a picture of how it is working for users (and how we see it 
).
Does that make sense?
PS: SOME of the <p> tags have been removed, but even more <br /> tags remain in their place. There are a bunch of active <p> tag pairs around commented lines throughout the page (note the commented line just above the form in this screen shot). These contribute to the height of the page.
Many thanks for your time and patience and I will make sure to add code via the code tags next time. The annoying thing is that as I am using wordpress the <p> and <b/> tags are autmatically being added for some reason and although I can see this code via the source code I have no idea how to access this shown code otherwise. Using the html editor does not show them up. It’s very annoying!!!
Anyway I’ve been playing around with it for days and managed to figure out that it is best to use the .php file for the donation centre ( and not use the wordpress html editor ) and everything works out fine. I have come across this issue of added <p> and<br/> tags before and even come across it where it was not correctly closing <p> tags. I opened a post via the wordpress forum but there was no answer.
Again thanks for your help and I hope you like my finished Donation Centre
I’m now off to post my result in the php section and hope it benefits someone struggling with php like myself.
Looks like you have this wild page well under control now
Thanks very much for the feedback!