Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Общие вопросы » Как реализовать адаптивный блок по вертикали?

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


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

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


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

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

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

saruev
Юзер

zamaliev
Юзер

zamaliev - -

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

saruev
Юзер

saruev - -

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

zikwal
Юзер

zikwal - -

Пишешь в 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 - -

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

Endy
Гости

Endy - -

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

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

наверх