Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Div посередине окна по вертикали
 
 автор: Киналь   (23.03.2008 в 10:37)   письмо автору
 
 

Как расположить абсоютно позиционированный div посередине окна браузера (по вертикали)? Если задать параметр top:20%, то отсчет идет от верха документа, а не экрана.

   
 
 автор: elenaki   (24.03.2008 в 10:35)   письмо автору
 
   для: Киналь   (23.03.2008 в 10:37)
 

function putLayer() {
var topLayer = (getWindowHeight() - 340)/2 /// 340 - vusota sloya !
document.getElementById(\"contents\").style.top = topLayer + \"px\"
}
....


<body onload=\"putLayer();\" onresize=\"putLayer();\" ... >

....

   
 
 автор: Madman   (24.03.2008 в 19:44)   письмо автору
 
   для: Киналь   (23.03.2008 в 10:37)
 

Ой!!! Не надо вам ни каких JavaScrip'ов. Зачем?

Ниже выкладываю код для расположения посередине окна браузера изображения. По аналогии делаете и для слоя (<img> меняете на <div>)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>В разработке</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}

html,
body {
    height:100%;
}

html {
    overflow:auto;
}

#middle {
    position:relative;
    height:100%;
    width:100%;
    overflow:hidden;
}

#horizont {
    position:absolute;
    top:50%;
    left:50%;;
    width:0;
    height:0;
}

#horizont img {
    display:block;
    position:relative;
    width:463px;
    height:600px;
    margin:-300px 0 0 -232px;
}
</style>
</head>

<body>
    <div id="middle">
        <div id="horizont">
            <img src="" width="463" height="600" alt="В разработке" />
        </div>
    </div>
</body>
</html>

   
 
 автор: Киналь   (24.03.2008 в 21:48)   письмо автору
 
   для: Madman   (24.03.2008 в 19:44)
 

Все это, ели н ошибаюсь, будет от верхнего края документа, а не окна. Вобщем, погуглил потщательнее и нашел вот такой скрипт:

function mousePageXY(e) 
{  var x = 0, y = 0; 
var coord=new Array(); 
  if (!e) e = window.event; 
  if (e.pageX || e.pageY) 
  { x = e.pageX; 
    y = e.pageY; 
  } 
  else if (e.clientX || e.clientY) 
  { x = e.clientX + (document.documentElement.scrollLeft || 
document.body.scrollLeft) - document.documentElement.clientLeft; 
    y = e.clientY + (document.documentElement.scrollTop || 
document.body.scrollTop) - document.documentElement.clientTop; 
  } 
  coord[0]=x;coord[1]=y; 
  return coord; 

}


Самое ценное тут - document.documentElement.scrollTop ||
document.body.scrollTop
, что я благополучно и применил)


Но все равно - спасибо за ответы!

   
 
 автор: Madman   (24.03.2008 в 23:30)   письмо автору
 
   для: Киналь   (24.03.2008 в 21:48)
 

Уточню, что если вы поместите абсолютно позиционируемый блок в body (т.е. чтобы body был его родителем) и внесете в CSS вот такое правило html, body {height:100%}, то при любых раскладах, блок будет позиционироваться поцентру окна браузера, но только в том случае, если нет скроллера (т.е. контент полностью влезает на страницу).

В противном случае, используйте вместо absolute - fixed (для нормальных браузеров), а для IE либо expression, либо можно тоже сделать средствами CSS эмуляцию fixed.
Тогда у вас блок будет всегда поцентру рабочей области окна браузера...

   
 
 автор: Киналь   (25.03.2008 в 00:16)   письмо автору
 
   для: Madman   (24.03.2008 в 23:30)
 

>но только в том случае, если нет скроллера (т.е. контент полностью влезает на страницу).

Вот-вот. Я потому это вначале и оговорил.

А fixed использовать пробовал, но тогда посыпалась вся верстка на div\'ах) Вобщем сейчас работает - и ладно. Спасибо еще раз.

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования