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

Сделаем фон для каждой из ячеек.

td.search {
 background-image: url(search_bg.jpg);
 background-color: #dce1e9;
 height: 39px;
}
td.topmenu {
 background-image: url(topmenu_bg.jpg);
 background-color: #ff8e51;
}

В Search поместим вложенную таблицу. Ячейки таблицы будут с небольшим отступом справа (чтобы надпись «Search» не сливалась с формой ввода, а та – с кнопкой). Сама форма поиска, как и ячейка, в которой она находится, будет 100%-ширины. Откройте страницу с версткой и порастягивайте ее в ширину. Как видите, форма ввода тоже растягивается.

Но самое оригинальное мы сделаем с ячейкой, в которой должна быть надпись «::   SEARCH». Назовем ее hdr. Во-первых, в ней нужно указать параметры шрифта (верхний регистр, жирный). Во-вторых, изображение точек – dots.gif – сделаем его фоном ячейки. Причем фон можно точно позиционировать (background-position: 10px – отступ от левого края ячейки). И сделаем padding-left: 21px (отступ текста), чтобы текст не налезал на точки.

Возможно, вам покажется, что это лишние сложности – не проще ли было бы:

1. вставить dots.gif в отдельную ячейку таблицы
   или
2. написать: <b style='font-size: 10px'>::&nbsp;&nbsp;&nbsp;SEARCH</b> и получить    ::   SEARCH

<td class='search'>
 <form action=''>
 <table class='main'>
 <tr>
  <td class='searchitem hdr'>Search</td>
  <td class='searchitem' width='100%'>
  <input type='text' 
  name='Search' style='width: 100%'>
  </td>
  <td class='searchitem'>
  <input type='image' 
  src='button.jpg' width='22' 
  height='39' border='0'>
  </td>
 </tr>
 </table> 
 </form>
</td>

td.searchitem {
 vertical-align: middle;
 text-align: center;
 padding-right: 11px;
}
form {
 margin: 0px;
}
td.hdr {
 vertical-align: middle;
 text-transform: uppercase;
 font-weight: bold;
 font-size: 10px;
 background-image: url(dots.gif);
 background-repeat: no-repeat;
 background-position: 10px;
 padding-left: 21px;
}

В TopMenu мы тоже сделаем вложенную таблицу из пяти ячеек одинаковой ширины (по 20%). Возникает вопрос: как лучше сделать разделители между элементами меню? Можно сделать их изображениями шириной 1 пкс, добавить в таблицу еще 5 ячеек (по одной после каждого пункта меню) и поместить в них разделители. Но еще в первом уроке мы договорились как можно больше html-кода вынести в style.css. Так что сделаем div.jpg фоном ячеек Menuitem и привяжем его к правому краю.

Для ссылок в меню пропишем свойства шрифта (10 пкс, верхниц регистр, белый, жирный, без подчеркивания).

<td class='topmenu'>
 <table class='main'>
 <tr>
  <td class='menuitem'>
  <a class='menu' href=''>Home</a></td>
  <td class='menuitem'>
  <a class='menu' href=''>News</a></td>
  <td class='menuitem'>
  <a class='menu' href=''>About Us</a></td>
  <td class='menuitem'>
  <a class='menu' href=''>Catalog</a></td>
  <td class='menuitem'>
  <a class='menu' href=''>Contacts</a></td>
 </tr>
 </table>
</td>

td.menuitem {
 vertical-align: middle;
 text-align: center;
 width: 20%;
 background-image: url(menuitem_bg.jpg);
 background-repeat: no-repeat;
 background-position: right;
}
a.menu {
 font-size: 10px;
 text-transform: uppercase;
 color: #ffffff;
 font-weight: bold;
 text-decoration: none;
}

Меню и строка поиска готовы.