Страницы сайта разъезжаются

Правила, обсуждения, пожелания и предложения по работе форума и всего сайта
Аватара пользователя

zhart
Администратор
Сообщения: 1635
Зарегистрирован: 16 дек 2010, 13:09
Контактная информация:

Re: Страницы сайта разъезжаются

#11

Сообщение zhart » 08 авг 2016, 12:41

Спасибо за решение. Прописал в стилях для класса «.postbody» (тело поста). Поглядите пожалуйста, решило ли это проблему.
Кстати, Sublime почему-то даже не распознает «word-break» как валидное CSS-свойство.
newerty писал(а):Вопрос в том, зачем вообще тогда нужны на сайте новости, если и так все можно посмотреть?
Да я тоже об этом все чаще задумываюсь. Возможно, стоит оставить вообще только один форум прям в корне домена, и все. Единственное, что смущает — это то, что ссылки все старые поломаются, переиндексация будет, проседание в поиске и т.п. Но эти проблемы отчасти можно решить 301-м редиректом. Зато решатся многие другие проблемы.
В конце концов, для новостей у нас и на форуме есть раздел, если будут желающие постить новости — можно это делать прямо там, причем любому пользователю форума.

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#12

Сообщение newerty » 08 авг 2016, 14:05

zhart писал(а):Кстати, Sublime почему-то даже не распознает «word-break» как валидное CSS-свойство.
Может, так и есть, оно, вероятно, устарело, но пока не знаю, чем его можно заменить, чтобы заработало, просто я пробую overflow-wrap, а он не хочет переносить текст, может, нужно задать блоку ширину, надо проверить.
Нет, даже в блоке с фиксированной шириной не хочет переноситься, странно. В Edge, видимо, работает только word-wrap: break-word; и word-break: break-all;. Наверное, последнее свойство и нужно оставить и пользоваться именно им, если оно проходит проверку валидатора.
zhart писал(а):Поглядите пожалуйста, решило ли это проблему.
Да, теперь длинные строки правильно переносятся.

Изображение

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#13

Сообщение newerty » 08 авг 2016, 14:35

И еще меня настораживает, что при уменьшении же масштаба страницы (то есть имитация увеличения разрешения экрана), сайт растягивается до пары строк, как такое читать вообще? Я бы сделал фиксированным его, так как это, вероятнее всего, издевательство какое-то над пользователями с экранами большого разрешения. Дизайн сайта в принципе неплохой, но вы явно переборщили с резиной.

Изображение
ПодробнееПоказать
Как вариант, уберите это правило, оно растягивает страницу, но не всегда это желательно:

Код: Выделить всё

#jsn-page {
	width: 90%;
}
И замените в правиле jsn-page:

Код: Выделить всё

#jsn-page {
	color: #333333;
	width: 1141px; /* у вас стояло 960 пикселей */
	margin: 0 auto;
}
В итоге тогда будет так:
Изображение
Хотя, если вам нравится резиновая верстка, можете оставить как есть, вам виднее.

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#14

Сообщение newerty » 08 авг 2016, 14:59

Кошмар, теперь абсолютно весь текст переносится, ладно бы просто слова переносились, но нет, побуквенно теперь все переносится, но иного выхода в принципе нет, только если какой-то другой перенос может есть.
Да, это свойство лишнее, это абсолютный, а не относительный перенос.

Код: Выделить всё

word-break: break-all;
Вот в чем проблемаПоказать
Я все понял, все именно из-за того, что сайт у вас резиновый, поэтому такая ерунда появляется. Вы присвоили всему контенту 90% от ширины окна, но не учли, что в таком случае элементы могут вести себя неправильно, в частности те, которые не рассчитаны на резиновую верстку. Форум - навороченная ненужным кодом штука, просто так не разберешься, там столько таблиц, что я ничего не понял. Нужно в шаблоне форума все задать в процентном соотношении, могут быть элементы или свойства, которые мешают правильному растягиванию страницы. Хотели, наверное, как лучше, а получили уйму проблем.
Лучше не оставлять побуквенный перенос, так неудобно читать.

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#15

Сообщение newerty » 08 авг 2016, 16:07

И естественно это не решило проблему на мобильных браузерах, во всяком случае на андроиде. Легче всего будет просто убрать все это и оставить фиксированный сайт, как было, добавить только meta-тег оптимизации фиксированного сайта под ширину экрана. Резина тянется при любом удобном случае не так, как от этого ожидалось. Ни на телефоне не посмотришь, получается, без вытягивания поста с длинной строкой, ни на компьютере читать, бегать глазами постоянно, сомнительная польза получается в данном случае.
У меня есть предложение - страница будет иметь фиксированный размер, только если ширина экрана будет меньше 960 пикселей (условно). На самом деле, как раз в этом случае, если сайт будет иметь фиксированный размер, блок не будет увеличиваться. Можно добавить, опять же, специальный тег
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#16

Сообщение newerty » 08 авг 2016, 16:53

Смотрите, что творится.Показать
Изображение
Изображение
Примените word-wrap: break-word; к body, чтобы не было такого, а те две строки, что вы добавили ранее, уберите, тут можно обойтись без этого. Если вы сделаете фиксированный размер при маленькой ширине экрана (смартфон, допустим), то на нем все хорошо будет отображаться, ширина скакать не будет. На компьютере же оставьте все, как и было, но если вдруг слово будет больше ширины экрана - тут же будет увеличение блока и будет горизонтальная прокрутка. Вот и тянется ваша резина.
Изображение
Чудесно.

