Возможно ли отцентрировать страницу по вертикали?

[Belovsan]

Такая ситуация. Есть страница с фикс высотой. Нужно сделать так, чтобы при большом разрешении экрана она была вертикально отцентрирована, а не прижималась к верхнему краю. Такое вообще возможно сделать?

[psywalker]

Есть такое дело. height: высота, position: absolute; margin-top: минус высота

[Belovsan]

Что-то не хочет работать ваш метод (

Я слыхал, что это дело как-то с помощью js лечится.

Edited October 6, 2010 by Belovsan

[psywalker]

Что-то не хочет работать ваш метод (

Покажи код.

[Belovsan]

Вот ссылка: http://rubanys.narod.ru/index.html

Там получается, что нужно, чтобы вся страница (она имеет высоту804пикс) была по вертикали по центру

Типа чтобы сверху и снизу одинаковые отступы были от неё. А сейчас она прижимается к верхней части.

Edited October 6, 2010 by Belovsan

[psywalker]

Вот ссылка: http://rubanys.narod.ru/index.html

Отлично, а теперь покажи мне в коде, где ты сделал так, как я тебе говорил?

#box {
height:804px;
margin-top:-202px;
position:absolute;
top:50%;

[Belovsan]

Вот сделал и исправил: #box{height:804px; position:absolute; margin-top:-804px;}

просто оно всё исчезает, вот я и не стал так делать

[psywalker]

Вот сделал и исправил: #box{height:804px; position:absolute; margin-top:-804px;}

просто оно всё исчезает, вот я и не стал так делать

Щас работает? Сделай так:

#box {
height:804px;
margin-top:-202px;
position:absolute;
top:50%;

[Belovsan]

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

[psywalker]

Так появилось верхнее смещение.

Что значит верхнее смещение? Ведь блок теперь ровно по середине, по вертикали, разве нет?

[Belovsan]

Блок то посредине. Но:

1. Не -202, а -402 (вроде как половину высоты надо)

2. При низком разрешении тогда верхняя часть страницы обрезается на экране.

Edited October 6, 2010 by Belovsan

[psywalker]

1. Не -202, а -402 (вроде как половину высоты надо)

Точняк, стормозил.

2. При низком разрешении тогда верхняя и нижняя часть страницы обрезается на экране.

Ну конеша, а что ты хотел. Ведь ты же сам высоту фиксированную поставил.

Хотя стой, щас пошаманим, не боись...

[Belovsan]

Ну смотри, у меня есть фикс высота в 804пикс. Надо чтобы страница при низком разрешении полностью отображалась по высоте (со скролом ессно), а при высоком центрировалась по вертикали. Во какая хрень (

[psywalker]

Ну ок, тогда погрузи всё в такой див

<div style="height: 100%; min-height: 804px; position: relative;" id="wrap">

[Belovsan]

Гениально ! Спасибо, дружище !

[psywalker]

Гениально ! Спасибо, дружище !

Да ерунда, тебе спасибо

[Belovsan]

Кстати, а для шестого осла надо хак прописывать?

[psywalker]

Кстати, а для шестого осла надо хак прописывать?

Для ИЕ6 вот такую хрень пропиши

html,body { height: expression(document.childNodes[1].offsetHeight < 804? '804px' : '100%');}

[Belovsan]

Во, как раз собирался что-то в этом роде прописывать. Низкий поклон тебе, до земли, барин

[psywalker]

Низкий поклон тебе, до земли, барин

Не за что холоп.

[Belovsan]

Да нет, есть за что. Удачи тебе, дружище!

[psywalker]

Да нет, есть за что. Удачи тебе, дружище!

Спасиб, и тебе

[Belovsan]

Для ИЕ6 вот такую хрень пропиши

html,body { height: expression(document.childNodes[1].offsetHeight < 804? '804px' : '100%');}

А такая хрень не работает. Там же у нас мин высота задана для id="wrap". И когда прописываю её для этого блока, то всё равно мин высота не устанавливается в ИЕ6. Ну, и ессно, если для html,body, то само собой тож ничего не выходит.

Edited October 7, 2010 by Belovsan

[psywalker]

А такая хрень не работает. Там же у нас мин высота задана для id="wrap". И когда прописываю её для этого блока, то всё равно мин высота не устанавливается в ИЕ6. Ну, и ессно, если для html,body, то само собой тож ничего не выходит.

Странно, я у себя тестил, всё работало.

[Belovsan]

ты её для html,body прописывал или всё таки для wrap? вроде для wrap надо по идее...

[psywalker]

ты её для html,body прописывал или всё таки для wrap?

Именно для html,body в ИЕ6

Вот вставь этот код и проверь. Работает везде.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	html,body { height: 100%; }
	html,body { height: expression(document.childNodes[1].offsetHeight < 500? '500px' : '100%');}
	#wrap { position: relative;height: 100%;min-height: 500px; width: 500px;}
	#content { position: absolute; min-height: 500px; width: 100%; height: 500px; top: 50%; margin-top: -250px; background: red;}
</style>
</head>

<body>
	<div id="wrap">

		<div id="content">Content</div>

	</div>
</body>
</html>