Как сделать центрирование заголовка напротив картинки!

Тема в разделе "Как сделать...", создана пользователем KPACHODAP, 4 окт 2011.

  1. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    640
    Симпатии:
    111
    Дорогие друзья помогите как центрировать заголовок напротив текста?!?!

    http://c110916.rulestyle.ru/

    Вот кусок кода:


    <table width="100%" border="0" cellpadding="5" cellspacing="0">
    {foreach from=$root_categories item=_cat name=_fr}
    {if $smarty.foreach._fr.index%$columnCount ==0}<tr style="vertical-align:middle;">{/if}
    {assign var=_cat_url value="?categoryID=`$_cat.categoryID`&category_slug=`$_cat.slug`"|set_query_html}
    {if $_cat.picture ne "" && $PAGE_VIEW ne 'mobile'}
    <td class="cat_name">
    <div style="width:100%; height:50px;">
    <div style="float:left;">
    <a href='{$_cat_url}'><img border="0" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_cat.picture|escape:'url'}" alt="{$_cat.name|escape:'html'}"></a>
    </div>
    {else}
    <div style="float:left;"><a href='{$_cat_url}' class="home_page_category_logo"> </a></div>
    {/if}
    <div style="float:left; display: block; padding-left:15px; margin:0 auto; height:20px;"><a href='{$_cat_url}' class="rcat_root_category">{$_cat.name|escape:'html'|default:'(no name)'}</a>
    </div>
    </div>
    <div class="rcat_child_categories" style="width:100%; clear: both;">
    {* show sub categories *}
    {foreach name=sub_cat_list from=$root_categories_subs[$_cat.categoryID] item=_subcat}
    {if $subcategories_numberlimit&&(!$smarty.foreach.sub_cat_list.first)&&($smarty.foreach.sub_cat_list.iteration==$subcategories_numberlimit)}

    {elseif !$subcategories_numberlimit||$subcategories_numberlimit&&($smarty.foreach.sub_cat_list.iteration<$subcategories_numberlimit)}
    {if !$smarty.foreach.sub_cat_list.first}{$subcategories_delimiter|escape:'html'}{/if}<br />
    <a href='{"?categoryID=`$_subcat.categoryID`&category_slug=`$_subcat.slug`"|set_query_html}'>{$_subcat.name|escape:'html'}</a>
    {/if}
    {/foreach}
    </div>
    </td>
    {if ($smarty.foreach._fr.index+1)%$columnCount ==0}</tr>{/if}
    {/foreach}
    </table>


    Почему он не становица относительно картинки по центру за ранее спасибо!
     
  2. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.037
    Симпатии:
    702
    потому-что везде style="float:left;" попробуй поубирать там где надо

    PS. а вообще сам вопрос не совсем понятен
     
    KPACHODAP нравится это.
  3. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    640
    Симпатии:
    111
    Убрал, 0 эффекта помогите пожалуйста в чем тут проблема!

    <table width="100%" border="0" cellpadding="5" cellspacing="0">
    {foreach from=$root_categories item=_cat name=_fr}
    {if $smarty.foreach._fr.index%$columnCount ==0}<tr valign="middle">{/if}
    {assign var=_cat_url value="?categoryID=`$_cat.categoryID`&category_slug=`$_cat.slug`"|set_query_html}
    {if $_cat.picture ne "" && $PAGE_VIEW ne 'mobile'}
    <td class="cat_name">
    <div style="width:100%; height:50px; vertical-align: middle;">
    <a href='{$_cat_url}'><img border="0" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_cat.picture|escape:'url'}" alt="{$_cat.name|escape:'html'}" align="left" /></a> &nbsp;
    {else}
    <a href='{$_cat_url}' class="home_page_category_logo"> </a> &nbsp;
    {/if}
    <span style="padding-left:15px; "><a href='{$_cat_url}' >{$_cat.name|escape:'html'|default:'(no name)'}</a>
    </span>
    </div>
    <div class="rcat_child_categories" style="width:100%; clear: both;">
    {* show sub categories *}
    {foreach name=sub_cat_list from=$root_categories_subs[$_cat.categoryID] item=_subcat}
    {if $subcategories_numberlimit&&(!$smarty.foreach.sub_cat_list.first)&&($smarty.foreach.sub_cat_list.iteration==$subcategories_numberlimit)}

    {elseif !$subcategories_numberlimit||$subcategories_numberlimit&&($smarty.foreach.sub_cat_list.iteration<$subcategories_numberlimit)}
    {if !$smarty.foreach.sub_cat_list.first}{$subcategories_delimiter|escape:'html'}{/if}<br />
    <a href='{"?categoryID=`$_subcat.categoryID`&category_slug=`$_subcat.slug`"|set_query_html}'>{$_subcat.name|escape:'html'}</a>
    {/if}
    {/foreach}
    </div>
    </td>
    {if ($smarty.foreach._fr.index+1)%$columnCount ==0}</tr>{/if}
    {/foreach}
    </table>
     
  4. TANAT0S

    TANAT0S Постоялец

    Регистр.:
    19 фев 2008
    Сообщения:
    111
    Симпатии:
    19
    Вам надо чтобы все заголовки были на одном уровне?
    Попробуйте сделать span с заголовком фиксированным и прижать к правому краю:
    <span style="width:100px;float:right;text-align:left;"><a href='{$_cat_url}' >{$_cat.name|escape:'html'|default:'(no name)'}</a>

    Весь код:
    <div style="width:100%; height:50px; vertical-align: middle;">
    <a href='{$_cat_url}'><img border="0" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_cat.picture|escape:'url'}" alt="{$_cat.name|escape:'html'}" align="left" /></a> &nbsp;
    {else}
    <a href='{$_cat_url}' class="home_page_category_logo"> </a> &nbsp;
    {/if}
    <span style="width:100px;float:right;text-align:left;"><a href='{$_cat_url}' >{$_cat.name|escape:'html'|default:'(no name)'}</a>
    </span>
    </div>

    Плюс можно сделать предел максимальной ширины картинки, чтобы ничего никуда не уехало если картинка слишком большая.
     
    KPACHODAP нравится это.
  5. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.037
    Симпатии:
    702
    а как надо? вот так? kod.JPG
     
  6. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    640
    Симпатии:
    111
    [​IMG]

    Надо чтобы заголовок был поцентру относительно логотика вендора!

    Добавлено через 4 минуты
    ТОНАТОС что то не помагло!
     
  7. TANAT0S

    TANAT0S Постоялец

    Регистр.:
    19 фев 2008
    Сообщения:
    111
    Симпатии:
    19
    У вас сейчас на сайте span'у не присвоено float:right; поэтому он прижимается к левому краю, а не к правому.

    Если float не поможет, стукните мне в личку, свяжемся с вами и решим эту проблему.