Перейти к содержимому
Открыть в приложении

Удобный способ просмотра. Узнать больше.

Дизайн и модификация Invision Community

Полноэкранное приложение на главном экране с push-уведомлениями, медалями и многим другим.

Чтобы установить это приложение на iOS и iPadOS
  1. Нажмите иконку «Поделиться» в Safari
  2. Прокрутите меню и нажмите На экран «Домой».
  3. Нажмите Добавить в правом верхнем углу.
Чтобы установить это приложение на Android
  1. Нажмите меню из трёх точек (⋮) в правом верхнем углу браузера.
  2. Нажмите Добавить на главный экран или Установить приложение.
  3. Подтвердите, нажав Установить.
Русский язык для Invision Community 5

Фиксация кнопки Sidebar toggle

Всё хорошо, но можно ли кнопку сделать фиксированной, например чтобы она прилегала к границе враппера?

 

Вот так:

 

Screenshot58.png

 

Что я только не пробовал, чтобы она была фиксированной, но безуспешно.. Да и вообще реально это сделать?

Рекомендованные сообщения

Можно.

 

.sidebar_toggle { 
**********
position: fixed;
right: 15%;
top: 400px;
}

Проценты и пиксели сами расчитывайте.

 

Если я правильно поняла, про fixed

Фиксированная – это когда всегда в одном положении экрана, не зависимо от положения других элементов.

Если хотите не фиксированную, то absolute

  • Автор

Если fixed, то элемент двигается от расположения скролла, если ниже страницу прокручивать, то он будет ехать вместе, если absolute, то не будет, но проблема не решилась.

 

С моим разрешением выглядит вот так:

 

Screenshot59.png

 

Если увеличить разрешение, то вот так:

 

Screenshot58.png

 

Код у меня такой:

 

.sidebar_toggle {
padding: 4px 3px;
height: 30px;
width: 28px;
       position: absolute;
       right: 8%;
       top: 403px;
}

Изменено пользователем Lesovsky

А скин не резиновый?

Надо было об этом написать.

Если ширина враппера фиксирована, то и проценты не помогут. Тогда никак, потому что позицию от центра никак не задать. А расстояние от правого борта непостоянно при разном разрешении как в пикселях, так и в процентах при фиксированном скине.

 

Можно еще пробовать вариант с относительной позицией, float: right и отрицательным margin

  • Автор

Скин фиксированный, просто я на некоторых шаблонах видел, что эта кнопка отображается независимо от разрешение по правому краю враппера.

В фиксированных скинах?

Покажите пример.

 

На 3.0 привязывала к краю враппера путем float: right

В 3.1 отказалась от этого, уж не помню почему, вроде они там что-то поменяли и это стало неудобно.

 

Вспомнила

http://ipbskins.ru/big/delicate_blue.png

Привязывала в пределах.

Потом сайдбар подняли и это стало некрасиво - наложение.

Но при желании можно что-то сделать.

 

В общем, можно привязать внутри враппера, попробуйте задать позицию relative + float: right;

Изменено пользователем Fisana

  • Автор

Отправил пример вам в ЛС.

 

UPD:

Там ширина в процентах, вот и весь фикс.(((

Изменено пользователем Lesovsky

Если ширина в процентах, способ первый, с процентами, должен подойти.

Это не фикс.

Это резина.

 

Но если есть max-width и min-width – это полуфикс. И в пограничных случаях проценты справа работать правильно не могут.

 

Или абсолютная и float

float: right;
position: absolute;
right: -XXpx;

  • Автор

Всё сделал, но вот результат:

 

Screenshot60.png

 

Код такой:

 

.sidebar_toggle {
padding: 4px 3px;
height: 30px;
width: 28px;
       position: relative;
       float: right;
       right: -50px;
       top: -42px;
}

 

Может решить эту проблему почудив с #index_stats ?

Чудите, но сами. Без меня. Потому что у меня совсем другие решения.

  • Автор

Проблема решена, я добился результата.

 

@Fisana, Благодарю вас за помощь! Без position: relative; и float: right; я бы не сделал.)

Создайте аккаунт или войдите в него для комментирования

Аккаунт

Навигация

Поиск

Поиск

Настроить push-уведомления браузера

Chrome (Android)
  1. Нажмите на иконку замка рядом с адресной строкой.
  2. Нажмите Права доступа -> Уведомления.
  3. Измените свои настройки.
Chrome (компьютер)
  1. Нажмите на иконку замка в адресной строке.
  2. Выберите Настройки сайта.
  3. Найдите Уведомления и измените свои настройки.