Консультации Портала - Консультация #182656

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 182656

29.03.2011, 01:28

0.00 руб.

0 1 1

Компьютеры Программирование

Здравствуйте! У меня возникли сложности с таким вопросом:
На сайте http://ig-nobel.ru нижнее меню идет сразу за текстом и если в столбце слева много картинок, меню весит слишком высоко. Как его прилепить вниз? Можно ли что-то такое вставить между текстом и меню, чтобы оно придавливало последнее вниз? Средствами стилей? Спасибо.

Обсуждение

давно

Коцюрбенко Алексей Владимирович

Старший Модератор
312929
1973

29.03.2011, 08:46

общий

это ответ

Здравствуйте, Грамотник Игорь!

Код страницы имеет примерно такую структуру:

Код:


<TABLE id=body><TBODY>
 <TR>
  <TD id=logo align=center>
  Главное меню
  </TD>
 </TR>
 <TR>
  <TD id=left>
   <TABLE id=body2><TBODY>
    <TR>
     <TD id=left3 align=center>
     <DIV class=left-padded>
      <DIV class=top>
      Ссылки на прошлые годы и счетчики посещений
      </DIV>
     </DIV>
     </TD>
     <TD id=left2>
     <DIV class=left-padded>
     Картинки
     </DIV>
     </TD>
     <TD id=right2>
     <DIV class=left-padded>
      <DIV class=top>
      Верхнее меню(ссылки на премии по категориям)
      </DIV>
      Описание премии
      <DIV class=top>
      Нижнее меню
      </DIV>
     </DIV>
     </TD>
    </TR>
   </TBODY></TABLE>
  </TD>
 </TR>
 <TR>
  <TD id=b_l>
   <TABLE><TBODY><TR>
    <TD>Копирайт</TD>
    <TD>E-mail</TD>
   </TR></TBODY></TABLE>
  </TD>
 </TR>
</TBODY></TABLE>

То есть используется в основном табличное форматирование: вся страница представляет из себя таблицу из трех строк по одной клетке в каждой. В первой строке расположено главное меню (оно в верхней части страницы сразу после банера), в третьей - копирайт и e-mail во вложенной таблице (одна строка с двумя клетками). Основное содержимое страницы - во второй строке в виде вложенной таблицы - одна строка с тремя клетками, внутри клеток форматирование - блоками (DIV) и переносом строки (br). В левой клетке - ссылки на прошлые годы и счетчики посещений, в средней - картинки, в правой - основной текст, к которому сверху и снизу добавлены дополнительные меню.

Интересующее нас нижнее меню расположено в конце правой клетки вложенной таблицы. Чтобы сдвинуть его к нижнему краю, можно использовать два способа:

1) Изменить стиль блока:

Код:


<TABLE id=body><TBODY>
 <TR>
  <TD id=logo align=center>
  Главное меню
  </TD>
 </TR>
 <TR>
  <TD id=left>
   <TABLE id=body2><TBODY>
    <TR>
     <TD id=left3 align=center>
     <DIV class=left-padded>
      <DIV class=top>
      Ссылки на прошлые годы и счетчики посещений
      </DIV>
     </DIV>
     </TD>
     <TD id=left2>
     <DIV class=left-padded>
     Картинки
     </DIV>
     </TD>
     <TD id=right2>
     <DIV class=left-padded style='position: relative; height: 100%'>
      <DIV class=top>
      Верхнее меню(ссылки на премии по категориям)
      </DIV>
      Описание премии
      <DIV class=top style='position: absolute; bottom: 10px'>
      Нижнее меню
      </DIV>
     </DIV>
     </TD>
    </TR>
   </TBODY></TABLE>
  </TD>
 </TR>
 <TR>
  <TD id=b_l>
   <TABLE><TBODY><TR>
    <TD>Копирайт</TD>
    <TD>E-mail</TD>
   </TR></TBODY></TABLE>
  </TD>
 </TR>
</TBODY></TABLE>

(изменения выделены жирным). Обратите внимание, что стиль меняется для обоих блоков (внешнего с class=left-padded и внутреннего с class=top). Менять параметры классов left-padded и top для элемента div в файле стилей не стоит, так как эти классы используются и для других элементов. В крайнем случае - создать новые классы (с соответствующими добавлениями) и использовать их.

2) Переделать вложенную таблицу:

Код:


<TABLE id=body><TBODY>
 <TR>
  <TD id=logo align=center>
  Главное меню
  </TD>
 </TR>
 <TR>
  <TD id=left>
   <TABLE id=body2><TBODY>
    <TR>
     <TD id=left3 align=center rowspan=2>
     <DIV class=left-padded>
      <DIV class=top>
      Ссылки на прошлые годы и счетчики посещений
      </DIV>
     </DIV>
     </TD>
     <TD id=left2 rowspan=2>
     <DIV class=left-padded>
     Картинки
     </DIV>
     </TD>
     <TD id=right2>
     <DIV class=left-padded>
      <DIV class=top>
      Верхнее меню(ссылки на премии по категориям)
      </DIV>
      Описание премии
     </DIV>
     </TD>
    </TR>
    <TR>
     <TD style='vertical-align: bottom; padding-bottom: 10px'>
      <DIV class=top>
      Нижнее меню
      </DIV>
     </TD>
    </TR>
   </TBODY></TABLE>
  </TD>
 </TR>
 <TR>
  <TD id=b_l>
   <TABLE><TBODY><TR>
    <TD>Копирайт</TD>
    <TD>E-mail</TD>
   </TR></TBODY></TABLE>
  </TD>
 </TR>
</TBODY></TABLE>

(изменения выделены жирным). То есть добавляем к вложенной таблице вторую строку и нижнее меню помещаем в правую клетку этой строки, а первые две клетки растягиваем на обе строки (с помощью rowspan=2). Нужное расположение этой клетки опять же обеспечиваем стилем.

Спасибо. Второй способ вполне подойдет. position не внушает доверия.

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.