|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
03.11.2015, 18:56 | #1 |
Регистрация: 27.11.2010
Сообщений: 6
|
Проблема с вёрсткой блочных элементов в списке
Получается имеются блоки заказчик попросил чтоб блоки были подкошены как показано на картинке что ниже.
Ок сделал с помощью transform: skew(25deg); после чего начались проблемы с позиционированием блоков при изменении изображения блоки разъезжаются подскажи пжлст что делать ? Я уже всё перепробывал Код HTML:
<div id="background-product"> <ul class="products-list"> <li><div><img src="icons/theman.png" alt=""><p>Дирекция</p><span><p>1C KPI,1C Монитор эффективности, 1С:Консалидация,</p><p>1С:Планирование Бюджета,1С:Рапорт руководителю</p></span></div></li> <li><div><img src="icons/postavshik.png" alt=""><img src="icons/arrow.png" alt="" class="arrow"><p>Поставщик</p><span><p>Управление целями поставок (SCM), 1С:Логистика,</p><p>1С:Управление торговлей(модуль закупки)</p></span></div></li> <li><div><img src="icons/settings.png" alt=""><p>Снабжение</p><span><p>Управление целями поставок(SCM)</p><p>1С:Логистика 1С:Склад 1С:Управление торговлей и торговым предприятием</p></span></div></li> <li><div><img src="icons/proiz.png" alt=""><p>Производство</p><span><p>Система управления ресурсами компании (ERP)</p><p>1С:Управление производственным предприятием,1С:Управление предприятием 2.0</p> <p>1C:Комплектация и сборка</p></span></div></li> <li><div><img src="icons/hand.png" alt=""><p>Продажи</p><span><p>Менеджмент продаж(SM)</p><p>1С:Управление торговлей и торговым предприятием</p></span></div></li> <li><div><img src="icons/client.png" alt=""><p>Клиент</p><span><p>Система управления взаимоотношения с клиентами (CRM)</p><p>1С:CRM</p></span></div></li> <li><div><img src="icons/money.png" alt=""><p>Финансы</p><span><p>1C:Бухгалтерия</p><p>1С:Комплексное управление финансами и бюджетирование</p></span></div></li> <li><div><img src="icons/search.png" alt=""><p>HR</p><span><p>1С:Зарплата и управление персоналом</p></span></div></li> <li><div><img src="icons/mancompany.png" alt=""><p>Юридический отдел</p><span><p>1C:Документооборот</p></span></div></li> </ul> </div> Код HTML:
.products-list li { text-align:center; -moz-transition: all 1.5s ease-out; -o-transition: all 1.5s ease-out; -webkit-transition: all 1.5s ease-out; -webkit-transform: skew(-25deg); -o-transform: skew(-25deg); -moz-transform: skew(-25deg); padding:0px; margin:0px; float:left; display:inline-block; text-align:left; width:20%; color:#fff; } .products-list li:first-child{ height:200px; width:100%; margin:0px; padding:0px; margin-left:6.5em; } .products-list li:first-child div{ color:#fff; background: #0067a0; width:60%; } .products-list li:first-child div span p { display:none; color: #fff; text-align: center; text-indent: 0px; -moz-transition: all 3s ease-out; -o-transition: all 3s ease-out; -webkit-transition: all 3s ease-out; cursor: pointer; margin-left:1em; margin-top:1em; font-size:1em;} .products-list li:first-child div p { font-size:2em;} .products-list li:first-child img { display:inline-block; width:auto; height:auto; float:left; margin:2em 2em 0 2em; } .products-list li div { z-index:2; position:relative; color:#fff; background-color: #ccc; color: #333; text-align: center; text-indent: 0px; -moz-transition: all 1.5s ease-out; -o-transition: all 1.5s ease-out; -webkit-transition: all 1.5s ease-out; cursor: pointer; margin:auto; text-align:center; font-weight:bold; height:250px; } Последний раз редактировалось Вадим Мошев; 04.11.2015 в 19:10. |
03.11.2015, 19:16 | #2 |
Регистрация: 27.11.2010
Сообщений: 6
|
Блин поторопился..... само вдхновение пришло и ручкой по листу я сочиняю что проблему закрываю ну для не просвещённых я обернул всё в section задал transform:srew(25deg) а у чего надо выровнил и уаля эскюз муа всё получилось и неровности ушли
|
03.11.2015, 20:50 | #3 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
там на фоне правильные треугольники: угол должен быть 30 градусов
Alar, верни репу!
|
04.11.2015, 17:56 | #4 |
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
|
Один из вариантов
FaTa1iTy_777, тут можно упростить вёрстку, а картинки выводить через background-image. Располагаем на блоке через background-position, и если надо, регулируем размер background-size. Тогда вёрстка не сломается.
Результат https://jsfiddle.net/wpot22yh/embedded/result/ Исходники https://jsfiddle.net/wpot22yh |
04.11.2015, 19:10 | #5 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,570
|
|
Опции темы | Поиск в этой теме |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
найти в односвязном списке количество элементов | vova_makr | Помощь студентам | 6 | 24.10.2015 16:51 |
Обмен двух элементов в списке(C++) | LifeWind | Помощь студентам | 7 | 15.06.2013 23:43 |
Указатели.Поиск элементов в списке | misery24-7 | Паскаль, Turbo Pascal, PascalABC.NET | 6 | 18.06.2012 14:26 |
Перестановка элементов в списке | Adya | Помощь студентам | 0 | 26.08.2009 15:11 |
Обмен местами 2х элементов в односвязном списке. | amdbodia | Общие вопросы C/C++ | 4 | 31.05.2009 23:26 |