Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Фиксация

Фиксация

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

вопрос
Ребят поскажите вот сайт слева появляеться кнопочка вверх но нормально отображаеться только при разрешениии 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 -

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

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

 10.07.2011 bot  Общие вопросы по вёрстке
 03.11.2011 lrem  Общие вопросы по вёрстке
 16.09.2012 Ayk  Общие вопросы по вёрстке
 03.12.2012 jarrro  Общие вопросы по вёрстке, Стили (CSS)
 27.03.2013 stopani  Общие вопросы по вёрстке
 06.04.2014 Vistem  Общие вопросы по вёрстке
 29.08.2014 flash1bingo  Общие вопросы по вёрстке
 09.09.2014 san4os3112  Общие вопросы по вёрстке
 08.12.2014 abc12345  Общие вопросы по вёрстке
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    Сегодня, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:37
    т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
    Видосы в директории upload можно хоть оставить? их там 80 Гб
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:17
    фтп обычный юзер а не root
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:15
    дэк только так и загружаю
  • Gordi | Как реализовать шифрование трафика? 3
    Фото Gordi
    Gordi
    Как реализовать шифрование трафика?
    18-11-2024, 14:14
    я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:13
    Gordi,
    через фтп загружай
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:11
    Привет Николай!
    Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
    или направь на путь истинный, пжст
наверх