ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить DIV absolute точно по середине окна браузера?
16 сообщений из 16, страница 1 из 1
Как разместить DIV absolute точно по середине окна браузера?
    #35591624
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
Как разместить DIV absolute точно по середине окна браузера?
Ну типа нужно сделать окно сообщения, но чтобы оно было точно посередине браузера?
...
Рейтинг: 0 / 0
13.10.2008, 16:04
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35591667
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
из ширины окна вычесть ширину дива, поделить на 2 - середина по ширине

P. S. сам слабо представляю, чего написал))))))
...
Рейтинг: 0 / 0
13.10.2008, 16:15
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35595341
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
Korcarиз ширины окна вычесть ширину дива, поделить на 2 - середина по ширине

P. S. сам слабо представляю, чего написал))))))

Мне бы код, просто я так пробовал о разные браузера имеют разные значения, поэтому как-то не понятно как сделать универсально?
Может кто делал напишите пример, плиииииз!
...
Рейтинг: 0 / 0
15.10.2008, 12:04
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35611689
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
armix2000,

Неужели никто не знает как?
Я пробовал из ширины окна вычесть ширину дива, поделить на 2 - середина по ширине - не получается, дело в том, что чем больше сама страница тем шире это значение и поэтому ДИВ получается ниже чем середина.

Мне нужно как-то вычислять ширину, высоту видимой области окна, т.е что сейчас видно на экране, и затем по данным параметрам сделать посередине ДИВ?

помогите....
...
Рейтинг: 0 / 0
23.10.2008, 13:33
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35611865
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<html>
<script>
function ld(){
var div=document.getElementById("div");
div.style.left=(parseInt(document.body.clientWidth)-parseInt(div.clientWidth))/ 2 +"px";
div.style.top=(parseInt(document.body.clientHeight)-parseInt(div.clientHeight))/ 2 +"px";
}
</script>
<body onload="ld()">
<div id="div" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background-color:yellow"></div>
</body>
</html>
...
Рейтинг: 0 / 0
23.10.2008, 14:10
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35612377
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
ShSerge
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<html>
<script>
function ld(){
var div=document.getElementById("div");
div.style.left=(parseInt(document.body.clientWidth)-parseInt(div.clientWidth))/ 2 +"px";
div.style.top=(parseInt(document.body.clientHeight)-parseInt(div.clientHeight))/ 2 +"px";
}
</script>
<body onload="ld()">
<div id="div" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background-color:yellow"></div>
</body>
</html>


Спасибо большое!
...
Рейтинг: 0 / 0
23.10.2008, 15:55
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35612435
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Вот вариант на css:
Код: plaintext
1.
2.
3.
4.
5.
<div style="position:absolute;width:100%;height:100%;display:table-cell;text-align:center:vertical-align:middle">
<div style="width:100px;height:100px">
YOUR TEXT
</div>
</div>
Исправишь пару опечаток и будет все равботать и без джса)

У меня остался один нерв и ты на него действуешь!
...
Рейтинг: 0 / 0
23.10.2008, 16:11
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35612517
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
А я использую классический подход :):
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
.message {
	width: 400px;
	height: 300px;
	position: absolute;
	top:  50 %;
	left:  50 %;
	margin-left: -200px;
	margin-top: -150px;
	background: ...;
	border: ...;
}
...
Рейтинг: 0 / 0
23.10.2008, 16:31
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35612738
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
IDVsbruckА я использую классический подход :):
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
.message {
	width: 400px;
	height: 300px;
	position: absolute;
	top:  50 %;
	left:  50 %;
	margin-left: -200px;
	margin-top: -150px;
	background: ...;
	border: ...;
}

Как оказалось - правильнее всего. Снимаю шляпу. С доктайпом вполне дружит, в отличие от моего поста и поста Ренат а.
...
Рейтинг: 0 / 0
23.10.2008, 17:24
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35629528
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Свят
Гость
ShSergeIDVsbruckА я использую классический подход :):
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
.message {
	width: 400px;
	height: 300px;
	position: absolute;
	top:  50 %;
	left:  50 %;
	margin-left: -200px;
	margin-top: -150px;
	background: ...;
	border: ...;
}

Как оказалось - правильнее всего. Снимаю шляпу. С доктайпом вполне дружит, в отличие от моего поста и поста Ренат а.

заглючит если: clientWidth<width clientHeigth<height

лутше через table если позволяет идеология
приблизительно так:
Код: plaintext
1.
2.
3.
4.
5.
<table style="height:100%;vertical-align:middle;border:0;">
<tr>
<td>...
</td>
</tr>
</table>
...
Рейтинг: 0 / 0
01.11.2008, 03:48
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35629532
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Нет, не глючит. Просто выходит за пределы окна, а скрулер не распространяется на отрицательные координаты, поэтому справа и внизу показывается, а сверху и слева обрезается.

