Позиционирование блока с контентом

Опубликовал: Среда, Февраль 15, 2012 в категории CSS | Пока нет комментариев

Поскольку перед нами стоит задача создания «резинового» макета, не- желательно задавать ширину области с контентом, но, впрочем, это в любом случае не обязательно. Однако в настоящее время область с контентом размещается там, где должно быть меню. Чтобы все встало на свои места, достаточно задать для области с контентом свойство mar- gin, освободив пространство для меню. Результат показан на рис. 9.30.

#content {

margin-left: 16em;

margin-right: 2em;

}

Теперь все элементы расположены аккуратно по отношению друг к дру- гу, и можно перейти к заданию стиля каждого из них с помощью CSS, чтобы получить результат, изображенный на рис. 9.27. Использован- ная таблица стилей приведена полностью в начале раздела.

Совет

Использование em для позиционирования блоков с текстом. В качестве единиц измерения для позиционирования элементов документа я использо- вала em. Это обеспечит пропорциональное изменение размеров блока при из- менении пользователем размера шрифта, позволяя избежать перекрытия эле- ментов. Такое решение оптимально для задания ширины блоков и отступов на

Рис. 9.30. Добавление внешних отступов для области с контентом

Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.

Add to Social Bookmarks
  • del.ici.ous
  • Digg
  • Furl
  • Google
  • Simpy
  • Spurl
  • Y! MyWeb
  • BobrDobr
  • Mr. Wong
  • Yandex.Bookmarks
  • Text 2.0
  • News2
  • AddScoop
  • RuSpace
  • RUmarkz
  • Memori
  • Google Bookmarks
  • Pisali
  • SMI 2
  • Moe Mesto
  • 100 Zakladok
  • Vaau!
  • Technorati
  • RuCity
  • LinkStore
  • NewsLand
  • Lopas
  • Закладки - I.UA
  • Connotea
  • Bibsonomy
  • Trucking Bookmarks
  • Communizm
  • UCA

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>