[SOLVED] categories align problem

[kppyeung]

hi there,

 

I change the code to make the categories at the front end centre aligned, but another alignment problem came up, pls check pic.

 

here is the related code :

 

 

/* ————— tmcategories.tpl ————— */

#tmcategories {height:87px;background:url(../img/hr_line.png) 50% 0 no-repeat;}

#tmcategories_inner {height:87px;background:url(../img/hr_line.png) 50% bottom no-repeat;}

#cat {padding:19px 0 0 180px;}

#cat > li {height:50px;float:left;position:relative;}

#cat > li + li {margin:0 0 0 13px;padding:0 0 0 21px;background:url(../img/bullet_categories.png) 0 19px no-repeat;}

#cat > li.last {margin:0 0 0 11px;}

#cat > li > a {display:block;font-family:'Oswald', sans-serif;font-size:31px;color:#4b6a69;text-decoration:none;text-transform:uppercase;}

 

how to fix it?

 

thanks in advance

 

:-)

[vekia]

your website is online? if so, can you share the url? it will be much easier to debug it because this is pure css issue

and without access to the website it is really hard to say what's going on there 

[kppyeung]

hi there,

 

you are right,

 

here is the link : http://www.warehouse.desq2.com.hk

 

thanks

[vekia]

it's related to the   you've got there many "spaces"

i removed them from the code and the effect is:

[S-HAMMANI]

hi

see at line 416 in global.css

 

replace

#cat {
    padding: 20px 0px 0px 180px;
}

with:

#cat {
    padding: 20px 0px 0px 106px;
}

Edited September 4, 2013 by S.HaMmAnI (see edit history)

[kppyeung]

I am afraid I don't know much about coding,

 

is the code &nbsp generated ?

 

or I can delete it in a .tpl or .php page?

 

thanks

[vekia]

i tried this and unfortunately doesnt work, take a look:

I am afraid I don't know much about coding,

 

is the code &nbsp generated ?

 

or I can delete it in a .tpl or .php page?

 

thanks

 

 

you use some module for these links? it looks like tmcategories

you should edit this module .tpl file

 

can you attach contents of .tpl file here?

[kppyeung]

here it is

 

tmcategories.tpl

 

 

<!-- TM Categories -->

<div id="tmcategories">

<div id="tmcategories_inner">

<ul id="cat">

{foreach from=$blockCategTree.children item=child name=blockCategTree}

    {if $smarty.foreach.blockCategTree.index < 25}

        {if $smarty.foreach.blockCategTree.last}

            {include file="$branche_tpl_path" node=$child last='true'}

        {else}

            {include file="$branche_tpl_path" node=$child}

        {/if}

    {/if}

{/foreach}

</ul>

</div>

</div>

<!-- /TM Categories -->

[vekia]

have you got there (in module directory) another .tpl file?

[kppyeung]

here is another .tpl 

 

../modules/tmcategories/category-tree-branch.tpl

 

 

 

<li{if isset($last) && $last == 'true'} class="last"{/if}>

<a href="{$node.link}" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if} title="{$node.desc|escape:html:'UTF-8'}">{$node.name|escape:html:'UTF-8'}</a>

{if $node.children|@count > 0}

<ul class="subcat">

{foreach from=$node.children item=child name=categoryTreeBranch}

{if isset($smarty.foreach.categoryTreeBranch) && $smarty.foreach.categoryTreeBranch.last}

{include file="$branche_tpl_path" node=$child last='true'}

{else}

{include file="$branche_tpl_path" node=$child last='false'}

{/if}

{/foreach}

</ul>

{/if}

</li>

{*

<li{if isset($last) && $last == 'true'} class="last"{/if}>

<a href="{$node.link}" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if} title="{$node.desc|escape:html:'UTF-8'}">{$node.name|escape:html:'UTF-8'}</a>

{if $node.children|@count > 0}

<ul class="subcat">

{foreach from=$node.children item=child}

<li><a href="{$child.link|escape:html:'UTF-8'}">{$child.name|escape:html:'UTF-8'}</a></li>

{/foreach}

</ul>

{/if}

</li>

*}

[kppyeung]

or 

 

../themes/theme210/category.tpl

 

 

 

{include file="$tpl_dir./breadcrumb.tpl"}

{include file="$tpl_dir./errors.tpl"}

{if isset($category)}

{if $category->id AND $category->active}

<h1>{strip}

{$category->name|escape:'htmlall':'UTF-8'}

<span>

{if $category->id == 1 OR $nb_products == 0}{l s='There are no products.'}

{else}

{if $nb_products == 1}{l s='There is'}{else}{l s='There are'}{/if} 

{$nb_products} 

{if $nb_products == 1}{l s='product.'}{else}{l s='products.'}{/if}

{/if}

</span>{/strip}

</h1>

{if $scenes}

<!-- Scenes -->

{include file="$tpl_dir./scenes.tpl" scenes=$scenes}

