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

Фиксация


     05.11.2013    Общие вопросы по вёрстке    1485

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

Ответил: Silva


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

Комментарии пользователей (8)

Gopr
10

494 | 164

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
28

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
10

494 | 164

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
10

494 | 164

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

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

Till
28

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

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

Gopr
10

494 | 164

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

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

Till
28

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

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

Till
28

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

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

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

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