The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Arranging jpgs and PayPal buttons along one row
Biff_Reseda
post Apr 12 2007, 09:50 AM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



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 huh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 12 2007, 11:53 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
This work is my first attempt at coding in HTML
Please see the FAQ entry Where can I learn about HTML?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 12 2007, 11:54 AM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



You could use a single large image with an image map. Another approach is to use a table to arrange the images.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Biff_Reseda
post Apr 12 2007, 12:12 PM
Post #4


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



QUOTE(Darin McGrew @ Apr 12 2007, 12:54 PM) *

You could use a single large image with an image map. Another approach is to use a table to arrange the images.


Thanks Darin,

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

Regards,

Biff
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 12 2007, 08:17 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



In what way would it "decay"?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Biff_Reseda
post Apr 13 2007, 08:36 AM
Post #6


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



QUOTE(Darin McGrew @ Apr 12 2007, 09:17 PM) *

In what way would it "decay"?


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 13 2007, 09:26 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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? happy.gif
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Biff_Reseda
post Apr 13 2007, 09:34 AM
Post #8


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



QUOTE(pandy @ Apr 13 2007, 10:26 AM) *

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

Thanks very much for your input Pandy. Can you tell me more about incorrect href values? Everything on the page looks and works well except for the .html# that appears after I open up the pop-up? (If I simply go to different pages on the site, I don't get this error...?)

What do you mean, page order? Are you printing a book? happy.gif
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.


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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Biff_Reseda
post Apr 13 2007, 10:21 AM
Post #9


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



[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? happy.gif
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 13 2007, 10:24 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE
Thanks very much for your input Pandy. Can you tell me more about incorrect href values? Everything on the page looks and works well except for the .html# that appears after I open up the pop-up? (If I simply go to different pages on the site, I don't get this error...?)


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.



QUOTE
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?

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"? smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Biff_Reseda
post Apr 13 2007, 10:50 AM
Post #11


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



[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?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 13 2007, 11:33 AM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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

CODE
<a href="terms.html" onclick="openPopupWindow('terms.html'); return false" class="text">Terms and Conditions of Service</a>

Or even simpler
CODE
<a href="terms.html" onclick="openPopupWindow(this.href); return false" class="text">Terms and Conditions of Service</a>

'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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Biff_Reseda
post Apr 13 2007, 12:07 PM
Post #13


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



QUOTE(pandy @ Apr 13 2007, 12:33 PM) *

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

CODE
<a href="terms.html" onclick="openPopupWindow('terms.html'); return false" class="text">Terms and Conditions of Service</a>

Or even simpler
CODE
<a href="terms.html" onclick="openPopupWindow(this.href); return false" class="text">Terms and Conditions of Service</a>

'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 'java script:' syntax. The way you've used it is also plain wrong. Read the article and you'll understand better how this works.


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

Once again, great job!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 13 2007, 12:08 PM
Post #14


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
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?
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Biff_Reseda
post Apr 13 2007, 12:14 PM
Post #15


Newbie
*

Group: Members
Posts: 18
Joined: 12-April 07
Member No.: 2,497



QUOTE(Darin McGrew @ Apr 13 2007, 01:08 PM) *

QUOTE
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?
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.


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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kylerioux
post Jul 2 2008, 08:10 AM
Post #16





Group: Members
Posts: 1
Joined: 2-July 08
Member No.: 6,046



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:07 PM