[smartbusiness]

Hi,

I desparately need some assistance with text and button alignment in tables in my webpage. I have spent the last 24 hours looking for answers on a number of forums including yours and through Google and have tried every possibillity that has been suggested including additions to the template css files to no avail, nothing has worked.

The images are fine, they seem to be okay, it is the table that contains the Title, Price, Purchase button under each image that is the problem. I am using this same editor and Joomla extension on another one of my websites and have had no problems with it.


You are my last resort, I have attached the source files of the section that is giving me the problem in the hope that you can steer me in the right direction. My site is offline at the moment, but I can put it online for a short time if necessary.

I would sincerely appreciate any help you can give me with this problem

Kindest Regards

[Hughv]

I guess you're talking about Floral Burgundy and Monkey Business, which have too many letters to fit in the available space. You could just change the name.
Ask a mod to move this to the web design forum where you'll get answers from smarter people.
You should change this attachment to an htm or txt document, as docx can't be read by many people, and it has to be opened in an html editor/viewer anyway.

[smartbusiness]

Thank You hughv

I wasn't certain where to post this and the list of doc'x for attachments did include docx. I will ask this to be moved. The titles were not the problem but the prices and buttons under the titles. However, I thank you for responding and I will try elsewhere

Kindest Regards

[Hughv]

Well, this page looks fine in IE, but the two I mentioned are mis-aligned in FF, and that's because of the text. Maybe you're referring to some other problem?

Use the 'report' button to get a mod's attention.

[smartbusiness]

Thank You Hughv

The text is okay but the misalignment the 3 lines which include the text, the price and the 'Buy Now' button. I am trying to have them 'center aligned' under the image. I will use the 'report' button to get the mod's attention as you suggest. Once again many thanks.
Regards Marion

[Hughv]

They're all center aligned when I look at them.
Do you mean the last 3 items starting with "WOW"?

[smartbusiness]

Hi again Hugh,

Currently my site is offline but I will change that within the next few minutes so that you can see what I am getting at. YOu will see under each template image there are the three lines 'The name of the Template' 'the price of the template' and the 'Pay Now' button. The website is http://www.websitesbydesign.net

I appreciate the help you are giving me.

[smartbusiness]

Sorry Hughv forgot to provide the article extension

http://www.websitesbydesign.net/Temp...templates.html

[Hughv]

Interesting. The code snippet you provided doesn't do that. It aligns perfectly, so the problem lies elsewhere. I'll check it in a second, but I'm attaching a screen capture.

[smartbusiness]

Thanks Hughv, looks great there, that's strange?????

[Hughv]

My guess is you have a css (style) problem, but I'm not up to wading through all that HTML.
Get this moved and the pros can probably tell you what's going on.

[smartbusiness]

Many Thanks Hughv your help is much appreciated
All the best

[tomdkat]

Ok, you have an absolute nested table mess going on here. You need to scrap ALL of those nested tables (what you posted in your file above) and make a simple 4x3 HTML table.

Here is a starting point for you:

<table cellspacing="1" cellpadding="1" width="200" border="1">
<tr>
	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>
	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>
	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>
	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>
</tr>
</table>

Note each cell has EVERYTHING for that template in it. The above will define one row. To make the other three rows, copy that ENTIRE ROW and replicate it as necessary.

Once the cells are modified with the individual template info and all looks well, you can turn off the table border.

Good luck!

EDIT: Be sure to add in the hidden form fields I left out of my example above.

Peace...

[smartbusiness]

Hi Tomkat,

Sorry for the delay in responding to your post.

I like the neat layout your code provides however, the whole formatting is still giving me grief.

I know very little about coding as you can see, therefore I rely on extensions for the CMS I use to give me the results I am looking for.

The title, price and 'Pay Now' button is an extension that goes directly to Paypal and so I only put the generated link in to make it all work for me. But as you can see there is something not right somewhere when I replace your title and price and the 'submit query' with the generated link, it throws the entire thing out of alignment, well my end it does. I use this extension in another of my websites and it aligns correctly but here is all over the place.

I will leave the website online so that you are better able to see what I mean. Go to the Test Page tab in the top menu, on the right and you will then be able to see three out of the four tables with images and 'paynow' buttons and how displaced they are.

I have over 200 images and downloads to put into several websites and so I really need to find a solution.

http://www.websitesbydesign.net

Many thanks for the help

[Hughv]

Give us the link to the other site where it works.