VPF::Отцентровка - Форум программистов

Молоток

Дата 12.5.2008, 11:09 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 41
Регистрация: 3.4.2008

Репутация: нет
Всего: -2

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

Спасибо!

Это сообщение отредактировал(а) Молоток - 12.5.2008, 11:09

krundetz

Дата 12.5.2008, 11:36 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

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

Код


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 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

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

)

height: expression...

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

krundetz

Дата 12.5.2008, 11:54 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

Цитата

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

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

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

SelenIT

Дата 12.5.2008, 12:19 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

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

)

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

В каком IE?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

krundetz

Дата 12.5.2008, 12:25 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

Цитата

В каком 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');
}

Это сообщение отредактировал(а) krundetz - 12.5.2008, 12:26

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

Молоток

Дата 12.5.2008, 17:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 41
Регистрация: 3.4.2008

Репутация: нет
Всего: -2

Код


<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.
Текст пропадает с Экрана!

Это сообщение отредактировал(а) Молоток - 12.5.2008, 17:11

krundetz

Дата 13.5.2008, 10:33 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

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

Код


*html centriruemy_element

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

Код


*html .centriruemy_element

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

SelenIT

Дата 13.5.2008, 20:47 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

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

)

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

+1 ;)

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

)

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

А что вы в ней делаете? ;)

Ну и все-таки для position:absolute, имхо, однозначно логичнее указывать именно top, а не margin-top. А с дрожанием элемента при скроллинге бороться как-то так.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

krundetz

Дата 13.5.2008, 22:16 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

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

А что вы в ней делаете? ;)

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

Код


.1elemen

или

Код


#1elemen

или

Код


div.1elemen

или

Код


div#1elemen

и т.п.

Цитата(SelenIT)

Ну и все-таки для position:absolute, имхо, однозначно логичнее указывать именно top, а не margin-top. А с дрожанием элемента при скроллинге бороться как-то так.

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

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

SelenIT

Дата 14.5.2008, 10:07 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

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

Код


<!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>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Itsys

Дата 14.5.2008, 21:28 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Тогда уж так, чтобы наверняка 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 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Itsys

Дата 15.5.2008, 09:25 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Ну посмотри:

Код


<!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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »