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

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


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

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


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

Ответил: 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
Юзер

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

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

saruev
Юзер

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


zamaliev
Юзер

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

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

saruev
Юзер

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

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

zikwal
Юзер

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
Юзер

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

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

Endy
Гости

Endy - 10 декабря 2015 14:27 -

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

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

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

наверх