00:03 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Меня так впечатлила реакция на простую кнопку «наверх» в сообществе За родной диван!, что я решил запилить полноценный туториал с основными возможными положениями этой самой кнопки. Мало ли, вдруг еще кого порадую) Опять же если вы подключили CSS спасая дайри, а зачем он вам не знаете, вот вам ответ.
Даже не вдаваясь в визуальные дебри сократите меню удалив лишнее и приведите дневник в порядок, как это описано здесь и здесь. И повесьте кнопку наверх, как вариант.
Возьмем для наглядости такой макет:

Картинка может быть абсолютно любой. Стрелка, указатель наверх или что то что подойдет по смыслу. Главное чтобы фон этой кнопки был прозрачным. Загружаете в свою БИ. И дальше в кодах строго между кавычек используете url своей картинки начиная с /usedir и до конца.
width это ширина картинки
height высота. Эти параметры прописываются индивидуально.
position: fixed !important; фиксирует кнопку на странице, чтобы она не уехала с лентой
display:block!important;line-height: 500px !important; overflow:hidden !important; помогает заменить изначальную текстовую ссылку на картинку. Кому интересны детали добро пожаловать на htmlbook.ru/
z-index: 3; это что то вроде слоев фотошопа. Чем больше цифра тем выше элемент. Лучше прописывать, чтобы кнопка точно была над лентой и записями и не перекрылась допустим меню.
#bottomNav {display: block;} просто смиритесь с тем что без этой строчки кнопка не видна)

Теперь по позициям. Если вам нужна кнопка в углу задаете ей нулевые отступы

1.

2.

3.

4.

Если же кнопка нужна вам прикрученной к краю ленты подход немного меняется. Отступы сверху и снизу прописываются также, а справа-слева в два этапа.
Сначала мы паркуем кнопку в центр благодаря left:50%;
Затем двигаем ее уже от середины. На 450 пикселей в нашем случае, то есть на половину ширины ленты.
margin-left: -450px; передвинет кнопку влево,
margin-left: 450px; соответственно вправо.

5.

6.

7.

8.

Вопрос: Полезно?
1. Да 
24  (100%)
2. Нет 
0  (0%)
Всего: 24
Всего проголосовало: 24

@темы: Кареглазый Демон, CSS, как это сделано

Комментарии
2017-11-23 в 00:11 

Дейдре
А еще у меня душа и ресницы красивые (с)
Спасибо, интересно
Опять же если вы подключили CSS спасая дайри, а зачем он вам не знаете вот вам ответ. да-да, и зачем, и что с ним делать и что это вообще такое)))

2017-11-23 в 00:28 

Black Coal
Ничего не проходит бесследно
Круто, полезно) Люблю твои уроки, потому что можно взять отсюда, а не искать по всем дизам код, ломая голову "где я это уже делал". Спасибо)

2017-11-23 в 00:35 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Дейдре, пожалуйста) Пользуйтесь.

2017-11-23 в 00:37 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Black Coal, ну так я сам такой) Намучаюсь, а потом раз и шпаргалку на видное место... Пожалуйста)

2017-11-23 в 08:59 

Mr.Gold
Rumplestiltskin
Немного не в тему.
А кнопка с функционалом "вниз" бывает?)

2017-11-23 в 09:14 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Mr.Gold, насколько я знаю пока нет. Но у админов ее активно просят, может и прикрутят. Когда-нибудь)

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Original Designs бесплатники, CSS и уроки по созданию оформлений.

главная