Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Вопросы по верстке страницы
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Вопросы по верстке страницы

Страниц (1): [1]
 

1. rownong - 26 Апреля, 2020 - 20:36:58 - перейти к сообщению
Сверстал такую страницу https://yadi[dot]sk/i/-Xjp4TVXmoPU2Q
Хочу туда разместить фильтры и диаграмму на плитке https://yadi[dot]sk/i/qFsfZVnHjrZKuw

Вопросы:
1. Я верстал указывая отступы по пикселям. Как понимаю корректно будет смотреться только на моем мониторе. Чтобы на остальных мониторах норм смотрелось ка нужно верстать, указать отступы в %?
2. Как скруглять края у рамок https://yadi[dot]sk/i/4R643bmGorBIlw
3. Как сделать выпадающий панели у фильтров с набором полей https://yadi[dot]sk/i/oh-wPJFK0AZCrg (с плавным движением вниз при раскрытии)
2. Vladimir Kheifets - 27 Апреля, 2020 - 08:03:24 - перейти к сообщению
rownong пишет:
Сверстал такую страницу https://yadi[dot]sk/i/-Xjp4TVXmoPU2Q
Хочу туда разместить фильтры и диаграмму на плитке https://yadi[dot]sk/i/qFsfZVnHjrZKuw

Вопросы:
1. Я верстал указывая отступы по пикселям. Как понимаю корректно будет смотреться только на моем мониторе. Чтобы на остальных мониторах норм смотрелось ка нужно верстать, указать отступы в %?
2. Как скруглять края у рамок https://yadi[dot]sk/i/4R643bmGorBIlw
3. Как сделать выпадающий панели у фильтров с набором полей https://yadi[dot]sk/i/oh-wPJFK0AZCrg (с плавным движением вниз при раскрытии)

Добрый день!
Ответы:
1. не указать одинаковый отступы в %
CODE (html):
скопировать код в буфер обмена
  1. /*--- content центр. по горизонтале --*/
  2. .content{
  3. display:inline-block;
  4. margin: 0 auto;
  5. }

2. закругленная рамка и тень, если нужна
CODE (html):
скопировать код в буфер обмена
  1. /*--- закругленная рамка 5px -------*/
  2. .RB{
  3.         border: 1px solid #85A0C9;
  4.         border-radius: 5px;
  5.         -webkit-border-radius:5px;
  6.         -moz-border-radius: 5px;
  7. }
  8. /*-- тень, если нужна -----------*/
  9. .BS{box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);}
CODE (html):
скопировать код в буфер обмена
  1. <div class="content RB BS"></div>

3. применить CSS transition
http://gnatkovsky[dot]com[dot]ua/plavno-[dot][dot][dot]moshhyu-css[dot]html
Удачи!
3. rownong - 27 Апреля, 2020 - 13:15:45 - перейти к сообщению
Спасибо за ответы.

1. Не получил ответ на свой вопрос. Мне верстать указывая отступы не в пикселях а %.
Можно ли размеры блоков указывать в %?

2. Не знал про тени CSS спасибо.
Только не пойму как оставить тень только снизу https://yadi[dot]sk/i/Z9hp5bhGcVWd5A чтобы по бокам не было видно.
Настройки выставил сейчас
box-shadow: 0 5px 10px 3px #b5b5b5;
4. Albert - 08 Июня, 2020 - 16:13:21 - перейти к сообщению
rownong пишет:
1. Не получил ответ на свой вопрос. Мне верстать указывая отступы не в пикселях а %.
Можно ли размеры блоков указывать в %?

Отступы в процентах - плохая идея. В процентах лучше указывать размеры блоков. А выравнивать их лучше всего с помощью flexbox.

 

Powered by ExBB FM 1.0 RC1