RFpro.ru: КОМПЬЮТЕРЫ И СОФТ / Программирование / Хитрости и секреты создания сайтов

ТО и ремонт Хундай Гетц!
Авторемонт Хундай! Техцентр на Кантемировской! На Хундай Гетц скидки!

Разнообразь свой досуг!
С великолепными вкусами наших вин. Онлайн заказ. Доставка по Москве!

Если выпуск отображается некорректно, Вы можете посмотреть его на сайте перейти к выпуску >>>

РАССЫЛКИ ПОРТАЛА RFPRO.RU

Лучшие эксперты данной рассылки

Гуревич Александр Львович
Статус: Профессионал
Рейтинг: 4900
• повысить рейтинг »

Валерий Ахметович Набиуллин aka ValeryN
Статус: Мастер-Эксперт
Рейтинг: 4720
• повысить рейтинг »

Жерар
Статус: Специалист
Рейтинг: 1064
• повысить рейтинг »

/ КОМПЬЮТЕРЫ И СОФТ / Программирование / Хитрости и секреты создания сайтов

Номер выпуска:	279
Дата выхода:	03.04.2011, 02:00
Администратор рассылки:	Калашников О.А. (Руководитель)
Подписчиков / экспертов:	331 / 109
Вопросов / ответов:	1 / 1

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

Вопрос № 182656:

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

Отправлен: 29.03.2011, 01:28
Вопрос задал: Грамотник Игорь (1-й класс)
Всего ответов: 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>
	 <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). Нужное расположение этой клетки опять же обеспечиваем стилем.

Ответ отправил: Жерар (Специалист)
Ответ отправлен: 29.03.2011, 08:46
Номер ответа: 266439
Россия, Томск
Тел.: 8-923-411-36-58

Оценка ответа: 5
Комментарий к оценке:
Спасибо. Второй способ вполне подойдет. position не внушает доверия.

Вам помог ответ? Пожалуйста, поблагодарите эксперта за это!
Как сказать этому эксперту "спасибо"?

Отправить SMS #thank 266439 на номер 1151 (Россия) | Еще номера »

Отправить WebMoney:

Оценить выпуск »
Нам очень важно Ваше мнение об этом выпуске рассылки!

Задать вопрос экспертам этой рассылки »

Скажите "спасибо" эксперту, который помог Вам!

Отправьте СМС-сообщение с тестом #thank НОМЕР_ОТВЕТА
на короткий номер 1151 (Россия)
Номер ответа и конкретный текст СМС указан внизу каждого ответа.
Полный список номеров »

* Стоимость одного СМС-сообщения от 7.15 руб. и зависит от оператора сотовой связи. (полный список тарифов)
** При ошибочном вводе номера ответа или текста #thank услуга считается оказанной, денежные средства не возвращаются.
*** Сумма выплаты эксперту-автору ответа расчитывается из суммы перечислений на портал от биллинговой компании.

© 2001-2011, Портал RFPRO.RU, Россия
Авторское право: ООО "Мастер-Эксперт Про"
Калашников О.А. | Гладенюк А.Г.
Хостинг: Компания "Московский хостер"
Версия системы: 2011.6.30 от 30.03.2011

Внимание! Некоторые из следующих ссылок позволяют войти в кабинет подписчика без знания пароля. Не передавайте никому это письмо во избежание несанкционированного доступа к Вашему личному кабинету на проекте Рассылки@Mail.Ru.

Архив рассылки * Рекомендуемые рассылки * Отключить рекламу * Мои подписки * Помощь

Сообщить о нарушении данной рассылкой правил Сервиса

Отказаться от получения данной рассылки: нажмите здесь или отправьте это письмо

Страницы

Популярные сообщения

воскресенье, 3 апреля 2011 г.