Реферат: Блоки в документах

</tr>

<tr>

<td width="25%"><a href=""><img src="i/catalogue.gif" width="40" height="30" border="0" alt=""></a></td>

<td width="25%"><a href=""><img src="i/forum.gif" width="31" height="30" border="0" alt=""></a></td>

<td width="25%"><a href=""><img src="i/konkurs.gif" width="49" height="30" border="0" alt=""></a></td>

<td width="25%"><a href=""><img src="i/reklama.gif" width="40" height="30" border="0" alt=""></a></td>

</tr>

</table>

Для центрирования картинок внутри таблицы можно написать такой стиль:

#menu TD {text-align: center}

Меню будет выглядеть практически правильно, как видно на рис. 15.

Рис. 15 Вид резинового горизонтального меню с небольшой ошибкой

Ошибка в том, что галочка прилипает к пункту меню. На макете отступ между ними составляет ровно 11 пикселей, так что необходимо его реализовать. Есть два способа: с помощью HTML и с помощью CSS. Для начала попробуем сделать отступ стандартными средствами HTML.

Для этого, конечно же, нужна распорка, то есть невидимый 0.gif. Его надо вставить в ячейку таблицы сразу после галочки и задать ему высоту 11 пикселей:

<td>

<img src="i/current.gif" width="32" height="6" border="0" alt="">

<br>

<img src="i/0.gif" width="1" height="11">

</td>

Второй способ менее надежный, но немного более красивый. Картинку с галочкой можно взять в отдельный блок и задать для блока нижний отступ:

<td>

<div style="padding-bottom: 11px">

<img src="i/current.gif" width="32" height="6" border="0" alt="">

</td>

На рис. 16 показан окончательный вид меню при разных размерах окна браузера.

Рис. 16 Вид горизонтального резинового меню при разных размерах окна браузера

Как видите, меню ведет себя совершенно правильно, то есть как и ожидалось.