Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как расположить элемент строго по центру страницы? 
:(
    Опции темы
barcelona
Дата 7.12.2007, 14:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
Здравствуйте!
Заранее извиняюсь, если этот вопрос уже обсуждался. Как мне расположить div строго по центру страницы, независимо от разрешения экрана?
PM MAIL   Вверх
KuZyagroup
Дата 8.12.2007, 19:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


magento solution
**


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

Репутация: 1
Всего: 4
Код

<script>
function center(obj){
    bw=document.body.clientWidth;
    bh=document.body.clientHeight;
    obj.style.top = bh/2+"px;";
    obj.style.left = bw/2+"px;";
    // or obj.style.cssText = "top:"+bh/2+"px; "+"left:"+bw/2+"px; position:absolute;" 


}
<script>

<div id="myDiv" style="position:absolute" onload="center(this)"></div>
PM MAIL   Вверх
ksnk
Дата 8.12.2007, 21:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

Репутация: 84
Всего: 386
KuZyagroup, А вы сами ЭТО проверяли? smile


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
KuZyagroup
Дата 8.12.2007, 22:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


magento solution
**


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

Репутация: 1
Всего: 4
ЭТО нет, ТАК делал
PM MAIL   Вверх
KuZyagroup
Дата 8.12.2007, 23:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


magento solution
**


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

Репутация: 1
Всего: 4
Работает в IE7,O9.5b,FF2
Работает в IE7,O9.5b,FF2
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function center(obj){
    bw=document.getElementsByTagName('HTML')[0].clientWidth;
    bh=document.getElementsByTagName('HTML')[0].clientHeight;
    // obj.style.left = bw/2+"px;";
    //obj.style.top  = bh/2+"px;";
    
    obj.style.cssText = "top:"+bh/2+"px; "+"left:"+bw/2+"px; position:absolute;" 


}
</script>
</head>
<body>
<div id="myDiv" style="position:absolute" >bvhjvghchg</div>
<script>center(document.getElementById('myDiv'))</script>
</body>
</html>
PM MAIL   Вверх
ksnk
Дата 9.12.2007, 00:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

Репутация: 84
Всего: 386
KuZyagroup
Угу, одна ошибка исправилась smile Осталось осознать, что div, верхний-левый угол которого располагается по центру и div, располагающийся в центре экрана все-таки несколько разные понятия...

Это сообщение отредактировал(а) ksnk - 9.12.2007, 01:11


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ksnk
Дата 9.12.2007, 01:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

Репутация: 84
Всего: 386
Вот это - работает в IE6 и FF2.0+
Код

 Hello! World<br>
 It's just a test!      Repeat the string as many times as you can...<br>

<div style="position:absolute;top:0;left:0;width:100%;height:100%">
  <table border=0 style="width:100%;height:100%;">
  <tr ><td align="center">
   <div style="width:200px;border:1px solid black;">!!!Это, собственно, наш ДИВ и есть!!!!</div>
  </td></tr></table>
</div>

Вероятно, можно обойтись без таблицы, но, imho, получится менее кроссбраузерное решение...

Это сообщение отредактировал(а) ksnk - 9.12.2007, 01:10


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
KuZyagroup
Дата 9.12.2007, 07:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


magento solution
**


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

Репутация: 1
Всего: 4
Блин, а подумать по анологии слабо
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function center(obj){
    bw=document.getElementsByTagName('HTML')[0].clientWidth;
    bh=document.getElementsByTagName('HTML')[0].clientHeight;
    dw=document.getElementById('myDiv').clientWidth;
    dh=document.getElementById('myDiv').clientHeight;
    // obj.style.left = bw/2+"px;";
    //obj.style.top  = bh/2+"px;";
    alert("top:("+bh+"-"+dh+")/2+px; "+"left:("+bw+"-"+dw+")/2+px; position:absolute;");
    obj.style.cssText = "top:"+(bh-dh)/2+"px; "+"left:"+(bw-dw)/2+"px; position:absolute;"; 


}
</script>
</head>
<body>
<div id="myDiv" style="position:absolute" ><img src="img/dj/lubimoff/442176.jpg" /></div>
<script>center(document.getElementById('myDiv'))</script>
</body>
</html>

Линка на пример в нете
Совместимать как и в прошлый раз

Добавлено через 8 минут и 1 секунду
2ksnk:
    not <br> u must write or <br></br> or <br />
    are u miss valign="middle"
    and last лучше иметь одну ф-цию которая равняет все нужные дивы чем "ручками"
all the best
PM MAIL   Вверх
KuZyagroup
Дата 9.12.2007, 07:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


magento solution
**


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

Репутация: 1
Всего: 4
http://forum.vingrad.ru/forum/topic-184675.html
PM MAIL   Вверх
ksnk
Дата 9.12.2007, 12:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

Репутация: 84
Всего: 386
KuZyagroup, по линке на ветку в форуме, насколько видно из последнего сообщения FireDemon'а, он остался в совершенных непонятках. ;-) Видимо, что-то не то с примером...
постарайтесь написать свой пример без грязи и мусора...
  • Зачем там нужен ...getElementById('MyDiv')... если передается параметром obj?
  • зачем НАМ  нужен этот alert?
  • почему вам кажется, что cssText удобнее, чем ...left и ...top? Вероятно тем, что нужно писать "px", вместо "px;"?
  • при смене размера окна дивчик не остается по центру. Впрочем, баг это или фича - будет решать barcelonа.

Цитата(KuZyagroup @  9.12.2007,  07:10 Найти цитируемый пост)
лучше иметь одну ф-цию которая равняет все нужные дивы чем "ручками"
 И где вы увидели "ручки"?

Цитата(KuZyagroup @  9.12.2007,  07:10 Найти цитируемый пост)
    are u miss valign="middle"
 May be, однако у меня и так все показывается... Вероятно, если вручную не править этот valign, то так оно и будет. Хотя, добавить   <tr ><td align="center" valign="middle"> в 6-ю строчку моего пример, вероятно, не помешает...




, 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0757 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.