viewCat to look like index.tpl

[Guest davscot]

I'm trying to get my viewCat.tpl to look like the index.tpl. I can't figure out why the float isn't working right. I copied the index.tpl for the most part. The products should show up 3 across and I'm only getting 1 per row.

Please help!

Here's the code:

<!-- BEGIN: view_cat -->

<div class="boxContent">

<span class="txtContentTitle">{TXT_CAT_TITLE}</span>

<br clear="all" />

<!-- BEGIN: sub_cats -->

<div id="subCats">

	<!-- BEGIN: sub_cats_loop -->

	<span class="subCat">

  <a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault"><img src="{IMG_CATEGORY}" border="0" alt="{TXT_CATEGORY}" /></a><br />

  <a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a> ({NO_PRODUCTS})

	</span>

	<!-- END: sub_cats_loop -->

</div>

<!-- END: sub_cats -->

<br clear="left" />

<!-- BEGIN: cat_img -->

<img src="{IMG_CURENT_CATEGORY}" border="0" alt="{TXT_CURENT_CATEGORY}" />

<!-- END: cat_img -->

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>

<div class="pagination">{PAGINATION}</div>

<!-- BEGIN: productTable -->

<div><table width="100%" border="0"><tr>

  <!-- BEGIN: products -->

  

    <td><div style="float: left; text-align: center; width: 125px; height: 150px;"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" border="0" /></a><br /><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br />

	{TXT_DESC}<br>{TXT_PRICE}

	<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div>

	<div class="txtSale">{TXT_SALE_PRICE}</div>

	

	<form action="{CURRENT_URL}" method="post" name="prod{PRODUCT_ID}">

	<!-- BEGIN: buy_btn -->

	<input type="hidden" name="add" value="{PRODUCT_ID}" />

	<input type="hidden" name="quan" value="1" /><a href="javascript:submitDoc('prod{PRODUCT_ID}');" target="_self" class="txtButton">{BTN_BUY}</a><!-- END: buy_btn --> <a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form>

	

	</div>

	</td>

	</tr>

<!-- END: products -->

</table>

<br clear="all" />

</div>

<!-- END: productTable -->

<!-- BEGIN: noProducts -->

<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->



<div class="pagination">{PAGINATION}</div>

</div>

<!-- END: view_cat -->

[Guest estelle]

You might be interested in Jen's mod that does exactly this.

http://www.grassmeyerdesign.com/cc3skins/i...od&productId=11

[Guest davscot]

Thanks!

[roban]

Or try this:

In the includes/content/index.inc.php find this line:

CODE

for($i=0;$i<count($latestProducts);$i++){

Replace with this code

CODE

$across=4;

$index->assign("TW",100/$across);

for($i=0;$i<count($latestProducts);$i++){

if (!(($i+1) % $across)) {

$index->assign("TXT_TR","</tr><tr>");

} else {

$index->assign("TXT_TR","");

}

####################################################

in skins/{insert skin name}/styleTemplates/content/index.tpl replace all code

between

CODE

<!-- BEGIN: repeat_prods -->

and

CODE

<!-- END: repeat_prods -->

including those two lines above with this code

CODE

<table width="100%" border="0"><tr>

<!-- BEGIN: repeat_prods -->

<td width="{TW}%">

<div style="float: center; text-align: center;">

<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" /></a>

<br />

<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" class="txtDefault">{VAL_PRODUCT_NAME}</a>

<br />

{TXT_PRICE} <span class="txtSale">{TXT_SALE_PRICE}</span>

</div>

</td>

{TXT_TR}

<!-- END: repeat_prods -->

</tr></table>

The $across variable is used to specify number products across.

[convict]

@roban i am surprised of float: center;... does exist value CENTER? I think doesnt.

[roban]

Some alignment attributes also permit the "center" value, which does not cause floating, but centers the object within the current margins. For <P> and <DIV>, the value "center" causes the contents of the element to be centered.

[convict]

@roban you are right, but value CENTER of FLOAT property doesnt exist...

[Guest estelle]

(I think) I use margin: auto to center a div within its container...?

[convict]

@estelle exactly

CC3 #pageSurround in layout.css uses margin: 0px auto => page contents is centered.