Category Layout fix

[SentiJB]

Using : e-Sharp Skin 

Php code for categories : 

<h1>{$category.cat_name}</h1>

{$category.cat_desc}

{if $SUBCATS}
<div id="subcategories">
	{foreach from=$SUBCATS item=subcat}
	<div class="subcategory">
		<a href="{$subcat.url}" title="{$subcat.cat_name}">
			<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" />
			{$subcat.cat_name}
		</a>
	</div>
	{/foreach}
</div>
{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}
<form action="{$VAL_SELF}" method="post" class="control">
	<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>
	{if isset($SORTING)}
	<span class="sort">
	{$LANG.form.sort_by}
	<select name="sort" class="auto_submit">
		<option value="">{$LANG.form.please_select}</option>
		{foreach from=$SORTING item=sort}
		<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>
		{/foreach}
	</select>
	<input type="submit" value="{$LANG.form.sort}" />
	</span>
	{/if}
</form>
{/if}

{if isset($PRODUCTS)}
<div class="product-list">
	{foreach from=$PRODUCTS item=product}
	<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="product addForm" id="P{$product.product_id}">
		<p class="image">
			<a href="{$product.url}" title="{$product.name}">
	  			<img src="{$product.thumbnail}" alt="{$product.name}" />
			</a>
			{if $product.review_score}
			<span class="rating">
				{for $i = 1; $i <= 5; $i++}
				{if $product.review_score >= $i}
				<span class="icon icon-star3"></span>
				{elseif $product.review_score > ($i - 1) && $product.review_score < $i}
				<span class="icon icon-star2"></span>
				{else}
				<span class="icon icon-star"></span>
				{/if}
				{/for}
			</span>
			{/if}
		</p>
		<div class="info">
			<p class="title"><a href="{$product.url}" title="{$product.name}">{$product.name|truncate:40:"&hellip;"}</a></p>
			
			{if $product.ctrl_sale}
			<p class="price"><span class="price_previous">{$product.price}</span> <span class="price_sale">{$product.sale_price}</span></p>
			{else}
			<p class="price">{$product.price}</p>
			{/if}
			
			<p class="actions">
				<a href="{$product.url}" title="{$product.name}">{$LANG.common.info}</a>
				{if $product.ctrl_purchase && !$CATALOGUE_MODE}
				<input type="hidden" name="add[{$product.product_id}][quantity]" value="1" class="quantity" />
				<input type="submit" value="{$LANG.catalogue.buy}" class="btn button_add_basket" onclick="$.add2cart('P{$product.product_id}')" />
				{elseif $product.out}
				<input type="button" value="{$LANG.catalogue.out_of_stock_short}" class="btn disabled" disabled="disabled" />
				{/if}
			</p>
		</div>
	</form>
	{/foreach}
</div>
{else}
{if !$SUBCATS}<p>{$LANG.category.no_products}</p>{/if}
{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}
<form action="{$VAL_SELF}" method="post" class="control">
	<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>
	{if isset($SORTING)}
	<span class="sort">
	{$LANG.form.sort_by}
	<select name="sort" class="auto_submit">
	  <option value="">{$LANG.form.please_select}</option>
	  {foreach from=$SORTING item=sort}
	  <option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>
	  {/foreach}
	</select>
	<input type="submit" value="{$LANG.form.sort}" />
	</span>
	{/if}
</form>
{/if}

How can i fix the layout so its nice : 

eg : http://www.allesvooruwhuisdier.com/garnalen

 

[bsmither]

Try this:

	{foreach from=$SUBCATS item=subcat}
	<div class="subcategory product-list">
		<a class="image" href="{$subcat.url}" title="{$subcat.cat_name}"><img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /></a>
		<p><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></p>
	</div>
	{/foreach}

This evens out the sub-cat listing, except for a category name that takes two lines.