Jump to content
  • 0
Sign in to follow this  
Coby87

стрелка "спуститься ниже"

Question

Coby87    0

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

 <style>
#u3928 {
height: 100vh;
}
</style>

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0

Например

position: absolute;
top: 80vh;

или

position: absolute;
top: calc(100vh - 150px);

Все значения по вкусу

P.S.

Цитата

...применен скрипт  "на весь экран"

Не скрипт, а css код или стиль. Скрипт  - это совсем другое. Применяйте термины правильно, что бы вас понимали

  • Мне нравится 1

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
4 минуты назад, Coby87 сказал:

Это в Head прописать нужно? Как этот код именно к кнопке "вниз" привязать?

Точно так же как и этот код

 <style>
#u3928 {
height: 100vh;
}
</style> 

Я вам написал только атрибуты, полный код будет выглядеть например так:

#ID_вашей_кнопки {
position: absolute;
top: 80vh;
}

И поместить всё это надо в head внутрь тегов <style></style>. Так как там у вас уже есть код, у вас это примерно будет выглядеть так

<style>
#u3928 { /*Этот стиль у вас уже есть*/
	height: 100vh;
}
#ID_вашей_кнопки { /*Это стиль для кнопки*/
	position: absolute;
	top: 80vh;
}
</style> 


 

  • Мне нравится 1

Share this post


Link to post
  • 0
Coby87    0
37 минут назад, Павел Хомерики сказал:

Точно так же как и этот код


 <style>
#u3928 {
height: 100vh;
}
</style> 

Я вам написал только атрибуты, полный код будет выглядеть например так:


#ID_вашей_кнопки {
position: absolute;
top: 80vh;
}

И поместить всё это надо в head внутрь тегов <style></style>. Так как там у вас уже есть код, у вас это примерно будет выглядеть так


<style>
#u3928 { /*Этот стиль у вас уже есть*/
	height: 100vh;
}
#ID_вашей_кнопки { /*Это стиль для кнопки*/
	position: absolute;
	top: 80vh;
}
</style> 


 

Спасибо Павел, все получилось!

Share this post


Link to post
  • 0
Coby87    0

Хотя нет, кнопка совсем пропала...

код следующий:

<style>
#u3928 {
height: 100vh;
}
</style>

<style>
#u243820{
position: absolute;
top: 80vh;
}
</style>

Share this post


Link to post
  • 0
Coby87    0

При изменении 80vh на 15vh кнопка встала как надо, но при изменении размеров окна браузера кнопка остается на своем месте, а не сдвигается, получается что кнопка уезжает вниз на следующую страницу

Share this post


Link to post
  • 0
39 минут назад, Coby87 сказал:

Хотя нет, кнопка совсем пропала...

код следующий:

<style>
#u3928 {
height: 100vh;
}
</style>

<style>
#u243820{
position: absolute;
top: 80vh;
}
</style>

Не надо два раза теги style писать. Все стили, сколько бы их не было помещаются в один набор тегов - внимательно посмотрите на те примеры которые я вам дал. Пробел между ID кнопки и фигурной скобкой. - это не столь значимые факторы, однако - это тоже самое что писать слова с ошибками - смысл понятен но коробит.

Вот она где
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./applications/core/interface/imageproxy/imageproxy.php?img=http://dl3.joxi.net/drive/2017/11/27/0008/0401/545169/69/0fa9ced7b9.png&key=980e092be24b7060ce915aff66201b9a1af485a72944c4987fe45ea72c4f18b4" width="1000" />

  • Мне нравится 1

Share this post


Link to post
  • 0
Coby87    0
14 минут назад, Павел Хомерики сказал:

Не надо два раза теги style писать. Все стили, сколько бы их не было помещаются в один набор тегов - внимательно посмотрите на те примеры которые я вам дал. Пробел между ID кнопки и фигурной скобкой. - это не столь значимые факторы, однако - это тоже самое что писать слова с ошибками - смысл понятен но коробит.

Вот она где
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

21 минуту назад, Павел Хомерики сказал:

