Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Отцентровка

Автор: Молоток 12.5.2008, 11:09

Перерыл кучу документов однако не понятно как сделать
Див по средине Экрана.
Допустим как на этом форуме Выскакиевает картинка и просит подождать.
smile

Спасибо!

Автор: krundetz 12.5.2008, 11:36

Странно что не нашли. Центрирование делается так:

Код


centriruemy_element
{
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-100px;
    width:200px;
    height:200px;
    z-index:100px;
}
* html centriruemy_element 
{ /* ie6 hack */
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

Автор: SelenIT 12.5.2008, 11:44

Цитата(krundetz @ 12.5.2008, 11:36

)

height: expression...

Только не height, а top, наверное smile

Автор: krundetz 12.5.2008, 11:54

Цитата

Только не height, а top, наверное

Странно но работает. Пример взял из рабочего кода. Давно делал и почему height уже не помню.

Автор: SelenIT 12.5.2008, 12:19

Цитата(krundetz @ 12.5.2008, 11:54

)

Странно но работает.

В каком IE?

Автор: krundetz 12.5.2008, 12:25

Цитата

В каком IE?

Да вы совершенно правы счас глянул код и понял что ошибся при копирование

Код


* html centriruemy_element 
{ /* ie6 hack */
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

это используется в другом месте.
Правильно будет:

Код


* html #loading
{ /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

Автор: Молоток 12.5.2008, 17:09

Код


<style>
.centriruemy_element
{
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-100px;
    width:200px;
    height:200px;
    z-index:100px;
}
*html centriruemy_element
{ /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

</style>
<div class="centriruemy_element">534534</div>

Не работает в IE.
Текст пропадает с Экрана!

Автор: krundetz 13.5.2008, 10:33

Нужно быть просто более внимательным. Раз у вас класс то и обращаться необходимо к классу. А что вы делаете вот в этой строке?

Код


*html centriruemy_element

По моему обращаетесь к какомута тегу <centriruemy_element> он у вас в документе есть?
Замените её на:

Код


*html .centriruemy_element

Автор: SelenIT 13.5.2008, 20:47

Цитата(krundetz @ 13.5.2008, 10:33

)

Нужно быть просто более внимательным.

+1 ;)

Цитата(krundetz @ 13.5.2008, 10:33

)

А что вы делаете вот в этой строке?

А что http://forum.vingrad.ru/index.php?showtopic=210813&view=findpost&p=1508823 в ней делаете? ;)

Ну и все-таки для position:absolute, имхо, однозначно логичнее указывать именно top, а не margin-top. А с дрожанием элемента при скроллинге бороться http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/.

Автор: krundetz 13.5.2008, 22:16

Цитата(SelenIT @ 13.5.2008, 20:47)

А что http://forum.vingrad.ru/index.php?showtopic=210813&view=findpost&p=1508823 в ней делаете? ;)

Я подразумевал что centriruemy_element будет заменено на нечто подобное:

Код


.1elemen

или

Код


#1elemen

или

Код


div.1elemen

или

Код


div#1elemen

и т.п.

Цитата(SelenIT)

Ну и все-таки для position:absolute, имхо, однозначно логичнее указывать именно top, а не margin-top. А с дрожанием элемента при скроллинге бороться http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/.

В данном случае придется для IE переопределять margin-top нулем, и вычислять top. А я всегда предпочитал не делать лишних движений.

Автор: SelenIT 14.5.2008, 10:07

Цитата(krundetz @ 13.5.2008, 22:16

)

придется для IE переопределять margin-top нулем

Зачем?

Цитата(krundetz @ 13.5.2008, 22:16

)

и вычислять top

Придется в любом случае (оставлять 50%, имхо, ненадежно). По мне, как раз лишним движением является

Код


- parseInt(this.offsetHeight / 2)

в вычислении margin'а - вместо простого и однозначного вычисления координаты... ;)

Автор: ksnk 14.5.2008, 14:55

А вот мне всегда казалось, что лучший центровальщик - это таблицы ;-). Самый кроссброузерный и безхакный. Правда доктайп нужно указать...

Код


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head><title>Center</title>
<style>
html, body {height:100%; margin:0; padding:0;}
</style>
</head>
<body>

<table style="width:100%;height:100%;position:absolute;"><tr><td valign="center" align="center"><img src="http://forum.vingrad.ru/style_images/2/t_look-off.gif"></td></tr></table>

...

</body>
</html>

Автор: Itsys 14.5.2008, 21:28

Тогда уж так, чтобы наверняка smile

Код


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head><title>Center</title>
<style>
html, body {height:100%; margin:0; padding:0;}
</style>
</head>
<body>
<div style="width:100%;height:100%;position:absolute;top:0">
<table style="width:100%;height:100%;"><tr><td valign="center" align="center"><img src="http://forum.vingrad.ru/style_images/2/t_look-off.gif"></td></tr></table>
</div>

...

</body>
</html>

Автор: ksnk 14.5.2008, 23:44

Itsys, А зачем div'чик? Вроде и так фурычит?

Автор: Itsys 15.5.2008, 09:25

Ну посмотри:

Код


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head><title>Center</title>
<style>
html, body {height:100%; margin:0; padding:0;}
</style>
</head>
<body>
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
<table style="width:100%;height:100%;position:absolute;"><tr><td valign="center" align="center"><img src="http://forum.vingrad.ru/style_images/2/t_look-off.gif"></td></tr></table>

...

</body>
</html>

Добавлено через 3 минуты и 27 секунд
Особенно хорошо получается в IE smile