оформляем новости на сайте Как создать свой сайт > Создать сайт на HTML > Урок 6. Заполнение ячейки News

Урок 6. Заполнение ячейки News

Новости на сайте — важное дело
Их мы оформим очень умело
Будет расти у нас трафик на сайте —
Сможем поехать в отпуск мы в марте.
Алексей Востров.


    Займёмся ячейкой News. Нужно, чтобы в ней располагались:

 


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

 

 

    Сделаем эти блоки в виде трёх таблиц (таблицы в HTML). Первая и третья таблицы будут иметь «зазор» между ячейками (назовём их 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 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>

 

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">
<tbody>
<tr>
    <td class="hdr">News</td>
</tr>
</tbody>
</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 заполнена. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.

 

    Автор: Инна Пастухова.

 

 

Ещё материалы по этой теме:


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

 

Полезные ссылки:

Фриланс-биржи для новичков Когда придумали Интернет?

 


основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!