ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Центрирование с JavaScript
23 сообщений из 23, страница 1 из 1
Центрирование с JavaScript
    #38765575
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
Здравствуйте форумчане! Проблема такая. Есть div в котором несколько div'ов. Изначально все эти ДИВы положение слева. То есть float:left;. И пришлось теперь все это сцентрировать. Испробовал все. От margin: auto; до align="center". И нашtл ответ в Javascript.
Скрипт выглядит так:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<script>
if (window.attachEvent){
window.attachEvent('onresize',center);
window.attachEvent('onload',center);
}else if(window.addEventListener){
window.addEventListener('resize',center, true);
window.addEventListener('load',center, true);
}
function center(){
var i = document.getElementById('myblock');
if(document.body.offsetWidth < i.offsetWidth)
{
i.style.marginLeft = parseInt(0)+'px';
}else{
i.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';}
};
</script>

что он делает? Я взял один ДИВ и пихнул туда все ДИВы после тега <body>. Да работает. Но когда приближаешь а отдаляешь, этот скрипт берет один ДИВ и по нему центрирует но не тот который "главный" а один из дивов. Получается на правой половине монитора половина одного ДИВА а в центра другой ДИВ. Див-див-див. Вот код HTML:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" charset="utf-8"/>
	
    <link rel="shortcut icon" href="favicon.ico" type="image/png">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/png">
    <link href="css/header.css" type="text/css" rel="stylesheet">
    <link href="css/partners.css" type="text/css" rel="stylesheet">
    <link href="css/leftblock.css" type="text/css" rel="stylesheet">
    <link href="css/rightblock.css" type="text/css" rel="stylesheet">
      
    <script src="http://code.jquery.com/jquery-latest.js"></script>

     </head>
	
 

	<body>
		<div id="myblock" style="position: absolute; 
">
		<div id="leftblock">
            <div id="leftblockli" >
                  <!-- не важно-->
			<div class="box"> 
			</div>
					
			<div class="box"> <!-- не важно-->
    		</div>
                     
            
			</div>
			<div id="menutitle">
              <!-- не важно-->             
             </div>
        </div>
		<script>
if (window.attachEvent){
window.attachEvent('onresize',center);
window.attachEvent('onload',center);
}else if(window.addEventListener){
window.addEventListener('resize',center, true);
window.addEventListener('load',center, true);
}
function center(){
var i = document.getElementById('myblock');
if(document.body.offsetWidth < i.offsetWidth)
{
i.style.marginLeft = parseInt(0)+'px';
}else{
i.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';}
};
</script>
</body>
</html>

что-то вроде этого
...
Рейтинг: 0 / 0
03.10.2014, 08:40
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765583
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
PHuckerИ нашtл ответ в Javascript.
...
Рейтинг: 0 / 0
03.10.2014, 08:53
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765584
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
там "наешл" получился сначала. Понять и простить грамматику мою бедную.
...
Рейтинг: 0 / 0
03.10.2014, 08:54
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765620
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
Есть кто?
...
Рейтинг: 0 / 0
03.10.2014, 09:37
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765634
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
PHucker , я не про грамматику... Для обычной центровки ДИВов скрипт не нужен совсем...
...
Рейтинг: 0 / 0
03.10.2014, 09:55
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765642
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
что за костыли страшные, не проще float убрать? А ширина блоков фиксированная? Набросайте пример в jsfiddle и картинку что надо получить.
...
Рейтинг: 0 / 0
03.10.2014, 09:59
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765643
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Никогда не понимал зачем двигать, абсолютнопозиционированный элемент, маргинами...
...
Рейтинг: 0 / 0
03.10.2014, 09:59
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765681
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
Я же говорил испробовал все в CSS. ну не двигает. Вот CSS разметка
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
#leftblock{
    padding-top: 10px;
    margin-top: -20px;
    margin-left: -10px;
    position: fixed;
    height: 100%;
    width: 220px;
    background: -moz-linear-gradient(left,  #2559B2,#2559B2,#2A63C4 );
    background: -webkit-gradient(left,linear, 0 0, 0 bottom, from(#2559B2), to(#2A63C4));
    background: -webkit-linear-gradient(left,#2559B2,#2559B2, #2A63C4);
    background: -ms-linear-gradient(left,#2559B2,#2559B2, #2A63C4);
    background: -o-linear-gradient(left,#2559B2,#2559B2, #2A63C4);
    background: linear-gradient(left,#2559B2,#2559B2, #2A63C4);
    z-index: 1;
   
}



Все правильно отображается. Мне бы просто ВСЕ элементы сцентрировать. Как я и сказал всё то, что после тега <body> я обернул в один див. И надо только сцентрировать. Почему javascript, потому что все стоит на своих местах и это самое удобное решение. Проблема в том, что этот скрипт хоть и берет самый "главный" див, но центрует не по нему а по другому когда приближаешь и отдаляешь. А когда обновляешь страницу, то все нормально. как только приближаю или отдаляю сразу берет <div id="leftblock"> и его в центр.... а <div id="rightblock"> отображается на половину, к тому же в правой половине монитора. Вот эту проблему не могу решить.
...
Рейтинг: 0 / 0
03.10.2014, 10:27
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765704
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
left: 50%;
margin-left: -<ширина блока/2>px;

а так не покатит?
...
Рейтинг: 0 / 0
03.10.2014, 10:46
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765714
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
left, top, right даже не чувствует. Давайте лучше с тем скриптом что нибудь придумаем? Я же говорю если в CSS что-то изменить, начинает криво отображаться. Все там четко задано.
...
Рейтинг: 0 / 0
03.10.2014, 10:52
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765747
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
PHuckerДавайте лучше с тем скриптом что нибудь придумаем? Я же говорю если в CSS что-то изменить, начинает криво отображаться. Все там четко задано.
Давайте мы лучше нормальный тестовый пример сделаем... И картинку "что нужно в итоге" нарисуем...
А не маяться фигней всякой.
...
Рейтинг: 0 / 0
03.10.2014, 11:08
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765774
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
У меня было так:
...
Рейтинг: 0 / 0
03.10.2014, 11:25
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765775
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
Хотел сделать вот так:
...
Рейтинг: 0 / 0
03.10.2014, 11:26
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765782
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
на второй работает. Только если приблизить или отдалить то получается это. То есть берет красный див и его в центр.... а не все элементы
...
Рейтинг: 0 / 0
03.10.2014, 11:27
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765787
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
блин забыл уменьшить...
...
Рейтинг: 0 / 0
03.10.2014, 11:32
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765820
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
да нет, берет он нужный блок. Выведите console.log(document.body.offsetWidth + ' : ' + i.offsetWidth); в функции center и посмотрите что там при ресайзе окна
...
Рейтинг: 0 / 0
03.10.2014, 11:48
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38765825
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
SharuPoNemnogu

Тогда еще непонятнее становится. Почему направо убегает когда приближаю или отдаляю...
...
Рейтинг: 0 / 0
03.10.2014, 11:50
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38766018
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
PHuckerУ меня было так:
Хотел сделать вот так:
Т.е. задачу можно свести к самой тривиальной - как мне разместить блок по центру экрана. Поскольку, что именно в том блоке уже и не важно.

Отсюда вопрос - ширина того блока какая?
...
Рейтинг: 0 / 0
03.10.2014, 13:19
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38767265
Jeff1
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jeff1
Гость
Про центрирование изображения с помощью Javascript
...
Рейтинг: 0 / 0
05.10.2014, 17:47
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38768611
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
авторТ.е. задачу можно свести к самой тривиальной - как мне разместить блок по центру экрана. Поскольку, что именно в том блоке уже и не важно.

Отсюда вопрос - ширина того блока какая? 950px.
...
Рейтинг: 0 / 0
07.10.2014, 06:27
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38768614
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
авторавтор
Т.е. задачу можно свести к самой тривиальной - как мне разместить блок по центру экрана. Поскольку, что именно в том блоке уже и не важно.

Отсюда вопрос - ширина того блока какая?
950px. извиняюсь 870px
...
Рейтинг: 0 / 0
07.10.2014, 06:51
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38768662
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
вот пример

Нужно сделать таким. Чтоб когда я приближал ctrl+колесико, приближало по центру а не по левому краю как на "стоке".
...
Рейтинг: 0 / 0
07.10.2014, 09:04
| Ответить | Цитировать | Написать  
Центрирование с JavaScript
    #38768695
PHucker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PHucker
Гость
Разобрался!!!!!!!!! ))))))))) Всем спасибо!
...
Рейтинг: 0 / 0
07.10.2014, 09:41
| Ответить | Цитировать | Написать  
23 сообщений из 23, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Центрирование с JavaScript
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&tid=1446653]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 49ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 44ms
get tp. blocked users:
 1ms
others: 252ms
total:  381ms
созд. / загр.: 381ms
x
x
Закрыть


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