Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > несоответствие html из Smarty


Автор: yalo 12.7.2006, 04:55
Столкнулась с такой проблемой: html-код, сгенерируемый при помощи Smarty не совпадает с тем же обычным html-кодом.
Вот смартинский код:
Код

{include file='header.tpl'}
<table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr height="44">
   <td colspan="5">{include file="menu.tpl"}</td>
</tr>
<tr>
   <td width="170"><img src="/themes/{$theme}/images/spot.gif" width="170"></td>
   <td width="4"><img src="/themes/{$theme}/images/spot.gif" width="4"></td>   
   <td><img src="/themes/{$theme}/images/spot.gif"></td>
   <td width="4"><img src="/themes/{$theme}/images/spot.gif" width="4"></td>
   <td width="259"><img src="/themes/{$theme}/images/spot.gif" width="259"></td>
</tr>
<tr height="35">
   <td colspan="5">{include file="footer.tpl"}</td>
</tr>
</table>
</body>
</html>

И вот код html, соответствующий ему.
Код

<html>
<head>
    <title>STANLEY - </title>
    <META http-equiv=Content-Type content="text/html; Charset=Windows-1251">
    <META content="" name="Keywords">
    <META content="" name="Description">    
</head>
<LINK rel="stylesheet" href="styles/style.css" type="text/css">
<body leftmargin="0" rightmargin="0" topmargin="0" bgcolor="#ffffff">
<table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr height="44">
   <td colspan="5" bgcolor="#ffff00">menu</td>
</tr>
<tr>
   <td width="170"><img src="images/spot.gif" width="170"></td>
   <td width="4"><img src="images/spot.gif" width="4"></td>   
   <td><img src="images/spot.gif"></td>
   <td width="4"><img src="images/spot.gif" width="4"></td>
   <td width="259"><img src="images/spot.gif" width="259"></td>
</tr>
<tr height="35">
   <td colspan="5" bgcolor="#ffff00"><img src="images/spot.gif"></td>
</tr>
</table>
</body>
</html>

HTML делает все верно:
вторая строка таблицы разбивается на следующие столбцы:
1 ячейка: ширина=170
2 ячейка: ширина=4
3 ячейка: ширина=100%-170-259-4-4
4 ячейка: ширина=4
5 ячейка: ширина=259
С высотой строк тоже все как запланировано:
1 строка: высота=44
1 строка: высота=100%-44-35
3 строка: высота=35
Smarty делает совершенно непонятные вещи:
с высотой строк все ок, а вот с шириной ячеек второй строки полная ерунда - 1я ячейка около трети всей ширины, самая узкая 3я ячейка, чуть пошире ее 2я и 4я, причем они равны по ширине как и было запланировано, только кажется что чуть больше 4х пикселей, 5я ячейка соответственно очень большая - почти 2/3 от всей ширины
 smile  smile   

Автор: AztEK 12.7.2006, 14:14
Дело не в Smarty, а в особенностях отображения таблиц браузером(каким кстати). Стоит просто переверстать по-новой(на CSS желательно). 

Автор: dm9 13.7.2006, 13:34
Дело не в Смарти, и не в CSS. Надо смотреть, корректно ли были перенесены на Смарти картинки, и корректно ли перенесены на шаблонизатор include-шаблоны.

В любом случае, посмотрите исходный код страницы, которую выдаёт в браузер Смарти. Тогда станет понятно, где искать ошибки. По необработанному шаблону сказать что-то невозможно. На первый взгляд всё корректно.
 

Автор: yalo 14.7.2006, 12:17
дело все почему-то заключалось в строчках
Код

<tr height="44">
   <td colspan="5">{include file="menu.tpl"}</td>
</tr>

Когда их убираешь, разбивается все верно, пробовала поставить сверху строку высотой 1px  и задать в ней необходимое разбиение на пять колонок нужной ширины, но IE все равно "забывает" про указанное разбиение после colspan="5".
Вышла из положения след. образом: поставила просто таблицу (вся страница кроме меню) под таблицей (меню), не вкладывая их во внешнюю таблицу. Тогда все заработало.
Но вопрос все-таки остался нерешенным... Господа веб-верстальщики, почему же, работая со Smarty, браузер забывает заданное выше разбиение колонок в таблице после colspan="x"? И как с этим бороться? Может, тот способ, которым я в итоге обошла эту проблему, тоже может оказаться чем-либо чреват? 
Кстати, код menu.tpl следующий:
Код

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="44" style="background: url(/themes/{$theme}/images/panel.gif); height: 44; width: 100%;">
    <tr  height="44">
    {section name=i loop=$MainMenu}                    
        <td><img src="/themes/{$theme}/images/spot.gif"></td>
    {if $page_active != $MainMenu[i].url}
        <td style="background: url(/themes/{$theme}/images/button.gif) no-repeat; height: 44; width: 182;">
              <div class="text_menu"><a href="{$MainMenu[i].url}">{$MainMenu[i].alttext}<img src="/themes/{$theme}/images/spot.gif" border="0" width="13"></a></div></td> 
    {else} 
    <td style="background: url(/themes/{$theme}/images/button_up.gif) no-repeat; height: 44; width: 182;">
          <div class="text_menu"><a href="{$MainMenu[i].url}">{$MainMenu[i].alttext}<img src="/themes/{$theme}/images/spot.gif" border="0" width="12"></a></div></td> 
    {/if}

        <td><img src="/themes/{$theme}/images/spot.gif"></td>
    {/section} 
    </tr>                
</table>

И вставление его непосредственно в файл без {include file="menu.tpl"} тоже не решает проблему  

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)