Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Архив » Форум не центруется автоматически

Форум не центруется автоматически

Страница: 1

Сообщений 1 страница 10 из 10

1

  • Автор: Klyaksa
  • Заслуженный
  • Klyaksa
  • Зарегистрирован: Сб, 6 Июн 2015
  • Сообщений: 56
  • Уважение: +2
  • Позитив: 0
  • Последний визит:
    Чт, 14 Фев 2019 00:00:55

Доброго времени суток.

Не так давно мы сменили дизайн, и есть маленькая проблемка.
Суть в том, что сайт при складывании браузера на 2-е трети экрана теперь не центруется  автоматически, как у вас, к примеру. Теперь нужно его центровать вручную, передвигая скрол внизу страницы.

ОСС:

Когда сидишь во флуде и каждую минуту приходит новое сообщение, а страница обновляется, нужно "передвигать"  сайт для удобства чтения и письма, это раздражает. Конечно, когда сидишь с развернутым экраном проблем нет, но некоторые наши пользователи сидят, развернув сайт на две трети экрана... Если свернуть окно браузера таким образом, то окошко быстрого ответа доступно не полностью, приходится передвигать скрол.

Сами найти ответ не можем.
Уже пробовали обращаться на другой сайт.

Мне предложили такое решение проблемы

в HTML низ:
   

Код:
<style type="text/css">
    @media screen and (max-width: 1000px) {
    #pun {margin:0 -225px;}
    #pun_wrap{background-position: -223px 100%}
    }
    </style>

Но оказалось! В Мозиле (которой пользуюсь я) данная проблема решилась... как и решилась она в Опере. А вот в Хроме - форум и не центруется от слова совсем. Когда, как  в мобильных устройствах форум выглядит теперь совершенно безобразно,  равняясь на левый край...

скрин  с планшета

http://cs623326.vk.me/v623326559/32433/Pr-_IYtl4sA.jpg

Т.е. я подумала, что проблема решилась, на самом же деле мы притянули форум влево... а нужно, чтобы центр находился автоматически и подстраивался под твое окошко.
Помогите, пожалуйста Т___Т
ссылка на форум -->> http://newsailormoon.rusff.ru

Отредактировано Klyaksa (Сб, 6 Июн 2015 23:06:12)

0

2

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7338
  • Уважение: +5808
  • Позитив: +6437
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 13:30:41
Klyaksa написал(а):

Суть в том, что сайт при складывании браузера на 2-е трети экрана теперь не центруется  автоматически, как у вас, к примеру. Теперь нужно его центровать вручную, передвигая скрол внизу страницы.

Ну, вы задали минимальную ширину:

#pun_wrap {
background-image : url("http://s7.hostingkartinok.com/uploads/images/2015/04/38b34a2afa1640c7f231c1625fd97da1.png");
background-repeat: no-repeat;
background-position: center bottom;
min-width: 1350px;
width:100%;
margin:auto;
padding-bottom: 290px;
}

А у body реальная ширина: 1263px, #pun_wrap находится внутри body. Кстати, совсем непонятно зачем вы повесили на body картинку если перекрываете ее в #pun. С шириной вообще у вас непонятно на #pun_wrap - width:100%; - это от чего 100%, если на боди у вас ширина не указана?

0

3

  • Автор: Klyaksa
  • Заслуженный
  • Klyaksa
  • Зарегистрирован: Сб, 6 Июн 2015
  • Сообщений: 56
  • Уважение: +2
  • Позитив: 0
  • Последний визит:
    Чт, 14 Фев 2019 00:00:55

kolobdur74
Я очень благодарна, что вы стараетесь решить мою проблему, но теперь представьте, пожалуйста, что перед вами абсолютный чайник... я не поняла ни слова из того, что вы хотели мне донести...
Дизайн сделан не мной, человек, который старался для нас, тоже не знает, что в нем не так, и тоже не понимает вашего сообщения. Попробуйте донести доступнее, где искать проблему? Что в коде нужно изменить и где это что-то находится? Заранее благодарна Вам за разъяснения.

0

4

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7338
  • Уважение: +5808
  • Позитив: +6437
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 13:30:41