Аватара пользователя

zhart
Администратор
Сообщения: 1635
Зарегистрирован: 16 дек 2010, 13:09
Контактная информация:

Re: Страницы сайта разъезжаются

#17

Сообщение zhart » 08 авг 2016, 22:58

newerty писал(а):Примените word-wrap: break-word; к body, чтобы не было такого, а те две строки, что вы добавили ранее, уберите, тут можно обойтись без этого.
Сделал. Спасибо, что потратили время и разобрались во всей этой каше. Более подробно копаться в текущих стилях наверное не имеет смысла, чтобы не делать одну и ту же работу дважды. Перенесу форум на новую версию движка, заодно посмотрю, может появились темы посовременнее под phpBB (на Bootstrap-е в идеале). Тогда не нужно будет выискивать каждый баг, решим проблему одним махом. Думаю заняться обновлением сайта ближе к концу месяца (или в начале следующего), постараюсь выделить время.

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#18

Сообщение newerty » 08 авг 2016, 23:25

zhart писал(а):Сделал.
Извините, я тут немного пошутил, не надо так делать, нигде переносов слов не будет, а будет один побуквенный. Я хочу сказать, что важнее, чтобы сайт было удобно читать, а для этого нужны обычные переносы строк, какие и были, иначе слово обрывается и продолжается на следующей строке, а это не хорошо, я бы даже сказал, что это очень грубая ошибка.
Я в этой каше разобрался только поверхностно, нужно сделать горизонтальный скроллинг, когда текст выходит за границу блока, но как это сделать - без понятия, на http://forum.ubuntu.ru можете посмотреть, где текст не умещается, появляется горизонтальная полоса прокрутки с помощью свойства overflow: auto;, но тут нужно конкретное свойство overflow-x: scroll;. Но это в общем, если здесь применить свойство, полоса прокрутки появится, но блок будет опять же до конца строки. Вот пример: http://forum.ubuntu.ru/index.php?topic=280611.0.
Ура, нашел, в чем проблема, может вы лучше в шаблоне форума разберетесь. Попробуйте добавить в стиль вот это (это также покажет, на каких страницах есть эта проблема длинных строк, пусть и редкая, но все же встречающаяся):

Код: Выделить всё

#pagecontent
{
	overflow: auto;
}
И посмотрите, что станет с форумом на той же странице при увеличении масштаба, наглядно можно посмотреть, в чем проблема: http://www.lubuntu.ru/forum/viewtopic.p ... 946#p28946. Нельзя везде ставить width: 100%;, так как блок слева должен быть, допустим, 15%, а блок справа должен быть 85%, иначе переноса строки не будет и текст пойдет дальше вправо, и блок, соответственно, увеличится.
Вот, посмотрите, что нужно сделать.Показать

Код: Выделить всё

<style>
#all
{
	width: 100%;
}

#one
{
	float: left;
	width: 15%;
	background: green;
}

#two
{
	width: 85%;
	background: teal;
	overflow: auto;
}

#all
{
	margin-bottom: 10px;
}
</style>

<div id="all">
	<div id="one">Тут информация о пользователе</div>
	<div id="two">БольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстомБольшаястрокатекстаоченьбольшаястрокастекстом<br />
	Тут пример большой строки, из-за которой появилась горизонтальная прокрутка, как на forum.ubuntu.ru, но смотрится неплохо, главное - чтобы она была только в тех сообщениях, где она нужна, для этого вместо scroll используется auto.</div>
</div>

<div id="all">
	<div id="one">Тут информация о пользователе</div>
	<div id="two">Тут пример большой строки, из-за которой появилась горизонтальная прокрутка, как на forum.ubuntu.ru, но смотрится неплохо, главное - чтобы она была только в тех сообщениях, где она нужна, для этого вместо scroll используется auto.<br />
	<b>Сообщение без большой строки - прокрутка не появляется.</b></div>
</div>
Извините, что продемонстрировал эту проблему, но надо же как-то показать, как это должно выглядеть правильно. Скопируйте в файл и посмотрите результат в браузере, чтобы понять, вот скриншот. Но в таком случае скроллить придется горинтально, а не вертикально, в таких сообщениях, зато будет обычный перенос слов.
Изображение

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#19

Сообщение newerty » 09 авг 2016, 01:19

Чтобы убрать картинку счетчика, добавьте скрытие картинки, я точно не знаю, будет ли работать счетчик, но display: none; скроет картинку внизу страницы.
КартинкаПоказать
<img width="88" height="15" title="LiveInternet: показано число посетителей за сегодня" alt="" src="//counter.yadro.ru/hit?t26.1;rhttp%3A//www.lubuntu.ru/forum;s1280*800*24;uhttp ... 1232258166" border="0" style="display: none">
Или же сделайте размер нулевым или 1px, вроде картинка все равно должна загрузиться:
Нулевой размерПоказать
<img width="0" height="0" title="LiveInternet: показано число посетителей за сегодня" alt="" src="//counter.yadro.ru/hit?t26.1;rhttp%3A//www.lubuntu.ru/forum;s1280*800*24;uhttp ... 1232258166" border="0">
Как видите, тут тоже строка большая. И да, вы, видимо, смотрите, какие форумы наиболее посещаемы, довольно интересно.

Аватара пользователя

Автор темы
newerty
Сообщения: 282
Зарегистрирован: 11 окт 2015, 20:52

Re: Страницы сайта разъезжаются

#20

Сообщение newerty » 09 авг 2016, 01:36

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

Ответить