can anyone tell me how to align the products table in products.tpl?

[xex]

It looks like my post disappeared so I am reposting.

 

Hi,

 

I would like to center the products table in my comparison/products.tpl file.

 

I have tried many things but no luck. The problem of course is that I am not a programmer and I am shooting in the dark. Here is the last thing that I tried:

 

 

I added: <td align="center"> randomly where I though the table started and then added </td> where it looks like it ended at the end of the document, but unfortunately no luck.

 

Can anyone tell me how to center??

 

Thanks a MILLION!

 

Cheers,

Tres

 

 

 

<script type="text/javascript" src="includes/jscript/jqueryui.js"></script>

<script type="text/javascript" src="templates/orderforms/{$carttpl}/js/main.js"></script>

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/style.css" />

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/uistyle.css" />

 

<td align="center"><div id="order-comparison">

 

<h1>{$LANG.cartbrowse}</h1>

 

<div class="cartcats">

{foreach key=num item=productgroup from=$productgroups}

{if $gid eq $productgroup.gid}

{$productgroup.name} |

{else}

<a href="{$smarty.server.PHP_SELF}?gid={$productgroup.gid}">{$productgroup.name}</a> |

{/if}

{/foreach}

[bear]

Putting random TD start tags within the code won't fix that. For a table cell to do anything, it needs to be inside a table and a row, as well as having the proper opening and closing tags...but this design isn't done with tables. It's done with CSS (cascading style sheets). To center with divs requires a bit of effort, such as having it in a container that has a width defined, then telling it to use margins to center.

Big fun if you don't know CSS.

 

Some Google goodness.

[durangod]

this should work this is what i did.

 

open root/templates/orderform/comparison/style.css and find this

 

 

#order-comparison .prodtablecol {
   float: left;
   width: 20%; 
   font-size: 14px;
   text-align: center;
}

 

 

change it to this

 

 

#order-comparison .prodtablecol {
   float: left;
   width: 33%; /* was 20 - changes width of colums in package display on order menu */
   font-size: 14px;
   text-align: center;
}

 

i just changed it to 33% to split the space up for three products.

 

let me know if that works for ya.

[xex]

Hi Bear and Durangod,

 

Thanks both of you for your quick and kind messages.

 

I tried putting in these two pieces of code based on both of your help, but I couldnt align in the center yet. I am guessing that I have put both tries in the wrong place in the product.ptl page. Should i place the code somewhere else in the page, or am I missing something else?

 

I really appreciate your help.

 

Best regards,

Tres

 

 

 

1)

 

<script type="text/javascript" src="includes/jscript/jqueryui.js"></script>

<script type="text/javascript" src="templates/orderforms/{$carttpl}/js/main.js"></script>

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/style.css" />

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/uistyle.css" />

 

#order-comparison .prodtablecol {

float: left;

width: 33%;

font-size: 14px;

text-align: center;

}

 

<div id="order-comparison">

 

<h1>{$LANG.cartbrowse}</h1>

 

<div class="cartcats">

{foreach key=num item=productgroup from=$productgroups}

{if $gid eq $productgroup.gid}

{$productgroup.name} |

{else}

<a href="{$smarty.server.PHP_SELF}?gid={$productgroup.gid}">{$productgroup.name}</a> |

{/if}

{/foreach}

{if $loggedin}

<a href="{$smarty.server.PHP_SELF}?gid=addons">{$LANG.cartproductaddons}</a> |

{if $renewalsenabled}<a href="{$smarty.server.PHP_SELF}?gid=renewals">{$LANG.domainrenewals}</a> | {/if}

{/if}

{if $registerdomainenabled}<a href="{$smarty.server.PHP_SELF}?a=add&domain=register">{$LANG.registerdomain}</a> | {/if}

{if $transferdomainenabled}<a href="{$smarty.server.PHP_SELF}?a=add&domain=transfer">{$LANG.transferdomain}</a> | {/if}

<a href="{$smarty.server.PHP_SELF}?a=view">{$LANG.viewcart}</a>

</div>

 

 

 

2)

 

<script type="text/javascript" src="includes/jscript/jqueryui.js"></script>

<script type="text/javascript" src="templates/orderforms/{$carttpl}/js/main.js"></script>

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/style.css" />

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/uistyle.css" />

 

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

 

<div id="order-comparison">

 

<h1>{$LANG.cartbrowse}</h1>

 

<div class="cartcats">

{foreach key=num item=productgroup

[bear]

The elements durangod showed you are not to be included in the page, but in the style sheet for the site

 

open root/templates/orderform/comparison/style.css and find this

[durangod]

lol you can lead a horse to water but you cant make them drink lol. Sorry xex just picking on ya lol.. Hope you get it fixed, what i said should work perfect yes if you open the style sheet as i said and not the page.

 

Let us know im sure we can help you further if need be. And forgive my sense of humor jut picken lol

 

open root/templates/orderform/comparison/style.css and find this

[xex]

 

Man, I knew I could be slow, but... I just realized that I didn't read your post very carefully. I plead exhaustion. Really, I just got back from two days of mountain hiking! I swear!

 

Anyway, after you reposted the line that tells me exactly what to do it no uncertain terms, I starting shrinking into my skin.

 

Of course it worked immediately.

 

Thanks... sorry... duh...

 

Anyway, I REALLY appreciate both your guys's help and BTW, I actually appreciate your humor durangod, sometimes you have to dunk my head under the water... I admit it. But I eventually drink.

 

<<snipped>>

 

Cheers,

Tres

 

http://www.xex.asia

Edited May 6, 2012 by bear
removed offer