DHTML://позиционирование слоев по центру - 2

     Я уже писал о позиционировании слоев по центру "методом микроскопа", метод вполне действенный, но с некоторыми ограничениями может использоваться. Другой метод "привязки" слоев к центру более универсален и, видимо, более "научный". :))) Большинство страниц делаются веб дизайнерами с ориентированием таблиц по левому краю или по центральной вертикали. При привязке к левому краю все просто и надежно, просто указываем расположение слоев традиционным способом для абсолютного позиционирования, при ориентации слоев по центру веб мастеру приходится высчитывать позицию слоя относительно центра страницы. Этот метод тоже не всегда удобен, но, тем не менее, если таблицы ориентированны по центру и имеют фиксированную ширину, разместить слои по центру можно для получения, например, эффекта появляющихся подсказок или скрытого меню. Скрипт простой, удобный для применения и опробован мной в Эксплорерах и Нетскейпах начиная от четвертых версий. Работает без проблем.

<script language="JavaScript"> <!-- var xPos = 0; var offset = 0; var name = navigator.appName; if (name == "Microsoft Internet Explorer") { xPos = document.body.clientWidth; ooo1.style.left = xPos/2-30; ooo2.style.left = xPos/2-30; } else { xPos = window.innerWidth; document.ooo1.pageX = xPos/2-30; document.ooo2.pageX = xPos/2-30; } // --> </script> Все довольно просто - определяем разрешение экрана, делим на два и от полученных координат ведем отсчет. Обратите внимание - для Нетскейпа и Эксплорера используем разные методы. Интерес представляют строки ooo1.style.left = xPos/2-30; ooo2.style.left = xPos/2-30; ooo1 и ooo2 - названия наших двух слоев. Переменная xPos - получаемая ширина экрана. При делении ее на два мы получаем координаты центра по горизонтали: xPos/2. В данном случае я отнимаю от полученного результата 30пикс, так как ширина моего будет 60пикс. Между прочим, обратите внимание, в скрипте я узнаю координаты по ширине и нам ничего не мешает добавить вычисление координат по вертикали. Таким образом мы сможем разместить слой точно по центру, независимо от разрешения экрана. Только не забывайте отнимать от полученного результата половину ширины (или высоты) размещаемого слоя. :))) И в описании слоя укажите id="ооо2" - имя слоя.

Информация взята с сайта mtk.on.ufanet.ru



© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин