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

Осталось сделать совсем чуть-чуть, а именно выделить пункт текущего раздела серым фоном. Для этого можно ввести отдельный класс. Назовем его current. Стиль для класса current будет таким:

#menu TD.current {background: #DDD url(i/bg1.gif) repeat-x}

У вас должен возникнуть вопрос, зачем дублировать фоновый рисунок и в стиле для класса current, если он уже прописан для ячеек таблицы меню? Ответ: если этого не сделать, то фоновый цвет закроет фоновое изображение и пунктира в той ячейке, которая имеет класс current, просто не будет.

Итоговый код вот такой:

#menu TD {background: url(i/bg1.gif) repeat-x; text-align: right}

#menu TD.current {background: #DDD url(i/bg1.gif) repeat-x}

#menu A {color: #000; font: 14px Arial; text-decoration: none}

. . .

<table id="menu" width="140" cellpadding="4" cellspacing="0">

<tr><td class="current"><a href="">О компании</a></td></tr>

<tr><td><a href="">Продукция</a></td></tr>

<tr><td><a href="">Услуги</a></td></tr>

<tr><td><a href="">Контакт</a></td></tr>

<tr><td></td></tr>

</table>

Проще всего реализуются графические вертикальные меню. Обычно для них хватает таблицы из одного столбца с обнуленными отступами и расстояниями между ячейками. Приводить реальный пример нет особого смысла.

Горизонтальные

Чаще всего используются графические горизонтальные меню. Принципиально есть две их разновидности: резиновые и фиксированные. Резиновые меню растягиваются при увеличении окна браузера, а фиксированные – нет.

Фиксированное меню реализуются очень просто: создается таблица из одного ряда и необходимого количества столбцов, в которые помещаются пункты меню. У таблицы обнуляются отступы и расстояния между ячейками и жестко устанавливается ширина.

Давайте лучше с вами реализуем резиновое меню, которое показано на рис. 14

Рис. 14 Графическое горизонтальное резиновое меню на сайте www.rubi.ru

Особенность меню в том, что текущий пункт помечен галочкой сверху. Для начала нам надо заготовить пять картинок: четыре с пунктами меню и один с галочкой. Затем начнем создавать таблицу. Понятно, что надо сделать два ряда: в первом будет галочка, а во втором пункты меню. Каждый ряд будет состоять из четырех ячеек.

Ширину каждой ячейки надо задавать пропорционально относительно ширины таблицы. Раз у нас ширина таблицы 100% а ячеек четыре, то ширина каждой ячейки будет 25%. Картинку в каждой ячейке надо центрировать.

Код таблицы будет вот такой:

<table width="100%" id="menu" cellpadding="0" cellspacing="0">

<tr>

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

<td></td>

<td></td>