Jump to content
  • 0
Sign in to follow this  
Евгений Голубев

Прилипание по блоку.

Question

Привет!

Подскажите пожалуйста, можно ли сделать прилипание объекта к определенному блоку?!

Я сделал первый блок 100 ширины и он автоматом подстраивается под 100 высоту, сверху сделал кнопку "Заказать сейчас", проблема в том, что эта кнопка не прилипает к нижней части этого блока, а остается на месте (не знаю как сделать).

Вопрос:

1. Есть ли спец.виджеты для прилипания именно по блоку или что-то в этом роде?

2. Само собой понимаю что можно в стайле прописать отступы и прилипание определенного id, но не знаю как :)

Подскажите народ, спасибо)))

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

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0

Ну начнем с того что ctrl+scroll down не имитирует правильно экраны с большими размерами, так как не учитывается dpi. Это просто масштабирование. Для имитации установите в браузер дополнение Web Developer ( у меня фаерфокс рабочий браузер) и смотрите через функцию resize.

А позиционировать объект можно с помощью css (вставлять в head)
 

<style type="text/css">
#u000 {
	position: absolut !important;
	left: 50%;
	top: 50vh;
	margin-left: -111px;
	margin-top: -111px;
	}
</style>

Где:

  • u000 = ID вашего объекта
  • top = настройте так как вам надо. Вместо  top  можно использовать bottom
  • margin-left = половине ширины вашего объекта, в пикселях с отрицательным значением
  • margin-top = половине высоты вашего объекта в пикселях с отрицательным значением
     

Share this post


Link to post

Новая статья

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

Ну начнем с того что ctrl+scroll down не имитирует правильно экраны с большими размерами, так как не учитывается dpi. Это просто масштабирование. Для имитации установите в браузер дополнение Web Developer ( у меня фаерфокс рабочий браузер) и смотрите через функцию resize.

А позиционировать объект можно с помощью css (вставлять в head)
 


<style type="text/css">
#u000 {
	position: absolut !important;
	left: 50%;
	top: 50vh;
	margin-left: -111px;
	margin-top: -111px;
	}
</style>

Где:

  • u000 = ID вашего объекта
  • top = настройте так как вам надо. Вместо  top  можно использовать bottom
  • margin-left = половине ширины вашего объекта, в пикселях с отрицательным значением
  • margin-top = половине высоты вашего объекта в пикселях с отрицательным значением
     

А как позиционировать его именно относительно 1му блоку?!

В коде не увидел 

Share this post


Link to post
  • 0
5 минут назад, Евгений Голубев сказал:

А как позиционировать его именно относительно 1му блоку?!

В коде не увидел 

Я не вижу в Вашем примере блока. Я вижу заливку в браузере. Вам нужно что бы кнопка была всегда на одинаковом расстоянии от низа браузера или что бы она всегда была в ногах мальчика? :)

Share this post


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

Я не вижу в Вашем примере блока. Я вижу заливку в браузере. Вам нужно что бы кнопка была всегда на одинаковом расстоянии от низа браузера или что бы она всегда была в ногах мальчика? :)

Это блок, просто он подстроился по высоте в браузере, поэтому не заметили.

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

Share this post


Link to post
  • 0
3 минуты назад, Евгений Голубев сказал:

Это блок, просто он подстроился по высоте в браузере, поэтому не заметили.

Это у Вас фиксированный макет как я понимаю. Тогда flex Вам только поможет
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
 

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

Share this post


Link to post
  • 0
1 час назад, Евгений Голубев сказал:

Это блок, просто он подстроился по высоте в браузере, поэтому не заметили.

В общем вот примерно то что Вам нужно, без flex:

Надо учитывать нюансы музы, а именно то что все элементы попадают не прямиком в body, а в page. Поэтому, позиционирование относительно body не получится. Для того что бы позиционировать кнопку относительно блока, надо поместить ее в блок и единственный способ это сделать, использовать вместо блока кнопку состояния, и поместить внутрь нее нашу кнопку.
Код получается такой:

<style type="text/css">
    html, body { /* этот код нужен для того что бы блок был 100% высоты */
             height: 100%;
             }
              .browser_width, position_content { /* этот код нужен для того что бы блок был 100% высоты */
              height: 100%;
             }
    #buttonu100 { /* блок (кнопка состояния) id меняете на свой */
              position: absolute !important; 
	          height: 100%;
	         }
        #u97 {  /* наша кнопка id меняете на свой */
               position: absolute !important;
               top: 70vh;                 
               margin: 0px; 
               padding: 0px;
              }
</style>

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

Жестко прямо привязать к низу не получится, потому что блок тоже растягивается. В музе он не большой в высоту, поэтому позиционирование от top
1a936d520a.png

Share this post


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

Это у Вас фиксированный макет как я понимаю. Тогда flex Вам только поможет
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
 

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

"И кстати так не стоит делать" - почему же?!

В стиле прокрутка выключена + стоит скрипт на запрет нажатия колеса, размеры максимальные 1920, так что ну никак не увидят.

Share this post


Link to post
  • 0
7 минут назад, Евгений Голубев сказал:

В стиле прокрутка выключена + стоит скрипт на запрет нажатия колеса, размеры максимальные 1920, так что ну никак не увидят.

Поэтому и не стоит. Например на экране 1024 Вы отобрали у пользователя малейший шанс увидеть часть контента, которая будет просто обрезаться.  И еще при этом отсутствие  горизонтального скроллинга = закрыть страницу и забыть о кривом сайте. Отключать горизонтальный скроллинг - это плохая практика. Надо делать правильно верстку, а не отключать скроллинг

Share this post


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

Поэтому и не стоит. Например на экране 1024 Вы отобрали у пользователя малейший шанс увидеть часть контента, которая будет просто обрезаться.  И еще при этом отсутствие  горизонтального скроллинга = закрыть страницу и забыть о кривом сайте. Отключать горизонтальный скроллинг - это плохая практика. Надо делать правильно верстку, а не отключать скроллинг

Я отталкиваюсь от 1280, т.к даже в самых дальних и забытых офисах - ну это минималка (на практике проверил), а там уж и 1366 идет.

Как бы то ни было - приму к сведению.

А за код выше, огромное Вам спасибо, все робит как и планировалось.

О кнопке состояния думал, но что-то ёкнуло и не стал ставить, а щас вот убедился - надо было)

Share this post


Link to post
  • 0
Только что, Евгений Голубев сказал:

Я отталкиваюсь от 1280, т.к даже в самых дальних и забытых офисах - ну это минималка (на практике проверил), а там уж и 1366 идет.

Заблуждение. Вы не берете в расчет огромную армию владельцев нетбуков 960 на 600 кажется. Да и квадратных 15 ти дюймовок валом.
Есть обходной путь. Удалите запрет скроллинга из стилей, а для этого объекта включите эффект прокрутки, как на скрине ниже. Тогда горизонтальный скроллинг, который возникает из за этого объекта, исчезнет.

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

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...