Не работает выравнивание.
Выравнивает только по ширине, по высоте ни как...Ошибок не находит,
Обозреватель IE-8.
function winResize(){
var contObj=document.getElementById("photo");
var bodyObj=document.body;
var contWidth=contObj.offsetWidth;
var contHeight=contObj.offsetHeight;
var bodyWidth=bodyObj.clientWidth;
var bodyHeight=bodyObj.clientHeight;
contObj.style.left=(bodyWidth-contWidth)/2+"px";
contObj.style.top=(bodyHeight-contHeight)/2+"px";
}
window.onresize=winResize;
winResize();
|
Может быть имеет смысл решить эту задачу через CSS?
Кстати, проверь, определены ли значения по высоте. Раз не выравнивает, то либо у photo позиционирование static, либо contHeight/bodyHeight undefined. |
Для меня непонятное решение проблемы...:cray:
убрал строку в начале документа "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" И всё заработало... Может кто объяснит:write: |
Чтобы понять причину нужно привести HTML-код тоже
|
Вы убрали DOCTYPE и браузер перешел в квирк-мод.
Это не есть гуд. Почему? Прочтите зачем нужен DOCTYPE и почему квирк-мод это плохо. http://webmascon.com/topics/coding/25a.asp |
Так вот, сценарий со строкой DOCTYPE работает не правильно, не выравнивает по высоте!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Документ без названия</title>
<style>
.photo {
height: 100px;
width: 100px;
position: absolute;
left: 50px;
top: 50px;
background-color: #000;
}
</style><script>
function winResize(){
var contObj=document.getElementById("photo");
var bodyObj=document.body;
var contWidth=contObj.offsetWidth;
var contHeight=contObj.offsetHeight;
var bodyWidth=bodyObj.clientWidth;
var bodyHeight=bodyObj.clientHeight;
contObj.style.left=(bodyWidth-contWidth)/2+"px";
contObj.style.top=(bodyHeight-contHeight)/2+"px";
}
</script></head>
<div id="photo" class="photo"> </div>
<script>
window.onresize=winResize;
winResize();
</script>
<body>
</body>
</html>
|
spbspidir,
Размеры окна браузера )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Документ без названия</title>
<style>
.photo {
height: 100px;
width: 100px;
position: absolute;
left: 50px;
top: 50px;
background-color: #000;
}
</style>
<script>
function winResize(){
var contObj=document.getElementById("photo");
var bodyObj=document.documentElement;
var contWidth=contObj.offsetWidth;
var contHeight=contObj.offsetHeight;
var bodyWidth=bodyObj.clientWidth;
var bodyHeight=bodyObj.clientHeight;
contObj.style.left=(bodyWidth-contWidth)/2+"px";
contObj.style.top=(bodyHeight-contHeight)/2+"px";
}
</script></head>
<body>
<div id="photo" class="photo"> </div>
<script>
window.onresize=winResize;
winResize();
</script>
</body>
</html>
|
spbspidir ... есть чудесная штука — w3c html validator (http://validator.w3.org/).
Она учит не пихать div и script куда не надо. Как .photo вообще позиционировать относительно body, если оно не является дочерним элементом и расположено там, где его быть не может. Кроме того если известен размер изображения то с какого перепугу вообще скрипт использовать? Даже если не известно, то задачу можно решить с помощью pure css. Стиль исправь на нижеприведенный, скрипт убери вообще, div помести ВНУТРЬ body. .photo { height: 100px; width: 100px; position: absolute; left: 50%; top: 50%; margin:-50px 0 0 -50px; background-color: #000; } Ну еще можешь html,body height/min-height:100%; добавить. Это для случая когда ты знаешь размер картинки. А если не знаешь, то: http://cssing.org.ua/2007/04/26/anot...valign-method/ http://habrahabr.ru/tag/вертикальное%20выравнивани / http://www.jakpsatweb.cz/css/css-ver...-solution.html и еще 100500 статей. Не думаю, что тебе для этого нужен скрипт. |
| Часовой пояс GMT +3, время: 23:04. |