Но, думаю, это не глюк, а а) недоработка дизайнера; либо б) клиент с малым разрешением. В случае а - нафиг дизайнера, в случае б - клиента. Первый предпочительней, второй менее болезненный, ведь обычно сайты делаются под разрешенку (мин) 1024х768 или 1280х800 или 1280х1024, хотя, признаюсь, мне было бы приятно писать под родное 1920х1200 - информации много влазит.

Кстати, вопрос в студию: под какое разрешение обычно вы пишите? (вряд ли всегда сайт полностью резиновый)
...
Рейтинг: 0 / 0
01.11.2008, 04:13
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35629539
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Свят
Гость
IDVsbruck,

Вопрос метафизический, ответа не имеет :)
...
Рейтинг: 0 / 0
01.11.2008, 04:22
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35629547
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Ну почему же? Имеет.
Программер должен проверить все. Мы тут говорили не про то, куда что выйдет, а как поместить. А вот если вышло, то, повторюсь - промах дизайнера: если моники сейчас и на 1024 не найти, то коммуникаторы и наладонники в большинстве не выходят больше vga. Значит, не было проверки и предложенного варианта.

И второе - твой вариант сработает, но не при всех доктайпах ... Так что не универсальный. Вариант Сержа универсален, но также может выходить в отрицательную сторону, ну, и само собой, немного тянет ресурсов и времени. За способ Рената сказать ничего не могу, но что-то меня очень уж терзают сомнения по поводу кроссбраузерности использования простого вертикального позиционирования в диве (знаю, что работать не будет, но/и пробовать не хочу).
...
Рейтинг: 0 / 0
01.11.2008, 04:47
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35629554
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Свят
Гость
Мыши плакали, калолись но продолжали жрать кактус...

Дизайнеров обижать нельзя! люди творческие. Програмеров? они не виноваты что досих пор нет UGUI (универсального GUI)
Все проблемы с дизайном можно решить во flash но там задрочка с поискавиками и размерами сайта. Плюс новый сегмент пользователей с смартфонами и кпк (сам пользовался нокиа7710 в далеком Воловце, упал сервак кассы, надо было глянуть свободные места, сайт uz в 640х320 отобразился весьма прилично :)
Итого: метавизический вопрос свели к вопросу руской интелегенции "кто виноват? и что делать?" каторые также ответа неимеют...
...
Рейтинг: 0 / 0
01.11.2008, 05:00
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35630020
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
IDVsbruckНу почему же? Имеет.
Программер должен проверить все. Мы тут говорили не про то, куда что выйдет, а как поместить. А вот если вышло, то, повторюсь - промах дизайнера: если моники сейчас и на 1024 не найти, то коммуникаторы и наладонники в большинстве не выходят больше vga. Значит, не было проверки и предложенного варианта.

И второе - твой вариант сработает, но не при всех доктайпах ... Так что не универсальный. Вариант Сержа универсален, но также может выходить в отрицательную сторону, ну, и само собой, немного тянет ресурсов и времени. За способ Рената сказать ничего не могу, но что-то меня очень уж терзают сомнения по поводу кроссбраузерности использования простого вертикального позиционирования в диве (знаю, что работать не будет, но/и пробовать не хочу).
Ну я диву присваиваю дисплау табл-целл, следовательно он становиться ячейкой. Все три браузера это хорошо понимают и вертикал алигн нормально начинает центрироваться по вертикали. Если так не кактит ну тогда вместо дива использовать можно просто табличку.

зы. И почему всем ВЕЧНО не нарвиться мои div`ские vertical-align?)
...
Рейтинг: 0 / 0
01.11.2008, 11:39
| Ответить | Цитировать | Написать  
Как разместить DIV absolute точно по середине окна браузера?
    #35630337
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
РенатНу я диву присваиваю дисплау табл-целл, следовательно он становиться ячейкой. Все три браузера это хорошо понимают и вертикал алигн нормально начинает центрироваться по вертикали

утверждение неверно. ИЕ знает только none,inline,block и list-item. Все остальное он отображает как block. Вроде в ИЕ8 ситуация должна была исправиться, но я его в глаза не видела, поэтому не буду утверждать.

Ренатзы. И почему всем ВЕЧНО не нарвиться мои div`ские vertical-align?)
потому что согласно спецификации vertical-align применяются к инлайн-элементам и ячейкам таблицы,а див - элемент блочный. Поэтому если ты не мутил с display, то диву будет начхать на заданный vertical-align.
...
Рейтинг: 0 / 0
01.11.2008, 13:16
| Ответить | Цитировать | Написать  
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить DIV absolute точно по середине окна браузера?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&tid=1455648]:
 0ms
get settings:
 8ms
get forum list:
 17ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 151ms
get topic data:
 9ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 2ms
others: 204ms
total:  457ms
созд. / загр.: 457ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]