Полоса 250px с правой стороны форума.

Список разделов phpBBex 1.x (поддерживается) Поддержка 1.x

Описание: У вас проблемы с phpBBex 1.x и вам необходима помощь? Спрашивайте здесь!
Правила раздела: Одна тема — один вопрос или группа связанных вопросов. Обязательно формируйте внятный заголовок, максимально отражающий суть вопроса. Подробно описывайте проблему. Не забудьте указать версию phpBBex и какие моды установлены, по возможности добавьте скриншоты проблемы или ссылку на страницу с проблемой.
Модератор: Поддержка

Сообщение #1 rvszap » 03.06.2014, 19:56

Подскажите, как сделать справа полосу шириной 250пкс, как на картинке. Пробовал предложенные в инете методы, полоса получается, только в левой части - самом форуме в темах ломаются все посты и шрифты.

polosa.JPG
rvszap
Автор темы
Репутация: 6
С нами: 11 лет

Сообщение #2 Sumanai » 03.06.2014, 20:30

Если кроме шапки и футера, то

Код: Выделить всё
#page-body {
    clear: both;
    float: left;
    margin: 4px 0;
    width: calc(100% - 250px);
}

А в вашем блоке
Код: Выделить всё
    float: right;
    width: 250px;

Хотя ничего хорошего в этом нет.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #3 rvszap » 03.06.2014, 21:09

На главной полоса получается, а в темах как ломалось все так и ломается.
rvszap
Автор темы
Репутация: 6
С нами: 11 лет

Сообщение #4 factotum » 03.06.2014, 22:00

Sumanai:width: calc(100% - 250px);
http://caniuse.com/calc
если быть добрее, то можно и с фоллбеком.

Добавлено спустя 55 секунд:
PS. link не парсит
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #5 Sumanai » 03.06.2014, 22:32

rvszap:На главной полоса получается, а в темах как ломалось все так и ломается.

Что там ломается? УМВР.
Возможно, придётся увеличить минимальную ширину.
Говорю, плохая затея. В свете адаптивного дизайна в 3.1 так вообще совсем плохая.

factotum:если быть добрее, то можно и с фоллбеком.

Мы злые :rambo:
Ну конечно же перед этим отсыпать width в процентах, достаточных для несмещения.
Ну или трюк с отрицательным маргином, будет работать хоть на ИЕ6. Сейчас набросаю.

Добавлено спустя 39 секунд:
factotum:PS. link не парсит

Пробел или перевод строки после цитаты нужен. Известный баг парсера ббкодов.

Добавлено спустя 16 минут 42 секунды:
В общем вокруг <div id="page-body"> создаём обёртку типа <div id="page-body-wrapper"> со стилями
Код: Выделить всё
    float: left;
    margin-right: -250px;
    width: 100%;
А самому page-body добавляем
Код: Выделить всё
padding-right: 250px;
Ну а правому блоку стили типа
Код: Выделить всё
    float: right;
    width: 250px;
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #6 rvszap » 03.06.2014, 23:21

Спасибо, но ни чего не понял если честно.
rvszap
Автор темы
Репутация: 6
С нами: 11 лет

Сообщение #7 Sumanai » 03.06.2014, 23:23

Что именно?
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #8 rvszap » 03.06.2014, 23:29

Все изменения вносятся в common.css?
редактируется блок #page-body { или какой то другой?
rvszap
Автор темы
Репутация: 6
С нами: 11 лет

Сообщение #9 Sumanai » 03.06.2014, 23:32

rvszap:Все изменения вносятся в common.css?

Нет, в разметку тоже, точнее в overall_header.html и overall_footer.html. Фраза "Создать обёртку" об этом говорит. То есть обернуть блок page-body в другой. Где точно заканчивается page-body в футере- не помню :smile:

rvszap:едактируется блок #page-body { или какой то другой?

Всё остальное в стилях. В каких- не знаю, в каком найдёшь, в таком и правь. Один стиль для обёртки нужно будет добавить.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #10 rvszap » 04.06.2014, 01:33

Sumanai:Один стиль для обёртки нужно будет добавить.
Какой?
rvszap
Автор темы
Репутация: 6
С нами: 11 лет

Сообщение #11 Sumanai » 04.06.2014, 02:51

rvszap:Какой?

Sumanai:В общем вокруг <div id="page-body"> создаём обёртку типа <div id="page-body-wrapper"> со стилями

Код: Выделить всё
float: left;
margin-right: -250px;
width: 100%;

Расшифровываю:
Код: Выделить всё
#page-body-wrapper {
float: left;
margin-right: -250px;
width: 100%;
}
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #12 rvszap » 04.06.2014, 21:57

Хоть тресни не получается со страницами форумов и постов, ломаются и все.

В overall_header.html сделал следующий код
Код: Выделить всё
   <div id="page-body">
      <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
      <div id="information" class="rules">
         <div class="inner"><span class="corners-top"><span></span></span>
            <strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <!-- ENDIF -->
   <div id="page-body-wrapper">
      <div id="rot123">
        </div>

В overall_footer.html закрываю обертку добавляя второй </div> после самого верхнего
Код: Выделить всё
</div>

</div>

<div id="page-footer">

В файле common.css добавляю и изменяюю
получается следующее
Код: Выделить всё
#page-body {
   margin: 4px 0;
   clear: both;
    padding-right: 250px;
}

#page-body-wrapper {
float: left;
margin-right: -250px;
width: 100%;
}

#rot123 {
    float: right;
    width: 250px;
}

В результате на главной все хорошо, а на списке форумов и в темах все поломано. Что делаю не так?
Последний раз редактировалось rvszap 04.06.2014, 22:54, всего редактировалось 6 раз(а).
rvszap
Автор темы
Репутация: 6
С нами: 11 лет

Сообщение #13 Sumanai » 04.06.2014, 22:14

Ещё раз проверил- ничего не ломается. Покажите же, что и как у вас ломается? Это надо было сразу сделать.
И да, обёртку надо добавлять после <div id="page-body">, то есть в футер.
Во- вторых, вы зачем- то смешали оба моих способа. Либо нужно с calc (ему обёртка не нужна, но поддержка браузерами не 100%), либо с отрицательным margin (поддержка хорошая, но нужен блок- обёртка).
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #14 rvszap » 04.06.2014, 22:25

Разобрался, мешал чужой скрипт рекламы, убрал все заработало, код в overall_header.html в предыдущем сообщении подкорректировал.
Стили не трогал и так все работает :smile:

Добавлено спустя 7 минут 53 секунды:
Проверьте, все подкорректировал в сообщении выше, что бы у людей было готовое решение.
Спасибо.
rvszap
Автор темы
Репутация: 6
С нами: 11 лет

Сообщение #15 Sumanai » 04.06.2014, 22:37

rvszap:мешал чужой скрипт рекламы,

А, ну да. Реклама- зло.

rvszap:Стили не трогал и так все работает

Вы походу заменили содержание предыдущего поста. Сейчас там неверный код.
Оставлять так не нужно.
Эх, пойду напишу туториал что ли.

Добавлено спустя 9 минут 3 секунды:
rvszap:Проверьте, все подкорректировал в сообщении выше, что бы у людей было готовое решение.
Спасибо.

Неверно (на момент третьей правки). Сейчас напишу правильное решение, пошаговое.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца


Вернуться в Поддержка 1.x