Маркет Витрина

Сначала сверстаем левую ячейку.

В ячейке Copyright нужно добиться того, чтобы сверху она отчеркивалась линией, не доходящей до края ячейки на 5 пкс. Для этого сделаем соответствующий отступ внутри ячейки (справа), а все остальное пространство заполним таблицей с одной-единственной ячейкой. Верхняя граница у нее будет в виде серой линии толщиной 1 пкс (на рисунке она помечена красным пунктиром). Также для ячейки укажем цвет фона и шрифт. Текст разместим по центру.

<td class='copyright'>
 <table class='main'>
 <tr>
  <td class='cprghtitem'>
  Copyright © RealErtateCompany.com</td>
 </tr>
 </table>
</td>

td.copyright {
 padding-right: 5px;
 height: 32px;
}
td.cprghtitem {
 border-top: 1px solid #cacaca;
 background-color: #f5f5f5;
 font-size: 10px;
 color: #656565;
 vertical-align: middle;
 text-align: center;
}

Теперь правая ячейка (BottomMenu).

Для нее мы сделаем повторяющийся оранжевый фон. Внутри BottomMenu будет вложенная таблица – как и в первом случае, всего с одной ячейкой. Это сделано для того, чтобы в этой ячейке указать в качестве фона изображение тени. Можно было бы поступить по-другому: сделать вложенную в BottomMenu таблицу с двумя ячейками. В левую вставить тень, в правую – собственно ссылки нижнего меню. Но html-код в этом случае был бы тяжелее.

В ячейку со ссылками – назовем ее BtmenuItem – вставим ссылки, разделенные изображение точек (dots2.gif). У dots2.gif я выставила величины:

• hspace='12'. Это отступ по горизонтали от картинки до текста. Он нужен, чтобы точки находились на расстоянии от букв (Как вариант можно было бы поставить пару пробелов:   ).
• vspace='1'. Отступ по вертикали – для того, чтобы точки были повыше, как бы посередине букв (по вертикали).

<td class='bottommenu'>
 <table class='main'>
 <tr>
  <td class='btmenuitem'>
   <a class='menu' href=''>Home</a>
   <img src='dots2.gif' width='5' 
   height='5' vspace='1' hspace='12'>
   <a class='menu' href=''>News</a>
   <img src='dots2.gif' width='5' 
   height='5' vspace='1' hspace='12'>
   <a class='menu' href=''>About Us</a>
   <img src='dots2.gif' width='5' 
   height='5' vspace='1' hspace='12'>
   <a class='menu' href=''>Catalog</a>
   <img src='dots2.gif' width='5' 
   height='5' vspace='1' hspace='12'>
   <a class='menu' href=''>Contacts</a>
  </td>
 </tr>
 </table>
</td>

td.bottommenu {
 background-image: url(bottom_bg.jpg);
 background-color: #ff8e51;
 height: 32px;
}
td.btmenuitem {
 background-image: url(bottom_shadow.jpg);
 background-repeat: no-repeat;
 vertical-align: middle;
 text-align: center;
}

Ячейка с копирайтом и нижнее меню готовы.