1. Блоки с текстом (те, которые с серой окантовкой).


2. Блок с заголовком ":: NEWS".

Сделаем эти блоки в виде трех таблиц. Первая и третья таблицы будут иметь "зазор" между ячейками (назовем их NewsItem) в 5 пкс. В HTML это достигается с помощью

В CSS единственный аналог этой записи: table {border-collapse: separate; border-spacing: 5px;}, но он не работает в IE - в нем расстояние между ячейками при border-collapse: separate всегда будет 2 пкс, какой бы border-spacing вы не прописали. Так что воспользуемся параметром cellspacing.

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

index.html

Code
<table cellspacing="5" class="newstable"> 
 <tbody> 
 <tr> 
 <td class="newsitem"> 
 <h2 class="h_red">Contact information</h2> 
 <Lorem ipsum dolor sit amet... <a href="">>></a> 
 </td> 
 </tr> 
 </tbody> 
 </table>
 
 

style.css

Code
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"):

index.html

Code
 
 <table class="hdrtab"> 
 <tbody> 
 <tr> 
 <td class="hdr">News</td> 
 </tr> 
 </tbody> 
 </table>
 
 

style.css

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

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

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

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

Ячейка News заполнена. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.

Источник: www.pastukhova.com