Помощь - Поиск - Пользователи - Календарь
Полная версия этой страницы: Div в центре внимания
Форум программистов > Интернет и сети > Web-программирование > HTML, CSS, XML, JavaScript
_NOOB
4:11:2007, 19:58
Всем привет. Понимаю что вопрос гдупый, но я совсем запутался, недавно начал, не судите строго))

Нужно поместить ДИВ в центр страничке, на ней больше ничего нет, делаю так
<html>
  <head>
    <title>DIV</title>
    <style>
     div {text-align:center; vertical-align:middle;}
    </style>
  </head>
  <body bgcolor=lightgreen>
        <div>ЦЕНТР ВСЕГО!!!</div>
  </body>
</html>


А позиционирует только по центру по горизонтали, по вертикали менять не хочет, как это сделать??
Заранее спасибо =)
sax_ol
5:11:2007, 06:15
Для: _NOOB
потому, что он "узенький" smile.gif
_NOOB
5:11:2007, 14:05
2sax_ol Наверное забыл сказать лопата =)

Есть еще варианты?
up
sax_ol
5:11:2007, 14:37
ну не поддерживает див это
Цитата(_NOOB @ 5:11:2007, 16:05 )
Есть еще варианты?

посмотрите вариант тут - ]]>http://ya.ru/]]>
_NOOB
5:11:2007, 18:19
значит бум юзать тейблы)
garrymax
7:11:2007, 00:16
Не понимает DIV вертикальной позиции, если не задан парметр position: absolute; и top со значением расчета "высота видимой области" / 2 - "высота самого DIV" / 2 (скриптом надо позицировать).

Проще воспользоваться таблицей:
<TABLE width=100% height=100%>
<TR><TD width="25%"> </TD><TD width="50%"> </TD><TD width="25%"> </TD></TR>
<TR><TD></TD><TD><center>ЦЕНТР ВСЕГО!!!</center></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR><TABLE>
Dmirys
7:11:2007, 03:29
А зачем столько всего? Может просто написать:

<table width="100%" height="100%"><tr><td align="center" valign="middle">Центр</td></tr></table>


А про позиционирование div-ами написано уже много статей. Вот одна из них ]]>http://www.htmlbook.ru/content/?id=95]]>
Scorpicora
7:11:2007, 14:50
Для: Dmirys
Конечно, я не специалист, но насколько мне известно из собственной практики height=100% для таблицы не работает. Ибо как определить, где эти самые 100% кончаются?
Юрец
7:11:2007, 21:53
Прикольные у вас варианты smile.gif но правильных 2:
1. как было указано выше намудрить с таблицами

2.
.
.
<body onLoad="pos()">
.
.
<script language="javascript">
function pos()
{
if(document.all)
{
W=document.body.clientWidth;
H=document.body.clientHeight;
}
else
{
W=innerWidth;
H=innerHeight;
};

document.getElementById('dv').style.left=W/2;
document.getElementById('dv').style.top=H/2;
}
</script>
.
.
.
<style>
.gg{position:absolute;}
</style>
.
.
<div class=gg id="dv">ЦЕНТР ВСЕГО!!!</div>
.
.
.
Вот в таком духе )))
sax_ol
8:11:2007, 06:19
Цитата(Юрец @ 7:11:2007, 23:53 )
<body onLoad="pos()">

"маловато будет" (с) smile.gif
garrymax
8:11:2007, 09:52
Цитата(Scorpicora @ 7:11:2007, 18:50 ) *
Конечно, я не специалист, но насколько мне известно из собственной практики height=100% для таблицы не работает. Ибо как определить, где эти самые 100% кончаются?

Я тоже такой философии, но скорее всего идет подстановка значений document.body.clientWidth и document.body.clientHeight или innerWidth и innerHeight, посему работает.
sax_ol
8:11:2007, 10:27
у table нет свойства height, если мне не изменяет память
Scorpicora
8:11:2007, 16:22
Цитата(sax_ol @ 8:11:2007, 13:27 )
у table нет свойства height, если мне не изменяет память
*

Вот-вот, и я о том же smile.gif
Юрэц
8:11:2007, 16:56
моё мнение...)

Цитата(sax_ol @ 8:11:2007, 13:27 )
у table нет свойства height, если мне не изменяет память
*

Цитата(garrymax @ 7:11:2007, 03:16 )
Проще воспользоваться таблицей:
*


хотя я думаю автор темы уже понял что и как...))
Dmirys
9:11:2007, 02:51
Ребята, вы не гадайте есть такое свойство или нет. Возьмите код и проверьте его в разных браузерах. И Опера и Файерфокс и Эксплорер жрут этот код без проблем. Тема себя исчерпала.
sax_ol
9:11:2007, 05:59
Для: Dmirys
При чем тут браузеры и то что "жрут "?
Мало ли чего можно в теге написать, это никак не соотносится со свойствами.
garrymax
9:11:2007, 09:51
Цитата(sax_ol @ 9:11:2007, 09:59 ) *
При чем тут браузеры и то что "жрут "?
Мало ли чего можно в теге написать, это никак не соотносится со свойствами.

Для: Dmirys Не спорь с теоретиками - не докажешь smile.gif , даже если предложить им поиграться со значениями параметра height для этой самой таблицы и посмотреть, воспринимают браузеры это, как свойство или нет.

Цитата(sax_ol @ 8:11:2007, 14:27 ) *
у table нет свойства height, если мне не изменяет память
освежи память спецификациями (в HTML почему-то не указано, но в CSS есть), плюс к этому есть такое понятие, как свойство анонимных объектов (наследия свойств) - будешь приятно удивлен.

Самое интересное, что я так же думал, но при использовании редактора стилей TopStyle Lite (]]>bradsoft.com]]>) узрел это впервые, а потом уже и в спецификациях нашел.
sax_ol
9:11:2007, 10:46
в предыдущем посте, немного некорректно выразился, признаю smile.gif
однако
Для: garrymax
предлагаю всеже самому разобраться что такое DOM HTML (Document Object Model), в чем есть разница между Свойства тега/объекта и CSS модель его же (http://www.w3.org/ вам в помощь),
далее понять как калькулируется высота таблицы, и почему, к примеру, у дива есть это свойство а у таблицы нет
с результатами - сюда, и тогда мы порассуждаем о теории и практики, браузерах и т.д. smile.gif
Для просмотра полной версии этой страницы, пожалуйста, пройдите по ссылке.
Форум IP.Board © 2001-2009 IPS, Inc.