Перейти к публикации
View in the app

A better way to browse. Learn more.

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

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Фиксация кнопки 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; я бы не сделал.)

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

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.