Klyaksa
В стиле найдите:

/* CS1 Background and text colours
-------------------------------------------------------------*/

Ниже найдите код:

body {background-image : url("http://s7.hostingkartinok.com/uploads/images/2015/04/29be1082ce5c22994f5027f1213051fd.png");
background-color: #E3F1FC;
background-repeat: repeat;
background-position : top left;
background-attachment : fixed;}

Попробуйте заменить его полностью на:

Код:
body {width: 100%;}

Ниже найдите этот код:

#pun_wrap {
background-image : url("http://s7.hostingkartinok.com/uploads/images/2015/04/38b34a2afa1640c7f231c1625fd97da1.png");
background-repeat: no-repeat;
background-position: center bottom;
min-width: 1350px;
width:100%;
margin:auto;
padding-bottom: 290px;
}

Замените на:

Код:
#pun_wrap {
background-image : url("http://s7.hostingkartinok.com/uploads/images/2015/04/38b34a2afa1640c7f231c1625fd97da1.png"); 
background-repeat: no-repeat; 
background-position: center bottom;
width: 1350px;
margin:auto;
padding-bottom: 290px;
}

Когда замените напишите о результатах.

0

5

  • Автор: Klyaksa
  • Заслуженный
  • Klyaksa
  • Зарегистрирован: Сб, 6 Июн 2015
  • Сообщений: 56
  • Уважение: +2
  • Позитив: 0
  • Последний визит:
    Чт, 14 Фев 2019 00:00:55

kolobdur74
Итак, все сделала так, как Вы просили.
Все то, что было написано Вами, мною заменено.
Код, тот что мне давали ранее (приведен в первом посте) я убрала совсем.
Результат: Форум не центруется по прежнему.

0

6

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7338
  • Уважение: +5808
  • Позитив: +6437
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 13:30:41

Klyaksa
У вас разрешение монитора какое? На самом деле оно центрируется, но при большом разрешении экрана. Попробуйте через браузер выставить Масштаб 90%, а не 100% - стало центрироваться?

На счет боди, замените:

body {width: 100%;}

На:

Код:
body {background-image : url("http://s7.hostingkartinok.com/uploads/images/2015/04/29be1082ce5c22994f5027f1213051fd.png");
background-color: #E3F1FC;
background-repeat: repeat; 
background-attachment : fixed;
width: 100%;
}

Все остальное у вас правильно, просто дизайн рассчитан на широкоформатные мониторы. Чтобы он помещался в более маленькие - это надо либо адаптированный дизайн делать, то есть под каждое разрешение экрана делать свои размеры дизайна (точнее не под каждое, а диапазон, к примеру один диапазон: от 800рх до 1200рх - то что вам дали код было как раз небольшая часть адаптивного дизайна - там только под размеры экрана на 1000 пикселей, почему и не сработало), либо уменьшать ширину, что у вас выставлена: width: 1350px;

0

7

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7338
  • Уважение: +5808
  • Позитив: +6437
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 13:30:41

Klyaksa
Ну, вот как пример адаптивного дизайна:

@media screen and (max-width: 800px) {
#pun_wrap {width: 800px;}
#pun {width: 800px;}
}
@media screen and (min-width: 800px) and (max-width: 1350px) {
#pun_wrap {width: 1000px;}
#pun {width: 1000px;}
}

Скорее всего надо будет отступы подгонять и возможно редактировать картинки.

Поправил код.

Отредактировано kolobdur74 (Вс, 7 Июн 2015 01:42:21)

0

8

  • Автор: Klyaksa
  • Заслуженный
  • Klyaksa
  • Зарегистрирован: Сб, 6 Июн 2015
  • Сообщений: 56
  • Уважение: +2
  • Позитив: 0
  • Последний визит:
    Чт, 14 Фев 2019 00:00:55
kolobdur74 написал(а):

У вас разрешение монитора какое?

1366 х 768

kolobdur74 написал(а):

На самом деле оно центрируется, но при большом разрешении экрана.

ээээ почему тогда мой форум не центруется, а ваш и многие другие центруются?

kolobdur74 написал(а):

