Не нравятся результаты поиска? Попробуйте другой поиск!

Фиксация


     05.11.2013    фиксация    Все вопросы » Общие вопросы по вёрстке    1907

вопрос
Ребят поскажите вот сайт слева появляеться кнопочка вверх но нормально отображаеться только при разрешениии 1920x1080. Нужно задать фикс что бы при увилечении и уменьшении страницы кнопка оставалась на своем месте и никуда не сдвигалась.

Ответил: Silva


Используйте в стиле кнопки фиксированное позиционирование "position:fixed; left 100px; bottom:100px;

8 комментариев

Gopr
Юзер

Gopr - 5 ноября 2013 21:10 -

Ваш код с дописанным id="scrollups"
<div id="scrollup" style="display:block"><b title="Наверх" id="scrollups">Наверх</b></div>
id="scrollup" - Сделайте отступ от левой части экрана до кнопки в 50%, тем самым кнопка будет по центру на всех мониторах.
id="scrollups" - допишите отступ в противоположную сторону, но уже в px, а не в %. Так вы закрепите кнопку относительно центра.
Кнопка прокрутки по дебильному сделана в прицепи... Под один монитор заточена, высоту тоже надо делать в %

Till
Юзер

Till - 6 ноября 2013 00:16 -

Вот css пршу помоги
#scrollup{
    position: absolute;
    width:62px;
    top:60px;
    bottom:60px;
    left:135px;
    z-index:2244;
    border-radius:12px;
    background-color:rgba(0,0,0,0);
    transition:background-color 0.3s linear;
    -moz-transition:background-color 0.3s linear;
    -webkit-transition:background-color 0.3s linear;
    -o-transition:background-color 0.3s linear
    cursor:pointer}
#scrollup b{
    position:fixed;
    margin:15px;
    margin-top:620px;
    display:block;
    width:32px;
    height:32px;
    overflow:hidden;
    text-indent:-9999px;
    background:#289ad6 url(http://4.firepic.org/4/images/2013-11/05/ix3gs4afbzb7.png);
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px}
#scrollup:hover{
    background-color:rgba(0,0,0,0.4)}

Gopr
Юзер

Gopr - 6 ноября 2013 02:22 -

Замени
<div class="button-up" style=""><div id="scrollup" style="display: block;"><b title="Наверх">Наверх</b></div></div>
на
<div id="scrollup" class="button-up"><b title="Наверх">Наверх</b></div>

.button-up {opacity:0.7;
height:100%;
position:fixed;
width: 62px;
margin-left:-620px;
left:50%;
top:0;
cursor:pointer;
color:rgb(211, 219, 228);
background-image:none;
display:block}

#scrollup {position:absolute;
width:62px;
top:60px;
bottom:60px;
border-radius:12px;
background-color:rgba(0,0,0,0);
transition:background-color 0.3s linear;
-moz-transition:background-color 0.3s linear;
-webkit-transition:background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
cursor:pointer}

#scrollup:hover {background-color:rgba(0,0,0,0.4)}

#scrollup b {margin:15px;
display:block;
width:32px;
height:32px;
text-indent:-9999px;
background:#289ad6 url(http://4.firepic.org/4/images/2013-11/05/ix3gs4afbzb7.png);
border-radius:6px}

Gopr
Юзер

Gopr - 6 ноября 2013 02:33 -

Правда если стили прописываются в скрипте прокрутки, то их нужно править там а не в css...

Till
Юзер

Till - 6 ноября 2013 16:46 -

теперь кнопка приклеилась (при опускании вниз она стоит на месте) на сайте в данный момент она. И при навединни на кнопку теперь обводка оявляеться только один раз*

Gopr
Юзер

Gopr - 6 ноября 2013 23:00 -

Не пойму что вам теперь нужно...
Зашел к вам на сайт вот что вижу:
1. Прокручиваю сайт появляется кнопка прокрутки.
2. Навожу курсор на кнопку, она становиться на тон ярче + всплывает подсказка "Наверх".
3. В момент наведения также появляется активный, еле заметный, полупрозрачный, черный блок. Этот полупрозрачный элемент кнопки - кликабельный, что упрощает нажатие по кнопке прокрутке...
4. Кнопка фиксирована по высоте и ширине, черный блок фиксирован по ширине, но динамичен по высоте.
5. Все кликается и прокручивается, кнопка пропадает, после прокручивания до самого верха и заново появляется если снова немного прокрутить сайт. Тоже самое касается и черного блока - "обводки"
6. Ваша просьба:
Нужно задать фикс что бы при увилечении и уменьшении страницы кнопка оставалась на своем месте и никуда не сдвигалась.
Судя по тому что я вижу на данный момент на сайте, кнопка остается на своем месте и никуда не сдвигается.

Till
Юзер

Till - 6 ноября 2013 23:20 -

Спасибо, пару строк дописал все тепреь отлично!)

Till
Юзер

Till - 6 ноября 2013 11:42 -

Спасибо большое прийду домой проверю.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх