Coby87 0 Report post Posted November 26, 2017 Подскажите, как закрепить стрелку "спуститься ниже" на нижней части экрана, если для первого экрана у меня применен скрипт "на весь экран". <style> #u3928 { height: 100vh; } </style> Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. Share this post Link to post
0 Павел Хомерики 3360 Report post Posted November 26, 2017 Например position: absolute; top: 80vh; или position: absolute; top: calc(100vh - 150px); Все значения по вкусу P.S. Цитата ...применен скрипт "на весь экран" Не скрипт, а css код или стиль. Скрипт - это совсем другое. Применяйте термины правильно, что бы вас понимали 1 Share this post Link to post
0 Coby87 0 Report post Posted November 27, 2017 Павел, добрый день! Это в Head прописать нужно? Как этот код именно к кнопке "вниз" привязать? Share this post Link to post
0 Павел Хомерики 3360 Report post Posted November 27, 2017 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 Report post Posted November 27, 2017 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 Report post Posted November 27, 2017 Хотя нет, кнопка совсем пропала... код следующий: <style> #u3928 { height: 100vh; } </style> <style> #u243820{ position: absolute; top: 80vh; } </style> Share this post Link to post
0 Coby87 0 Report post Posted November 27, 2017 При изменении 80vh на 15vh кнопка встала как надо, но при изменении размеров окна браузера кнопка остается на своем месте, а не сдвигается, получается что кнопка уезжает вниз на следующую страницу Share this post Link to post
0 Павел Хомерики 3360 Report post Posted November 27, 2017 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 Report post Posted November 27, 2017 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 Павел Хомерики 3360 Report post Posted November 27, 2017 По какому принципу муза назначает 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" /> Как видите, после изменения значений кнопка поднялась по вертикали на место. Но не отцентровалась по горизонтали. Отцентруем добавив позиционирование слева и отняв половину ширины объекта. Всё готово. Теперь убираем галочки со всех атрибутов, которые мы не редактировали. Жмем правую кнопу на стиле и копируем его в блокнот Удаляем все закомментированные атрибуты (которые мы не редактировали) Код готов для вставки в Музу - копируете и вставляете в ваш код перед заrрывающим тегом </style> . Все действия производились в браузере Firefox. В других браузерах интерфейс инспектора кода может отличаться, но принципы везде одинаковые Share this post Link to post
0 Павел Хомерики 3360 Report post Posted November 27, 2017 Что бы не цитировать огромные посты с кучей картинок, просто выделите текст на который хотите ответить и дождитесь всплывающей ссылки для цитирования фрагмента... А то палец уже болит скроллить и искать ответ Share this post Link to post
0 Coby87 0 Report post Posted November 27, 2017 4 часа назад, Павел Хомерики сказал: Код готов для вставки в Музу - копируете и вставляете в ваш код перед заrрывающим тегом </style> . Процитировал только строчку) В принципе код сработал как надо, непонятно только откуда строчка взялась и почему отступ с лева идет без приставки margin? left: calc(50% - 22px) !important; И почему в ней 22px ? 50% это вроде понятно - середина, а 22px это типа с учетом размеров самой кнопки? (она 45px - ровно не бьется - выходит 22px) Share this post Link to post
0 Павел Хомерики 3360 Report post Posted November 27, 2017 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 Report post Posted November 27, 2017 32 минуты назад, Павел Хомерики сказал: Есть внешние отступы margin, есть внутренние отступы padding, а есть просто свойства позиционирования top, right, bottom, left. Применяется вместе с атрибутом position . Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. Понял Павел, спасибо большое, статья почитал, немного прояснило Share this post Link to post
Подскажите, как закрепить стрелку "спуститься ниже" на нижней части экрана, если для первого экрана у меня применен скрипт "на весь экран".
<style>
#u3928 {
height: 100vh;
}
</style>
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Share this post
Link to post