Попробуйте через браузер выставить Масштаб 90%, а не 100% - стало центрироваться?

нет не стало.. и зачем мне масштаб 90? если 100 удобнее?

kolobdur74 написал(а):

На счет боди, замените:

заменила, теперь без белого фона...

kolobdur74 написал(а):

Все остальное у вас правильно, просто дизайн рассчитан на широкоформатные мониторы.

у нас до этого дизайн был примерно таким же, и форум вставал в середку, как бы ты его не сложил...

kolobdur74 написал(а):

то что вам дали код было как раз небольшая часть адаптивного дизайна - там только под размеры экрана на 1000 пикселей, почему и не сработало), либо уменьшать ширину, что у вас выставлена: width: 1350px

1350 на 1000? и в какой части? везде что ли? О__о это никак не повлияет на сайт дизайна? перекоса таблицы не случиться? О__о

а вообще, я тут подумала, может вы просто меня не понимаете?
форум стоит в центре и это факт...
я хочу, чтобы он оставался в центре, даже если страничку сложить на две трети экрана...

сделаю скрины:

так выглядит мой, если его сложить... есть скрол, который нужно передвинуть, чтобы увидеть текст на форуме, чтобы прочесть его или написать что-то, при обновлении форум снова сдвигается так же, как и было и его снова нужно подвигать
http://sh.uploads.ru/t/UWkIM.png
это то, что мне хотелось бы видеть... скрола нет вообще.. и форум становится сразу удобно для пользователя, хоть заобновляйся ты.. не нужно ничего двигать, чтобы увидеть написанное...
http://sh.uploads.ru/t/rdoTl.png

0

9

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7338
  • Уважение: +5808
  • Позитив: +6437
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 13:30:41

Klyaksa
Для того, чтобы было у всех одинаково - надо делать резиновый дизайн, у вас фиксированный - разница в том, что ваш дизайн с фиксированной шириной в пикселях, резиновый определяется в процентах. У вас еще корявая шапка - ее ширина превосходит контейнер, в котором она стоит - она у вас все так же в 1350 пикселей, а вставлена в контейнер шириной 800 пикселей, то есть вот она шапка:

#pun-title table {
  border: none;
  height: 566px;
  width: 1350px;
  background-image: url("http://s7.hostingkartinok.com/uploads/images/2015/04/afa47d084ef67f5a13e004bacffd3744.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-color: tansparent;
  margin-left: -275px;
  overflow: hidden;
}

А потом вы шапку сдвигаете ее на 275 пикселей влево: margin-left: -275px; - возможно из за этого еще прокрутка появляется. По хорошему ширина шапки должна быть 800 пикселей без сдвигов, и картинка вырезана, без полей, которые еще и не совпадают у вас при наложении - если приглядитесь то там небольшой сдвиг на один пиксель с общим фоном. Вообще нечетные цифры стоит избегать - будет всегда не ровно, бо как не делится один пиксель пополам.

То есть вот в этот контейнер:

/* A5.2 */
.punbb {
  float: none;
  width:  800px;
  height: auto;
  margin: 0 auto;
  }

Вставляется ваша шапка, а потом вы эту широкую шапку подгоняете под общий дизайн.

Отредактировано kolobdur74 (Вс, 7 Июн 2015 02:40:58)

0

10

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7338
  • Уважение: +5808
  • Позитив: +6437
  • Пол: Мужской
  • Последний визит:
    Вс, 14 Апр 2024 13:30:41

То есть вам наверное стоит фон, который стоит сейчас на body переставить на html, на body поставить общий фон, который у вас сейчас стоит на #pun и шириной width: 1350px; вместо того что я вам советовал - width: 100%;, а на #pun переставить вашу шапку с #pun-title table, с условием: background-position: center top; и тогда вам не надо будет делать отступ влево в 275 пикселей, да и картинки редактировать и подгонять. А на #pun-title table делаете прозрачность и уменьшаете высоту, чтобы вписывалось как вам надо. Как то так.

Отредактировано kolobdur74 (Вс, 7 Июн 2015 02:58:09)

0

Страница: 1

Вы здесь » Единый форум поддержки » Архив » Форум не центруется автоматически