X-Cart forums - Need help centering...really :)

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Need help centering...really :) (https://forum.x-cart.com/showthread.php?t=8334)

Need help centering...really :)

I'm not an html dummy but for the life of me I can't figure out how to center my store. I have the table in the header template set to align="center" with a width of 750 but it's not working. Also the store front appears different on different browers. Using Mozilla Firefox my entire store front is aligned on the left side. With IE the header is centered but the rest stretches across the whole page ignoring the 750 table width.

I'd like the whole set up centered on the page with a width of 750. Where do I set this option? Template? CSS file? I couldnt' find it. Does that make any sense? I just need to know which template sets this option.

I feel like an idiot because I know this must be EASY but I can't figure it out. :oops:

version 3.5.3 GOLD

Can you post your skin1/customer/home.tpl here please.

Please also make sure you wrap it in [code] tags.

Here you go, thanks for looking! :)

Code:

{* $Id: home.tpl,v 1.54 2003/11/17 08:43:32 svowl Exp $ *}

{ config_load file="$skin_config" }

<html>

<head>

<title>My Store Name 

{if $main eq "catalog"}

        {if $location eq ""}  - Home

        {else}

        {strip}

        {section name=position loop=$location start=0 }

        {if %position.last% eq "true"} - {$location[position].0|escape}{/if}

        {/section}

        {/strip}

        {/if}

{elseif $main eq "product"}

        {if $product.product ne ''} - {$product.product}{/if}

{elseif $main eq "help"}

- Help section

{elseif $main eq "cart"}

- Your Shopping Cart

{elseif $main eq "checkout"}

- Checkout

{elseif $main eq "order_message"}

- Thank you for your order

{elseif $main eq "wishlist"}

- Wishlist

{elseif $main eq "giftcert"}

- Gift certificates

{/if}

</title>

{ include file="meta.tpl" }

<link rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">

</head>

<body LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

{ include file="rectangle_top.tpl" }

{ include file="head.tpl" }



<table border=0 width="100%" cellpadding=0 cellspacing=0 align="center">

<tr>

<td width=6></td>

<td width=150 valign=top>

{ include file="customer/categories.tpl" }






{if $active_modules.Bestsellers ne "" and $config.Modules.bestsellers_menu eq "Y"}

{ include file="modules/Bestsellers/menu_bestsellers.tpl" }

{/if}

{include file="customer/special.tpl"}

{ include file="help.tpl" }

</td>

<td width=20></td>

<td valign=top>



{include file="customer/home_main.tpl"}





</td>

<td width=20></td>

<td width=150 valign=top>

{ include file="customer/menu_cart.tpl" }






{if $login eq "" }

{ include file="auth.tpl" }






{else}

{ include file="authbox.tpl" }






{/if}

{ include file="news.tpl" }

{if $active_modules.Interneka ne ""}

{ include file="modules/Interneka/menu_interneka.tpl" }

{/if}






{ include file="poweredby.tpl" }






</td>

<td width=6></td>

</tr>

</table>

{ include file="rectangle_bottom.tpl" }

</body>

</html>

Try wrapping your bulk of home.tpl in a fixed width table that is centered like so.

Code:

<body LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> 

{ include file="rectangle_top.tpl" } 

{ include file="head.tpl" }

becomes

Code:

<body LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> 

<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td>{ include file="rectangle_top.tpl" } 

{ include file="head.tpl" }

and at the bottom

Code:

{ include file="poweredby.tpl" } 



 

</td> 

<td width=6></td> 

</tr> 

</table> 

{ include file="rectangle_bottom.tpl" }

</body> 

</html>

becomes

Code:

{ include file="poweredby.tpl" } 



 

</td> 

<td width=6></td> 

</tr> 

</table> 

{ include file="rectangle_bottom.tpl" }</td>

  </tr>

</table>

</body> 

</html>

and that forum signature needs a version #! ;)

simple way ...

edit rectangle_top.tpl

Code:

{* $Id: rectangle_top.tpl,v 1.7 2003/04/09 07:41:05 olga Exp $ *}

<TABLE align=center border=0 cellPadding=0 cellSpacing=0 width="750" height="100%">

  <TR>

    <TD valign=top>

:wink:

I made the edit suggested by Shan (I'm all for the easy way) and my storefront is now centered in IE but still resides on the left in Firefox.

Getting closer, just not there complete yet.

Thanks for the help and suggestions. Any other ideas?

Just curious, is my site centered in firefox ( http://www.bcsengineering.com/store/catalog )? I've checked it in Mozilla, Opera and IE but I don't have firefox installed.

I do this for my centering

Code:

<table border=0 width=85% cellpadding=0 cellspacing=0 align="center">

Carrie

Yes it IS centered. Where did you add that table tag?

I don't remember why at the time, but I commented out rectangle_top.tpl in customer/home.tpl and rearranged some things. So here is a snip of my home.tpl

Code:

<body LEFTMARGIN=0 TOPMARGIN=5 RIGHTMARGIN=0 BOTTOMMARGIN=0>







<table border=0 width=85% cellpadding=0 cellspacing=0 align="center">

        <TR>

                <td colspan=7>{ include file="head.tpl" }

                </td>

        </tr>

I believe you may need to change the end of home.tpl and/or rectangle_bottom.tpl to reflect the change of the table structure. So I have the head.tpl included within the main page's table. I think what adpboss suggested was basically what I did in the end, I just did it in a different method.

Hope this helps.

Carrie

Thanks, Carrie! I'll check it out tomorrow.