{*

{else}

<!-- Category image -->

{if $category->id_image}

<div class="align_center">

<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />

</div>

{/if}

*}

{/if}

{if $category->description}

<div class="cat_desc">{$category->description}</div>

{/if}

{if isset($subcategories)}

<!-- Subcategories -->

<div id="subcategories">

<h3>{l s='Subcategories'}</h3>

<ul>

{foreach from=$subcategories item=subcategory}

<li>

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">

{if $subcategory.id_image}

<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{else}

<img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{/if}

</a><br />

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

</li>

{/foreach}

</ul>

<div class="clearblock"></div>

</div>

{/if}

{if $products}

{include file="$tpl_dir./product-compare.tpl"}

{include file="$tpl_dir./product-sort.tpl"}

{include file="$tpl_dir./product-list.tpl" products=$products}

{include file="$tpl_dir./product-compare.tpl"}

{include file="$tpl_dir./pagination.tpl"}

{elseif !isset($subcategories)}

<p class="warning">{l s='There are no products in this category.'}</p>

{/if}

{elseif $category->id}

<p class="warning">{l s='This category is currently unavailable.'}</p>

{/if}

{/if}

[vekia]

use this:

<li{if isset($last) && $last == 'true'} class="last"{/if}><a href="{$node.link}" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if} title="{$node.desc|escape:html:'UTF-8'}">{$node.name|escape:html:'UTF-8'}</a>{if $node.children|@count > 0}<ul class="subcat">{foreach from=$node.children item=child name=categoryTreeBranch}{if isset($smarty.foreach.categoryTreeBranch) && $smarty.foreach.categoryTreeBranch.last}{include file="$branche_tpl_path" node=$child last='true'}{else}{include file="$branche_tpl_path" node=$child last='false'}{/if}{/foreach}</ul>{/if}</li>
{*
<li{if isset($last) && $last == 'true'} class="last"{/if}>
<a href="{$node.link}" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if} title="{$node.desc|escape:html:'UTF-8'}">{$node.name|escape:html:'UTF-8'}</a>
{if $node.children|@count > 0}
<ul class="subcat">
{foreach from=$node.children item=child}
<li><a href="{$child.link|escape:html:'UTF-8'}">{$child.name|escape:html:'UTF-8'}</a></li>
{/foreach}
</ul>
{/if}
</li>
*}

i removed all spaces, before you apply changes to file, make sure that you've got force compilation ON and cache OFF under adv. pref. > performance tab in BO

[kppyeung]

where to use it?

[Jiten rash (away)]

global.css line 419

 

#cat > li.last {
    margin: -15px 0px 0px 11px;

[Jiten rash (away)]

ok its resolved now i saw

[kppyeung]

OMG!

 

 

 

global.css line 419

 

#cat > li.last {
    margin: -15px 0px 0px 11px;

 

#cat > li.last {
    margin: -15 0 0 11px;

 

doesn't work!

 

but...

 

#cat > li.last {

    margin: -15px 0px 0px 11px;

 

works!!!

[kppyeung]

use this:

<li{if isset($last) && $last == 'true'} class="last"{/if}><a href="{$node.link}" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if} title="{$node.desc|escape:html:'UTF-8'}">{$node.name|escape:html:'UTF-8'}</a>{if $node.children|@count > 0}<ul class="subcat">{foreach from=$node.children item=child name=categoryTreeBranch}{if isset($smarty.foreach.categoryTreeBranch) && $smarty.foreach.categoryTreeBranch.last}{include file="$branche_tpl_path" node=$child last='true'}{else}{include file="$branche_tpl_path" node=$child last='false'}{/if}{/foreach}</ul>{/if}</li>
{*
<li{if isset($last) && $last == 'true'} class="last"{/if}>
<a href="{$node.link}" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if} title="{$node.desc|escape:html:'UTF-8'}">{$node.name|escape:html:'UTF-8'}</a>
{if $node.children|@count > 0}
<ul class="subcat">
{foreach from=$node.children item=child}
<li><a href="{$child.link|escape:html:'UTF-8'}">{$child.name|escape:html:'UTF-8'}</a></li>
{/foreach}
</ul>
{/if}
</li>
*}

i removed all spaces, before you apply changes to file, make sure that you've got force compilation ON and cache OFF under adv. pref. > performance tab in BO

 

I see if that work too!

 

thank you very much!

 

:-)

[Jiten rash (away)]

u need to add px {pixels} if its number greater or less than zero

[vekia]

glad to hear that another problem is solved today

im going to mark this thread as [sOLVED]

 

best regards

[Jiten rash (away)]

if u got the problem by editing css then use my solution  if tpl use vekias...

i saw ur site keep margin as -15px u changed to 13 15 is perfectly align

Edited September 4, 2013 by Jiten rash (see edit history)

[kppyeung]

thanks 

 

if u got the problem by editing css then use my solution  if tpl use vekias...

 

 

glad to hear that another problem is solved today

im going to mark this thread as [sOLVED]

 

best regards

thanks, vekia!