Printable Version of Topic

Posted by: Biff_Reseda Apr 12 2007, 09:50 AM

I would like to position a bunch of custom paypal gifs along a specific row that falls directly beneath a jpg image which I have already formatted to correctly fit into the web page in question.

Before creating the custom gifs for each paypal, I created a single correctly formatted "horizontal segment button row" jpg (which it should be noted also consists of regular image file non-paypal buttons.)
As I understand it, I need help with 2 things:

a) do I simply cut the horizontal segment row into its constituent jpgs first?

b) once all the jpeg's have been broken into their respective "regular" and "paypal button" segments, how do I stitch them all back together along this single row so that they directly follow one another (without any space in between them?)

Per the sample code below, I originally set the code so that the nonpaypal and paypal icons are stacked along a center column separated by a line space (and subsequent single line spaces) beneath the image.jpg file:


<div align="center"><img src="img/image.jpg" alt="" width="460" height="263" border="0"></div>
<p align="center">
<center>
<input type="image" src="img/regular.jpg" border="0" name="submit" alt="regular">
</center>
</p>

<p align="center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<center>
<input type="image" src="img/subscribe1.jpg" border="0" name="submit" alt="1">
</center>
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----etcetc-----END PKCS7-----
">
</form>
</p>

<p align="center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<center>
<input type="image" src="img/subscribe2.jpg" border="0" name="submit" alt="2">
</center>
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----etcetc-----END PKCS7-----
">
</form>
</p>

This work is my first attempt at coding in HTML; as stated, I'd now like to reassemble/line up all of these jpgs directly below the image.jpg (i.e. no line space separation this time!) along a single row that also matches the width of the image.jpg --- please let me know?

Many thanks!

Biff

Posted by: Darin McGrew Apr 12 2007, 11:53 AM

Please see the FAQ entry http://www.htmlhelp.com/faq/html/docs.html#about-html

Posted by: Darin McGrew Apr 12 2007, 11:54 AM

You could use a single large image with an http://htmlhelp.com/reference/html40/special/map.html. Another approach is to use a http://htmlhelp.com/reference/html40/tables/table.html to arrange the images.

Posted by: Biff_Reseda Apr 12 2007, 12:12 PM

Thanks Darin,

I will try creating a single-row table. Does this function decay with increasing columns?

Regards,

Biff

Posted by: Darin McGrew Apr 12 2007, 08:17 PM

In what way would it "decay"?

Posted by: Biff_Reseda Apr 13 2007, 08:36 AM

Hi Darin,

Looking at the task and hand, the total available width of the column relative to total cells that I wanted to use would have made things too cluttered. So I've abadoned this as an approach.

BUT I have another question for you: after making the new adjustments to the page, I uploaded it to the web server and typed in the new URL: everything formatted correctly and functioned perfectly EXCEPT for an .html# in the URL when I clicked on a pop-up window from the page.

What does this mean?

AND please advise as to what is required to fully integrate the page into the fully functioning site in order to make sure that this new page "falls on the correct page number" i.e. is found in the spot that I want it to be found? Will the code associated with the left menu navigational items ensure correct page order?

Many thanks!!

Biff

Posted by: pandy Apr 13 2007, 09:26 AM

The "#" probably means you have used a hash sign as the value of href (bad) and that your javascript isn't correct.

What do you mean, page order? Are you printing a book?
Jokes aside, I have a feeling you complicate things. It's hard to give advice without a page to look at. It isn't all that clear to me what you want to do either.

Posted by: Biff_Reseda Apr 13 2007, 09:34 AM

Well, you're correct on the overcomplication point--lucky that I'm able to self-correct some of the time :-)
I'm just looking to add this new page as the concluding page to the site...how do I ensure/specify that it adheres to that overall order?

Posted by: Biff_Reseda Apr 13 2007, 10:21 AM

[quote name='Biff_Reseda' date='Apr 13 2007, 10:34 AM' post='11113']
[quote name='pandy' post='11112' date='Apr 13 2007, 10:26 AM']

//1. The "#" probably means you have used a hash sign as the value of href (bad) and that your javascript isn't correct.

//2. What do you mean, page order? Are you printing a book?
Jokes aside, I have a feeling you complicate things. It's hard to give advice without a page to look at. It isn't all that clear to me what you want to do either.

1. Thanks very much for your input Pandy. You are absolutely correct as it pertains to using the hash sign for href:

<a href="#" onclick="java script:openPopupWindow('terms.html')" class="text">Terms and Conditions of Service</a>

Whenever I select the link, the URL in question changes to .html# but the site functions flawlessly outside of this? Why is this bad?

2. Well, you're correct on the overcomplication point--lucky that I'm able to self-correct some of the time :-)
I'm just looking to add this new page as the concluding page to the site...how do I ensure/specify that it adheres to that overall order?

Posted by: pandy Apr 13 2007, 10:24 AM

Since you still haven't shown us the page I can but guess... My guess is that you open the poup like this.
<a href="#" onclick="window.open(...)">Click</a>
If JS is availabale that will cause both the pop-up to open and the HTML link to be followed through. The hash sign is usually used with a named anchor in which case the hash + the name with be suffixed to the URL in the adressbar. Like you can see in this link: http://htmlhelp.com/faq/html/links.html#named-anchor . You have to kill the link event with a 'return false' statement. You can read about how to do it correctly here: http://htmlhelp.com/faq/html/links.html#window-specify . Follow the link to the Evolt article too.

As explained in the above FAQ and in the Evolt article, without JS users get zilch. You should use the URL to the page shown in the popup as the value of href.




Well, that's the point. Web pages have no order. A bunch of links on a page can have an order, but you can't know in what order a user will click those links or if he clicks at all. No one will read page after page in the order you've written the links. So - what do you mean with "order"?

Posted by: Biff_Reseda Apr 13 2007, 10:50 AM

[quote name='pandy' date='Apr 13 2007, 11:24 AM' post='11115']

===============================================================================
(OK; thanks for your "web page order" clarification--no such concept exists other than my "suggested link order.")
===============================================================================


Now, as it pertains to the # assignment for href. You're absolutely correct. Here's my code:

<a href="#" onclick="java script:openPopupWindow('terms.html')" class="text">Terms and Conditions of Service</a>

Whenever I select the link, the URL in question simply adds the # to .html such that .html# but the site and popup function flawlessly despite this? Why is the appearance of # tagged at the end of the URL bad?

Posted by: pandy Apr 13 2007, 11:33 AM

Because it leads nowhere. They explain that in the FAQ and the article I linked to.

Or even simpler

'this.href' refers to the value of the htref attribute. This way everyone gets something and the page won't jump when you click the link to the pupup.

You should never use the 'javascript:' syntax. The way you've used it is also plain wrong. Read the article and you'll understand better how this works.

Posted by: Biff_Reseda Apr 13 2007, 12:07 PM

Thanks again Pandy. Although I may have only weeks of coding/HTML experience, you've helped this Newbie tremendously....

Once again, great job!

Posted by: Darin McGrew Apr 13 2007, 12:08 PM

Wow... What a flashback to David Siegel's "Killer Web Sites" philosophy.

As pandy explained, web sites don't have an "order". There's no way to inflict "entrance pages" or "exit pages" upon users.

Posted by: Biff_Reseda Apr 13 2007, 12:14 PM

Hi Darin, I've already come to this conclusion earlier...thanks again.

Posted by: kylerioux Jul 2 2008, 08:10 AM

just wanted to thank the author of this thread for the DIV align info at the top. for the longest time i couldnt get my paypal button to center, now it does. thanks again.

http://www.topcax.com