Матвей Земсков

Заметки веб-мастера

Пятница, 28 мая 2010 08:13

Размещаем блок по центру окна браузера.

Оцените материал
(1 Голосовать)

В этой небольшой статье мне хотелось бы рассказать об одном простейшем способе размещения блока по центру окна браузера. В каких случаях может пригодиться данный метод?

Например, когда сайт закрыт для посетителей и нужно показать страничку с «заглушкой» или создать свою страничку, которую увидят посетители в случае ошибки 404 — объявление об отсутствии запрашиваемой страницы можно разместить в блоке в центре окна браузера.

центрирование блок в окне браузера

Ниже приведен код html и css.

html

<body>
  <div id="uc_block">&lt/div&gt
</body>

css

div#uc_block{
  width:808px;
  height:538px;
  background:url(under_construction.jpg) no-repeat top left;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-404px;
  margin-top:-269px;
 }

Эффект достигается следующими действиями:

  • создаем сам блок фиксированной ширины с фоном;
  • позиционируем его абсолютно;
  • делаем у блока отрицательные левый и верхний отступы равные половине величины блока

Минусом этого способа является то, что блок должен быть фиксированного размера.

Прочитано 3329 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: