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

[rvszap]

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

[Sumanai]

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

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

#page-body {
    clear: both;
    float: left;
    margin: 4px 0;
    width: calc(100% - 250px);
}

А в вашем блоке

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

    float: right;
    width: 250px;

Хотя ничего хорошего в этом нет.

[rvszap]

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

[factotum]

width: calc(100% - 250px);

http://caniuse.com/calc
если быть добрее, то можно и с фоллбеком.

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

[Sumanai]

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

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

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

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

Добавлено спустя 39 секунд:

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;

[rvszap]

Спасибо, но ни чего не понял если честно.

[Sumanai]

Что именно?

[rvszap]

Все изменения вносятся в common.css?
редактируется блок #page-body { или какой то другой?

[Sumanai]

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

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

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

Всё остальное в стилях. В каких- не знаю, в каком найдёшь, в таком и правь. Один стиль для обёртки нужно будет добавить.

[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%;
}

[rvszap]

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

В 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;
}

В результате на главной все хорошо, а на списке форумов и в темах все поломано. Что делаю не так?

[Sumanai]

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

[rvszap]

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

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

[Sumanai]

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

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

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

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

Добавлено спустя 9 минут 3 секунды:

Проверьте, все подкорректировал в сообщении выше, что бы у людей было готовое решение.
Спасибо.

Неверно (на момент третьей правки). Сейчас напишу правильное решение, пошаговое.