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

1. Блоки с текстом (т.е., которые с серой окантовкой).
2. Блок с заголовком «:: NEWS».

Сделаем эти блоки в виде трех таблиц. Первая и третья таблицы будут иметь «зазор» между ячейками (назовем их NewsItem) в 5 пкс. В HTML это достигается с помощью <table cellspacing='5'>. В CSS единственный аналог этой записи: table {border-collapse: separate; border-spacing: 5px; }, но он не работает в IE – в нем расстояние между ячейками при border-collapse: separate всегда будет 2 пкс, какой бы border-spacing вы не прописали. Так что воспользуемся параметром cellspacing.

У ячеек NewsItem будет серая окантовка толщиной 1 пкс и фон в виде градиента от серого к белому. Текст в них будет выравниваться по ширине. Для заголовка и для ссылки (>> в конце каждого текста) я указала стиль текста. Вот html-код первой таблицы:

<table class='newstable' cellspacing='5'>
<tr>
 <td class='newsitem'>
 <h2 class='h_red'>Contact information</h2>
 Lorem ipsum dolor sit amet ...
 <a href=''>&gt;&gt;</a>
 </td>
</tr>
</table>

table.newstable {
 width: 100%;
}
td.newsitem {
 background-image: url(newsitem_bg.jpg);
 background-repeat: repeat-x;
 border: 1px solid silver;
 padding: 10px;
 text-align: justify;
}
h2.hdr2 {
 text-transform: uppercase;
 font-weight: bold;
 font-size: 10px;
 color: #c63c3c;
 margin-bottom: 7px;
}
a {
 text-decoration: none;
 color: #c63c3c;
}

Вторая таблица будет содержать всего одну ячейку, которая будет использовать созданный в уроке 3 стиль «hdr» (для того, чтобы вставить точки перед «News»):

<table class='hdrtab'>
<tr>
 <td class='hdr'>News</td>
</tr>
</table>

table.hdrtab {
 background-image: url(hdrtab_bg.jpg);
 background-color: #dce1e9;
 height: 37px;
 width: 100%;
 border-collapse: collapse;
}

Третью таблицу вы можете сделать сами по аналогии с первой, вставив ее после таблицы hdrtab и добавив еще 2 ячейки.

Чтобы содержимое ячейки News не выходило за серую вертикальную линию (она же – фон News), сделаем отступ от правой границы 6 пкс.

td.news {
 padding-right: 6px;
}

Ячейка News заполнена.