Back to Top

[D Storm]

Перенёс тут кнопочку из VK. Вернее, вытащил и настроил.

Как установить.
1. Закинуть это изображение в БИ. Скопировать ссылку.
2. Добавить к CSS дизайн следующий код:

 #bottomNav {display:block; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:none !important;border:none !important;height:1px;}
 #bottomNav li {display:none;}
 #bottom_up {display:block !important;position:fixed;left:15px; top:45px;}
 #bottom_up a {position:absolute; top:-30px; width:92px; height:1px; background:url('__IMAGE_LINK__') no-repeat; padding-top:25px;clip:rect(0px 92px 25px 0px);opacity:0.6;filter:alpha(opacity=60);}
 #bottom_up a:hover {opacity:0.9;filter:alpha(opacity=90);}

3. Заменить __IMAGE_LINK__ на ссылку на изображение из БИ. Обрезать всё до '/userdir/...'.

Пример.

@темы: основные блоки, Дизайн, Мысли вслух, Учеба

Comments

[dead_mockingbird]

#bottomNav {box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:none !important;border:none !important;height:1px;}
#bottomNav li {display:none;}
#bottom_up {display:block !important;position:fixed;left:15px; top:45px;}
#bottom_up a {position:absolute; top:-30px; width:92px; height:1px; background:url('__IMAGE_LINK__') no-repeat; padding-top:25px;clip:rect(0px 92px 25px 0px);opacity:0.6;filter:alpha(opacity=60);}
#bottom_up a:hover {opacity:0.9;filter:alpha(opacity=90);}

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

[D Storm]

В ссылке сдвиг, чтобы clip работал как надо, об этом когда-то уже писал. То что в начале тоже нужно - если контейнер будет как-то выделяться (а он будет, если висит хоть какая-то настройка на .bordered) - нам от этого лучше также не будет.

[dead_mockingbird]

Это можно сделать короче и без клипа. Кстати нижний блок навигации показывается не во всех типах дизайна, поэтому лучше поставить превентивно #bottomNav {display: block;}

#bottomNav {display: block;}
#bottom_mainlink, #bottom_randomlink, #bottom_spiritlink, #bottom_faqlink {display: none;}
#bottom_up a { display: block; position: fixed; bottom: 40px; right: 0; background: url('КАРТИНКА КНОПКИ') 0 0 no-repeat; width: 152px; height: 48px; text-indent: -99999px; outline: 0; }

[D Storm]

dead_mockingbird,
Можно и через text-indent. Вот только лишний скролл нигде не вылезет? Кроме того, bottomNav тут всё ещё не зачищается. И зачем outline? Так что короче получается потому, что не контролируется внешний вид bottomNav и не обрабатывается hover. Весьма условно.

А вот то, что bottomNav надо отображать - это да, оно у меня где-то в другом куске кода висело, так что забыл вписать. Сейчас добавлю. Спасибо.

[dead_mockingbird]

Можно и через text-indent. Вот только лишний скролл нигде не вылезет?

нет, можете посмотреть на рабочую версию у меня в дневнике.

И зачем outline?

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

[winterwolf]

Солидарен с  dead_mockingbird. Я не скажу ничего нового, но...
Так как элемент использует стиль fixed, то он не всегда будет хорошо смотреться (если заранее не продумать).
К примеру не рассчитывают на ширину монитора.
К примеру, дихайн  D Storm, в некоторых ситуациях (сверните окошко для простоты, чуть меньше 1024) пропадает выбор страницы, хотя прокрутка еще не появляется. Если есть прокрутка, то все равно нельзя прокрутить до выбора страницы.

Ну и второй случай, когда есть контент очень широкий и прокрутка появляется не в записи, к примеру, а у окна, то когда мы прокручиваем страницы (по горизонтали) fixed элемент будет поверх контента, и может сливаться с ним, и к примеру не даст нам нажать некую ссылку.

[Aizen-kami-sama]

Огромное спасибо *_* Очень понадобилось,правда *____________*

[D Storm]

Aizen-kami-sama,
You're welcome. )