Div в центре внимания

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем _NOOB, 4 ноя 2007.

Статус темы:
Закрыта.
  1. _NOOB

    _NOOB Гость

    Всем привет. Понимаю что вопрос гдупый, но я совсем запутался, недавно начал, не судите строго))

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

    _NOOB Гость

    2sax_ol Наверное забыл сказать лопата =)

    Есть еще варианты?
    up
     
  3. _NOOB

    _NOOB Гость

    значит бум юзать тейблы)
     
  4. garrymax

    garrymax Гость

    Не понимает DIV вертикальной позиции, если не задан парметр position: absolute; и top со значением расчета "высота видимой области" / 2 - "высота самого DIV" / 2 (скриптом надо позицировать).

    Проще воспользоваться таблицей:
    Код (Text):
    <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>
     
  5. Dmirys

    Dmirys Гость

    А зачем столько всего? Может просто написать:

    Код (Text):
    <table width="100%" height="100%"><tr><td align="center" valign="middle">Центр</td></tr></table>
    А про позиционирование div-ами написано уже много статей. Вот одна из них http://www.htmlbook.ru/content/?id=95
     
  6. Scorpicora

    Scorpicora Гость

    Для: Dmirys
    Конечно, я не специалист, но насколько мне известно из собственной практики height=100% для таблицы не работает. Ибо как определить, где эти самые 100% кончаются?
     
  7. Гость

    Прикольные у вас варианты :) но правильных 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>
    .
    .
    .
    Вот в таком духе )))
     
  8. garrymax

    garrymax Гость

    Я тоже такой философии, но скорее всего идет подстановка значений document.body.clientWidth и document.body.clientHeight или innerWidth и innerHeight, посему работает.
     
  9. Scorpicora

    Scorpicora Гость

    <!--QuoteBegin-sax_ol+8:11:2007, 13:27 -->
    <span class="vbquote">(sax_ol @ 8:11:2007, 13:27 )</span><!--QuoteEBegin-->у table нет свойства height, если мне не изменяет память
    [snapback]84761" rel="nofollow" target="_blank[/snapback]​
    [/quote]
    Вот-вот, и я о том же ;)
     
  10. Гость

    моё мнение...)

    <!--QuoteBegin-sax_ol+8:11:2007, 13:27 -->
    <span class="vbquote">(sax_ol @ 8:11:2007, 13:27 )</span><!--QuoteEBegin-->у table нет свойства height, если мне не изменяет память
    [snapback]84761" rel="nofollow" target="_blank[/snapback]​
    [/quote]
    <!--QuoteBegin-garrymax+7:11:2007, 03:16 -->
    <span class="vbquote">(garrymax @ 7:11:2007, 03:16 )</span><!--QuoteEBegin-->Проще воспользоваться таблицей:
    [snapback]84527" rel="nofollow" target="_blank[/snapback]​
    [/quote]

    хотя я думаю автор темы уже понял что и как...))
     
  11. Dmirys

    Dmirys Гость

    Ребята, вы не гадайте есть такое свойство или нет. Возьмите код и проверьте его в разных браузерах. И Опера и Файерфокс и Эксплорер жрут этот код без проблем. Тема себя исчерпала.
     
  12. garrymax

    garrymax Гость

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

    освежи память спецификациями (в HTML почему-то не указано, но в CSS есть), плюс к этому есть такое понятие, как свойство анонимных объектов (наследия свойств) - будешь приятно удивлен.

    Самое интересное, что я так же думал, но при использовании редактора стилей TopStyle Lite (bradsoft.com) узрел это впервые, а потом уже и в спецификациях нашел.
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей