Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы Как реализовать адаптивный блок по вертикали?

Как реализовать адаптивный блок по вертикали?


     09.12.2015    Общие вопросы, Шаблоны (TPL), Стили (CSS)    739

вопрос
Как реализовать адаптивный блок по вертикали?


Как реализовать адаптивный блок по вертикали?

Ответил: zikwal


Пишешь в main.tpl после закрытия последнего в твоем шабе дива -

Следующее:
  <div class="adaptblok">
    <div class="content">
      Тут весь контент
      </div>
    </div>


И в стили:


position: absolute;
    width: 98%;
    min-height: 200px;
    background: #fff;
    -webkit-box-shadow: -4px 1px 7px 0px rgba(50, 50, 50, 0.17);
    -moz-box-shadow: -4px 1px 7px 0px rgba(50, 50, 50, 0.17);
    box-shadow: -4px 1px 7px 0px rgba(50, 50, 50, 0.17);
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;


(Для того, чтобы он прям адаптивным был тебе нужно изучить - Правило @media :-)
Ну и для такой же анимации при наведении нужно использовать псевдокласс :hover - и изменять позицию блока :-) )
Удачи!

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

saruev
6

saruev - 9 декабря 2015 23:24 - Юзер

очень нужна помощь

saruev
6

saruev - 10 декабря 2015 00:27 - Юзер


zamaliev
16 | 1

zamaliev - 10 декабря 2015 02:13 - Юзер

Какой - то сайт, на террористический похож

saruev
6

saruev - 10 декабря 2015 09:56 - Юзер

Да нет ) все по закону))

zikwal
2

35 | 3

zikwal - 10 декабря 2015 06:04 - Юзер

Пишешь в main.tpl после закрытия последнего в твоем шабе дива - <div class="panel panel-default">
Следующее:
  <div class="adaptblok">
    <div class="content">
      Тут весь контент
      </div>
    </div>


И в стили:


.adaptblok {
    position: absolute;
    width: 98%;
    min-height: 200px;
    background: #fff;
    -webkit-box-shadow: -4px 1px 7px 0px rgba(50, 50, 50, 0.17);
    -moz-box-shadow: -4px 1px 7px 0px rgba(50, 50, 50, 0.17);
    box-shadow: -4px 1px 7px 0px rgba(50, 50, 50, 0.17);
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
}


(Для того, чтобы он прям адаптивным был тебе нужно изучить - Правило @media :-)
Ну и для такой же анимации при наведении нужно использовать псевдокласс :hover - и изменять позицию блока :-) )
Удачи!

saruev
6

saruev - 10 декабря 2015 10:10 - Юзер

чет не получается, мне правый боковой sidedbar нужно чтобы он как и левый был бесконечным по вертикали

Endy
135 | 13

Endy - 10 декабря 2015 14:27 - Гости

.panel-body {
padding: 15px;
margin-bottom: 1130px;
}

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

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