Не надо два раза теги style писать. Все стили, сколько бы их не было помещаются в один набор тегов - внимательно посмотрите на те примеры которые я вам дал. Пробел между ID кнопки и фигурной скобкой. - это не столь значимые факторы, однако - это тоже самое что писать слова с ошибками - смысл понятен но коробит.

Вот она где
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Павел, кнопку я нашел, код поправил:

<style>
#u3928 {
height: 100vh;
}
#u243820 {
position: absolute;
top: 10vh;
}
</style>

При этом при разрешении на ноутбуке все смотрится хорошо, я при разрешении 1920/1080 - кнопка уехала в лево и почему то не перестроилась по нижней границе страницы...почему так?

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0

По какому принципу муза назначает css стили объектам никто не знает. Поэтому, если такое случается надо переопределять стили музы с помощью команды !important.

Любые правки css удобно делать в инспекторе кода браузера, после чего их можно просто скопировать и вставить в Музу.

Исследуете объект и смотрите какие стили добавленные Музой мешают.
Пока видим что есть отступ справа который возможно влияеет на центрирование по горизонтали и отступ сверху, который добавляет 493 пикселя к нашим 80vh.

Переписываем значения и применяем к ним !important

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./applications/core/interface/imageproxy/imageproxy.php?img=http://dl4.joxi.net/drive/2017/11/27/0008/0401/545169/69/4fc56c6916.png&key=83f2b9cc0cf2a9a3390a35243bb48c02f2f3fa0f6ac81a061f5b53b031978699" width="1000" />

Как видите, после изменения значений кнопка поднялась по вертикали на место. Но не отцентровалась по горизонтали.
Отцентруем добавив позиционирование слева и отняв половину ширины объекта.

7b2f1e127d.png

Всё готово. Теперь убираем галочки со всех атрибутов, которые мы не редактировали.

b53ebb63a1.png

Жмем правую кнопу на стиле и копируем его в блокнот
1f5652d56f.png

Удаляем все закомментированные атрибуты (которые мы не редактировали)
33493377ab.png

fc2cded4d2.png

Код готов для вставки в Музу - копируете и вставляете в ваш код перед заrрывающим тегом </style> .
d8e03a44bc.png

Все действия производились в браузере Firefox. В других браузерах интерфейс инспектора кода может отличаться, но принципы везде одинаковые

Share this post


Link to post
  • 0

Что бы не цитировать огромные посты с кучей картинок, просто выделите текст на который хотите ответить и дождитесь всплывающей ссылки для цитирования фрагмента... А то палец уже болит скроллить и искать ответ :lol:
1644f8f02e.png

Share this post


Link to post
  • 0
Coby87    0
4 часа назад, Павел Хомерики сказал:

Код готов для вставки в Музу - копируете и вставляете в ваш код перед заrрывающим тегом </style> .

Процитировал только строчку)

В принципе код сработал как надо, непонятно только откуда строчка взялась и почему отступ с лева идет без приставки margin?

left: calc(50% - 22px) !important;

И почему в ней 22px ? 50% это вроде понятно - середина, а 22px это типа с учетом размеров самой кнопки? (она 45px - ровно не бьется - выходит 22px)

Share this post


Link to post
  • 0
3 часа назад, Coby87 сказал:

В принципе код сработал как надо, непонятно только откуда строчка взялась и почему отступ с лева идет без приставки margin?

Я эту строчку дописал сам. Есть внешние отступы margin, есть внутренние отступы padding, а есть просто свойства позиционирования top, right, bottom, left. Применяется для атрибута position . Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

3 часа назад, Coby87 сказал:

50% это вроде понятно - середина, а 22px это типа с учетом размеров самой кнопки? (она 45px - ровно не бьется - выходит 22px)

Да, именно так.

Можно -22.5 поставить. Но я не уверен, что все браузеры это поддерживают

  • Мне нравится 1

Share this post


Link to post
  • 0
Coby87    0
32 минуты назад, Павел Хомерики сказал:

Есть внешние отступы margin, есть внутренние отступы padding, а есть просто свойства позиционирования top, right, bottom, left. Применяется вместе с атрибутом position . Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Понял Павел, спасибо большое, статья почитал, немного прояснило

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...