Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Центрирование с JavaScript / 23 сообщений из 23, страница 1 из 1
03.10.2014, 08:40
    #38765575
PHucker
PHucker
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
Здравствуйте форумчане! Проблема такая. Есть 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:53
    #38765583
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
PHuckerИ нашtл ответ в Javascript.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 08:54
    #38765584
PHucker
PHucker
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
там "наешл" получился сначала. Понять и простить грамматику мою бедную.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 09:37
    #38765620
PHucker
PHucker
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
Есть кто?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 09:55
    #38765634
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
PHucker , я не про грамматику... Для обычной центровки ДИВов скрипт не нужен совсем...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 09:59
    #38765642
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
что за костыли страшные, не проще float убрать? А ширина блоков фиксированная? Набросайте пример в jsfiddle и картинку что надо получить.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 09:59
    #38765643
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
Никогда не понимал зачем двигать, абсолютнопозиционированный элемент, маргинами...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 10:27
    #38765681
PHucker
PHucker
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
Я же говорил испробовал все в 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:46
    #38765704
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Центрирование с JavaScript
left: 50%;
margin-left: -<ширина блока/2>px;

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

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

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

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

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

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


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