Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить DIV absolute точно по середине окна браузера? / 16 сообщений из 16, страница 1 из 1
13.10.2008, 16:04
    #35591624
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
Как разместить DIV absolute точно по середине окна браузера?
Ну типа нужно сделать окно сообщения, но чтобы оно было точно посередине браузера?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.10.2008, 16:15
    #35591667
Korcar
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
из ширины окна вычесть ширину дива, поделить на 2 - середина по ширине

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

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

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

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

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

помогите....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.10.2008, 14:10
    #35611865
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
Код: 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
    #35612377
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
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, 16:11
    #35612435
Ренат
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
Вот вариант на 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:31
    #35612517
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
А я использую классический подход :):
Код: 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
    #35612738
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
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
| Ответить | Цитировать | Написать  
01.11.2008, 03:48
    #35629528
Свят
Свят
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
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, 04:13
    #35629532
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить DIV absolute точно по середине окна браузера?
Нет, не глючит. Просто выходит за пределы окна, а скрулер не распространяется на отрицательные координаты, поэтому справа и внизу показывается, а сверху и слева обрезается.

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

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

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

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

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

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

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

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

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


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